Motion 3D Playbook
The goal is not maximum motion. The goal is maximum consequence per moving pixel. Source: frontend-frontier-pack/codex-skill/frontend-frontier/references/motion-3d-playbook.md
Design Position
| Field | Value |
|---|---|
| Design family | Motion, effects, texture, and illustration |
| Use when | Use when motion, effects, texture, sound, or illustration depends on Motion 3D Playbook. |
| System map | Design System Map |
| Proof path | Reduced-motion fallback, performance budget, and screenshot or video proof for the visual treatment. |
Motion Hierarchy (Three Layers)
Layer 1: Ambient -- always-on background life (slow shader drift, tiny light movement, idle floating objects, grain/noise). Must survive 30 seconds of viewing. Should not be the strongest motion on screen. Pause or degrade on mobile and reduced-motion.
Layer 2: Interaction -- user-response layer (hover, press, menu open, card focus, tooltip). Default 140-240ms. Prioritize clarity over flourish. Must be interruptible and retarget cleanly. Prefer Motion or equivalent runtime over bespoke CSS keyframes.
Layer 3: Narrative -- scroll or route choreography (pinned sections, crossfades, parallax reveals, staged hero entrances). Use sparingly. Every step must explain something. Do not scroll-jack unless the site depends on that mechanic.
Timing Defaults
- Micro interactions: 140-220ms
- Panel/card reveals: 220-420ms
- Hero intro: 700-1400ms
- Ambient loops: 6-20s
- Stagger interval: 20-60ms for text, 40-120ms for cards
Easing Defaults
Gentle ease-out for entrances. Sharper ease-in-out for structural transitions. Avoid springy cartoon motion on serious products. Linear only for constant ambient drift or scrubbed scroll.
Tool Selection
| Tool | Use for |
|---|---|
| CSS | Tokenized fallbacks, tiny hover states, native scroll-driven enhancements, the last 10% of polish |
| Motion | React component entrances, shared layout movement, gesture states, stateful UI transitions |
| GSAP + ScrollTrigger | Orchestration, complex sequences, scroll-linked timelines, mixed DOM/canvas storytelling |
| Lenis | Synchronized scroll when scroll-linked motion needs phase-locking |
| Three.js / R3F + drei | True 3D objects, particle fields, camera-based staging |
| OGL / shaders | Minimal-abstraction WebGL, shader-heavy microsites, contained GPU surfaces |
| Native scroll APIs / View Transitions | Progressive enhancement, React <ViewTransition> experiments |
Parallax Rules
Translate and rotate in very small amounts. Clamp aggressively on mobile. Good ranges: pointer translate 4-18px, pointer rotate 1-6deg, scroll multiplier 0.03-0.12. Anti-patterns: text drifting independently, contradictory motion directions, parallax on everything.
3D Scene Rules
Use real 3D only when the product metaphor depends on spatial depth, the brand needs a world, or the object justifies perf cost. One hero object, one light thesis, one camera thesis. Slow drift beats rollercoaster movement. Choose one material family and stick to it.
Shader Guidance
Shaders work when the surface itself is the brand move: lit gradients, blob/cloud motion, distortion on hover/scroll, abstract tech surfaces. Do not use for every card background or long text-reading surfaces.
Enter and Exit Choreography
Enter: Split large groups into semantic chunks. Stagger title, description, actions. Combine small translateY, subtle blur, and opacity. 60-100ms between sections.
Exit: Subtler than enters. Reduce travel distance. Keep directional hint but soften it. This asymmetry makes the interface feel calmer.
Performance Rules
DOM: animate transform and opacity first. Apply will-change narrowly and remove when done. Canvas/WebGL: keep hero scenes under ~100 draw calls on mobile. Lazy-load heavy scene assets. Ship a poster frame before scene hydrates. Above-the-fold text/CTA must be readable before the fanciest thing loads. Respect prefers-reduced-motion.
Kill Switches
If any appear, simplify: dropped frames on mid-tier laptop, copy hard to read during animation, mobile device heats up, multiple effects compete, the motion explains nothing.
Timeline
- 2026-07-01 | Design category refresh added this page to the Motion, effects, texture, and illustration family, linked it to Design System Map, and kept it standalone because Motion 3D Playbook owns a distinct design decision surface in this family. Source: User request, 2026-07-01