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. ExodeUI provides declarative interpolation utilities that map input domains to output ranges with custom extrapolation modes, easing transformations, and zero garbage collection overhead.
ExodeUI executes range interpolation routines within optimized WebAssembly memory buffers. High-frequency updates stream continuously without creating ephemeral array objects that trigger JavaScript garbage collection pauses.
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).