React Architecture Concept • Core Motion Model
Stagger: Choreographed Sequence & Index Offsets in React
Stagger animations introduce visual rhythm and directional flow to complex interfaces by animating a series of related elements with calculated time delays. Whether revealing cards in a bento grid, displaying search results, or staggering navigation menu items, manual CSS animation-delay calculations quickly become unmaintainable when list items change dynamically. ExodeUI provides built-in stagger orchestration that automatically computes entrance curves based on child index, grid coordinates, or distance from the user cursor.
In an ExodeUI file, staggered elements are offsets on a timeline inside the animation, played by the runtime, rather than many separate timers in React state.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React from 'react';
import { ExodeUICanvas } from 'exodeui';
export function StaggeredBentoGrid() {
return (
<div className="bento-container">
<ExodeUICanvas
src="/scenes/bento-stagger.json"
stateMachine="BentoReveal"
inputs={{
"staggerOffset": 0.08, // 80ms delay between elements
"staggerDirection": "radial", // center-outward reveal
"triggerReveal": true
}}
/>
</div>
);
}Frequently Asked Questions about stagger
Can ExodeUI stagger elements radially from the point of user interaction?
Yes. ExodeUI supports radial, center-outward, and edge-to-edge stagger orders calculated from the exact X/Y coordinate of a user click or pointer entry.
How do dynamic lists handle stagger when new items are added?
The visual state machine dynamically recalculates index offsets for new incoming items without restarting or interrupting elements currently mid-animation.
How does ExodeUI stagger performance compare to Framer Motion variants?
Framer Motion evaluates stagger variants by propagating state down React component subtrees. ExodeUI keeps the stagger inside the animation file and draws it on a canvas, so React does not re-render each element. Framer Motion is the better fit when the staggered items are real DOM elements.