Duration: Precision Millisecond Timing & Easing Curves in React
While modern physics-driven springs dynamically determine their own natural settling time, deterministic duration remains critical for timed loaders, sequenced brand splash screens, and video-synced web animations. Choosing the correct duration—and pairing it with an appropriate easing curve—is what separates a snappy, responsive UI from a sluggish, dragging user experience. ExodeUI provides micro-second timing precision, visual duration scaling, and dynamic timescale manipulation that allows interfaces to speed up or slow down seamlessly based on user preference.
ExodeUI separates logical timeline duration from real-time clock timestamps. By multiplying delta times by an active timeScale factor, animations can be scrubbed, reversed, or frozen without breaking internal clock state.
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 TimedStepLoader() {
const [timeScale, setTimeScale] = useState(1.0);
return (
<div className="loader-box">
<ExodeUICanvas
src="/scenes/step-loader.json"
inputs={{
"durationSeconds": 2.4,
"timeScale": timeScale, // 0.5 = slow-mo, 2.0 = double speed
"easeType": "circOut"
}}
autoPlay={true}
/>
<button onClick={() => setTimeScale(s => s === 1.0 ? 2.0 : 1.0)}>
Toggle 2x Velocity
</button>
</div>
);
}Frequently Asked Questions about duration
What is the recommended duration for standard web micro-interactions?
Optimal micro-interactions range between 150ms and 350ms. Transitions under 100ms feel instant; transitions over 400ms feel sluggish to frequent users.
Can duration be overridden dynamically based on user reduced motion preferences?
Yes. ExodeUI detects prefers-reduced-motion queries and can automatically compress duration to 0ms or switch to instant state cuts.
How does timeScale manipulation benefit debugging in ExodeUI?
Setting timeScale to 0.1 allows design engineers to inspect micro-second keyframe transitions in ultra-slow motion directly in the live React app.