Motion & Animations

High-fidelity animations are a core part of the Orbit experience. We recommend motion/react for all UI transitions and micro-interactions.

Best Practices

• Layout Transitions: Use layoutId for smooth shared element transitions.
• AnimatePresence: Correctly handle entry and exit animations for dynamic lists.
• Gestures: Implement intuitive hover and tap effects to increase engagement.

Common Patterns

Three patterns cover most product UI. First, shared layout transitions: give a card and its expanded modal the same layoutId so the browser morphs between states instead of snapping. Second, list choreography: wrap a map of rows in AnimatePresence with initial, animate, and exit props so items fade, slide, or scale in and out in a predictable order. Third, scroll-driven storytelling: bind opacity, rotate, or scale to scroll progress for landing pages and onboarding flows. Each pattern keeps motion meaningful — it guides the eye or signals state rather than decorating for its own sake.

Performance Considerations

Keep animations GPU-friendly by animating transform and opacity instead of width, height, or top. Set motion only on what changes, batch updates through variants, and respect prefers-reduced-motion by falling back to fade-only transitions. Small projects rarely need it, but for heavy screens Orbit's design audit flags animated elements that repaint large areas of the page.

Pre-baked in the Sandbox

The superset sandbox template ships motion, three, @react-three/fiber, @react-three/drei, @react-three/postprocessing, and zustand, so animation-heavy apps compile and run immediately without dependency wrangling.