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

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

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.

What a large agent budget buys in 3D

Dan Greenheck spent $1,874.40 of Opus 5.5 tokens (59% of a weekly $200 plan, about 8 hours with subagents) on Tidewater, a browser fishing game on a tropical island: birds diving, cloth and signs in the wind, crabs that burrow when you approach, night lights on the dock, and 60 fps at 1440p. Almost all the prompts were "add X and Y" or "this looks weird, make it better". Source: X/@dangreenheck, 2026-09-23; Source: dgreenheck/tidewater

The lesson is about where effort goes: with a strong model, the human's job shrinks to noticing what looks wrong. Detail density, not technical direction, was the bottleneck.

Meng To builds Three.js interfaces and procedural models in code from a reference, asking the model to keep comparing against it; see Compare Against the Reference. Source: X/@MengTo, 2026-09-06

"Cosy Japan 2.0", a walkable summer town with no assets, took about four hours of Fable 5.1; the author expects a week of looping would reach console quality. Source: X/@0xPaulius, 2026-09-03

A different route to animated characters: the agent drives existing tools instead of modeling from scratch. Generate a reference image, convert it to 3D with Tripo3D, rig it with Make-It-Animatable, and apply Mixamo animations. Source: X/@posi_posi8, 2026-09-01

Meng To open-sourced a Three.js site where towers build themselves under a rising cut plane, with weather and time of day, at 1.38 MB gzipped including models, sounds and textures, plus the skills used (threejs-towers, threejs-weather, threejs-landscape). The point: an open-source foundation makes new themes one prompt each. Source: X/@MengTo, 2026-08-11; Source: MengTo/towers

Opus 5 built a battle-royale mode in Unity with procedural graphics and its own sound in about six hours, from prompts no more specific than "use the best possible practices for game design" plus repeated requests to improve and check for bugs. Source: X/@saturadev, 2026-07-25

A painterly world in one HTML file with millions of grass blades in a wind simulation, all procedural, by Opus 5. Source: X/@minchoi, 2026-07-26

---

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. private page