Animation guidelines

Chocolate UI ships with opinions so every block feels like one system.

Entrances: Reveal

<Reveal staggerChildren={0.08}>
  <RevealItem><h2>Heading</h2></RevealItem>
  <RevealItem preset="blur"><p>Body</p></RevealItem>
</Reveal>

Presets: fade-up (default), fade, scale, blur, slide-left, slide-right. Reveals fire once, at 25% visibility.

Springs and easings

lib/motion.ts exports springs.soft | snappy | bouncy | gentle and easings.chocolate ([0.22, 1, 0.36, 1]). Buttons press with snappy; cards lift with soft.

Continuous effects

Marquees, beams, auroras and shimmers are CSS keyframes on transform/opacity. Pointer-driven effects (spotlight, magnetic, tilt) use motion values and never re-render React per frame.

Reduced motion

useReducedMotion() disables continuous and parallax effects; entrances collapse to a fade. The theme also clamps all CSS animation durations under prefers-reduced-motion.