Foundation

Motion

Calm, confident, never bouncy. Motion is a luxury cue, not entertainment. HODL Club uses the slow-end of the scale.

Philosophy

Things move because they're being handed to you, not because they want attention. We favor short fades, gentle scales (0.98 → 1.00), and emphasized easing on entrance. Spring is reserved for direct manipulation (drag, swipe). Avoid bouncy overshoots on UI — they read as toy, not as luxury.

Duration & easing

fast (taps, toggles)150ms · standard

base (cards, popovers)250ms · standard

slow (sheets, modals)400ms · emphasized

hero (page entrance)700ms · emphasized

standard easingcubic-bezier(.2,.8,.2,1)

emphasized easingcubic-bezier(.22,1,.36,1)

spring (direct manipulation)stiffness 220 · damping 26

Try it

Staggered card

Code

import { m, LazyMotion, domAnimation } from "motion/react";

<LazyMotion features={domAnimation}>
  <m.div
    initial={{ opacity: 0, y: 24 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
  />
</LazyMotion>