Controls animation, transitions, and cinematic experience design in Mizo Universe. Use when: designing intro sequences, warp transitions, camera motion, planet approach animations, UI enter/exit choreography, Framer Motion patterns, useFrame lerp timing, post-processing mode transitions, loading screen feel, cinematic timing, easing curves, reduced-motion accessibility, or any question about how something should FEEL in the Mizo Universe.
Controls how everything feels in Mizo Universe — timing, motion, transitions, and emotional pacing. This skill designs animation concepts, timing specifications, and integration instructions. It does not replace @Coder — it directs what @Coder implements.
Every animation must answer: "Does this feel like a $2.5M cinematic product?" If not — redesign.
useFrame loops| Principle | Meaning |
|---|
| Cinematic, never flashy | Every motion has purpose — no decorative bounce or gratuitous particles |
| Smooth > Fast | Lerp everything; never snap. Ease-out on arrival, ease-in on departure |
| Spatial UI | Apple Vision Pro-inspired depth: glassmorphism, layered parallax, z-aware motion |
| Minimal | If removing an animation doesn't hurt the experience, remove it |
| Premium | Motion communicates quality — slow reveals, confident transitions, precise timing |
| Accessible | Every animation has a prefers-reduced-motion fallback |
Before any implementation detail, answer:
Produce a specification with:
| Field | Description |
|---|---|
| Name | Descriptive label (e.g., "Planet Approach Warp") |
| Trigger | What starts it (mode change, user action, timer) |
| Duration | Total time in ms |
| Easing | Curve name or formula |
| Layers | Which systems animate (camera, DOF, UI overlay, starfield speed) |
| Reduced-motion fallback | What happens with prefers-reduced-motion: reduce |
| Device tier | Desktop-only, mobile-safe, or adaptive |
Provide @Coder with:
After implementation:
The codebase uses three animation layers. See Animation Systems for full rules.
| Layer | Technology | Domain | Example |
|---|---|---|---|
| 3D render loop | useFrame + THREE.MathUtils.lerp | Camera, planet orbits, starfield, material props | CinematicCameraController, BackgroundStars |
| HTML overlays | Framer Motion (motion, AnimatePresence) | Panel enter/exit, content reveals, page transitions | IntroPortal, planet page overlays |
| CSS transitions | Tailwind + transition-* / animate-* | Simple opacity, color, scale changes | WarpTransition, LoadingScreen |
Rule: Never mix layers for the same element. A 3D object animates in useFrame. An HTML overlay animates with Framer Motion. Never use Framer Motion inside the R3F canvas.
See Timing Catalog for all established animation timings in the codebase.
delta in useFrame; use Framer Motion's time-based spring/tween for HTMLuseFrame lerps + Framer Motion exclusively. Do not introduce GSAPprefers-reduced-motion path (WCAG 2.3.1)new Vector3() or new Color() in animation loops (see universe-builder skill)