React Architecture Concept • Core Motion Model
Interpolate: Mapping Numeric Ranges & Continuous Values in React
Interpolation is the mathematical backbone of reactive user interfaces. Whether you need to map a 0–100 scroll percentage to a 0–360 degree rotation, interpolate pointer drag distance into background blur, or blend hex color values smoothly based on battery percentage, manual mathematical clamping is prone to off-by-one errors and visual clamping glitches. In ExodeUI you can bind a number input, such as scroll progress, to animated properties visually, instead of writing the mapping math in components.
Values your code sends with setInputNumber drive properties inside the animation file, so frequent updates do not re-render your React tree.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function InterpolatedSlider() {
const [sliderVal, setSliderVal] = useState(50);
return (
<div className="slider-container">
<input
type="range"
min="0"
max="100"
value={sliderVal}
onChange={(e) => setSliderVal(Number(e.target.value))}
/>
<ExodeUICanvas
src="/scenes/color-interpolate.json"
inputs={{
"sliderInput": sliderVal, // Mapped in scene to color, scale, and angle
"clampOutput": true
}}
/>
</div>
);
}Frequently Asked Questions about interpolate
What is the difference between linear interpolation (lerp) and eased interpolation?
Linear interpolation moves at constant velocity between points, while eased interpolation applies mathematical acceleration curves to provide natural deceleration toward targets.
Can ExodeUI interpolate complex multi-stop color palettes?
Yes. ExodeUI supports multi-stop color ramps, RGB/HSL transitions, and SVG path stroke offsets interpolated across input ranges.
How does extrapolation work when input values exceed the specified domain?
ExodeUI allows you to specify clamp (preventing values outside bounds), extend (continuing trajectory linearly), or wrap (looping values periodically).