React Architecture Concept • Core Motion Model
Timeline: Deterministic Multi-Track Animation Sequencing in React
When an interface requires complex multi-step choreography—such as an onboarding hero reveal, an interactive checkout confirmation, or a product showcase narrative—standard declarative React state becomes deeply unwieldy. Coordinating dozens of useState triggers and setTimeout delays leads to fragile race conditions. ExodeUI brings professional multi-track timeline orchestration to React, offering visual keyframe tracks, sub-second relative offsets (<+=0.2), bidirectional playheads, and events your code can listen for, all inside one file the runtime plays.
Timelines live inside the .exode file alongside states and logic, and the runtime plays them. Your code can trigger, pause or switch states through inputs.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React, { useRef } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function InteractiveNarrativeTimeline() {
const canvasRef = useRef(null);
const handlePlayheadScrub = (timeInSeconds) => {
if (canvasRef.current) {
canvasRef.current.seekTimeline('MainNarrative', timeInSeconds);
}
};
return (
<div className="timeline-wrapper">
<ExodeUICanvas
ref={canvasRef}
src="/scenes/product-tour.json"
autoPlay={true}
onTimelineMarker={(marker) => console.log('Passed stage:', marker)}
/>
<div className="controls">
<button onClick={() => canvasRef.current?.pause()}>Pause</button>
<button onClick={() => canvasRef.current?.play()}>Play</button>
<button onClick={() => handlePlayheadScrub(2.5)}>Jump to Feature 2</button>
</div>
</div>
);
}Frequently Asked Questions about timeline
Can ExodeUI timelines combine physics springs with deterministic keyframes?
Yes. ExodeUI allows timeline keyframes to drive physical constraint targets, letting elements follow rigid timeline choreography while retaining natural spring elasticity on user interaction.
How do relative offset markers work in ExodeUI timelines?
Keyframes can be anchored relative to previous track completions using syntax like <+=0.15, ensuring animations stay synchronized even if earlier cue lengths change.
Can ExodeUI timelines dispatch event callbacks into React state?
Yes. You can place named event markers anywhere on the timeline that fire React callback hooks when crossed by the playhead.