v2.5.0: Every Genre — CSS 3D Space, Three.js, Real Motion Blur & Device UI

v2.5.0: Every Genre — CSS 3D Space, Three.js, Real Motion Blur & Device UI

Launch-quality motion films, directed and rendered by your coding agent.
Not animated slideshows: one camera traveling through one continuous world, crisp DOM UI, depth-aware 3D, physics-based motion blur, an original synthesized score, and frame-exact MP4 exports.

Version 2.5.0 marks the milestone release of Claude Motion, unifying the complete deterministic DOM + Three.js film runtime, an expanded genre library, real multi-sample motion blur, and automated film review diagnostics.

---

🌟 Highlights & New Capabilities

1. CSS 3D Space & Box Characters (kit.space, kit.box3d, kit.gait)

• Deterministic CSS 3D Space (kit.space): Lay out crisp, high-DPI DOM elements and UI planes under a perspective camera (transform-style: preserve-3d). Supports coordinate projection (sp.project(p) → stage 2D pixel coordinates for pinning floating UI labels) and camera depth queries (sp.depth(p) for depth-of-field focus).
• DOM Box Characters (kit.box3d): Six-sided DOM cubes with automated lighting and shading (top lit, sides shaded), ideal for mascots, product packaging, and hardware blocks.
• Distance-Driven Kinematics (kit.gait): Gait walk cycles driven strictly by distance traveled so feet never slip or slide across surfaces, with natural leg alternation, vertical bob, and sway.
• Kinetic Type Marquees (kit.marquee & .kit-unit): Seamless looping type walls with subpixel transforms and whip-out acceleration; inline .kit-unit icons inside sentences that animate cohesively as single words.

2. Three.js Film Toolkit (kit/three-kit.js)

• Turnkey 3D Viewport (view3d): Preconfigured Three.js 0.180 renderer with studio HDRI room environments, ACESFilmic tone mapping, and soft directional shadows.
• Motion-Tuned Material Library (mat): Physically based materials crafted to read immediately on camera: mat.clay, mat.plastic, mat.chrome, mat.glass (with transmission and low-overhead fallback), mat.glow, and mat.toon.
• Parametric Motion Geometries (shapes): Motion design primitives ready out of the box: puffy beveled stars (shapes.star), torus knots (shapes.knot), ribbon rings (shapes.ring), smooth curves (shapes.tube), glossy branded tokens (shapes.coin), and beveled boxes (shapes.roundedBox).
• Particle Typography & Instanced Fields (textPoints, particles, field): Canvas-sampled vector text points for particles forming words, and instanced matrix grids for animated block/wave fields.

3. Real Multi-Sample Motion Blur (motionBlur)

• Sub-Frame Temporal Blending: Films opt in via motionBlur: { samples, shutter, fast }. Output frames average sub-frames centered on time t with 180° shutter emulation.
• Adaptive Fast-Span Sampling: Whip pans and smash transitions can specify 16–32 samples to create smooth, cinematic motion smears without ghosting artifacts.
• Smart Motion Bypass: Skips sub-frame blending on static spans (< 0.05% pixel change) to accelerate export speeds.
• Full CLI Control: Override blur anytime with --blur <samples>, disable for instant timing passes with --no-blur, or run half-res timing passes with --draft.

4. Turnkey Style Presets (kit/styles/)

• Six ready-made, professionally art-directed aesthetics sharing a unified semantic class vocabulary (.s-words, .s-head, .s-card, .s-window, .s-rule):
  • sketch: Whiteboard aesthetic with hand-drawn marker lines, highlight sweeps, and 12 fps boiling marks (Shantell Sans).
  • bubbles: Glowing glass spheres drifting on deep gradient backdrops.
  • editorial: Annual report elegance with high-contrast serif typography, italic accents, and hairline rules (Instrument Serif).
  • bold: Swiss poster brutalism featuring massive type, strict grids, and flat vermilion/acid geometry (Space Grotesk).
  • midnight: Dark studio ambiance with glowing lamp walls, pixel matrices, and flowing aurora trails.
  • showcase: Calm, product-first SaaS UI staging with soft rounded surfaces and floating product windows.
• Contrast validation utility (scripts/palette.mjs) ensuring WCAG compliance for brand colors.

5. Device UI Frame Kit (kit/ui/devices.js)

• Pre-built, pixel-accurate DOM device frames for fictional product spots:
  • Mobile phone chassis (430×932) with dynamic island, status indicators, and drop shadows.
  • Home screen app grid and dock with squircle icon generator.
  • App Store listing page with verified rating badges and install CTA.
  • Conversational chat/prompt inputs and desktop browser windows.
  • 26 original vector line glyphs (spark, bolt, wave, chart, mic, globe, etc.).

6. Autonomous Film Review & Diagnostics (scripts/doctor.mjs & scripts/review.mjs)

• node scripts/doctor.mjs: Immediate environment preflight verifying Node ≥ 22, Playwright/Chromium, WebGL hardware/software renderers, FFmpeg, and temporary disk staging capacity with actionable fixes.
• node scripts/review.mjs: Heuristic quality gate that analyzes any MP4 or film folder against the "Deck Trap": flags frozen spans, calculates 2-second visual change velocity (calibrated to 14–30% for real films vs 9–12% for static decks), verifies loudness compliance (target −16 LUFS), and outputs timestamped contact sheets.

7. Built-in Offline Synthesizer (scripts/score.mjs)

• Frame-exact algorithmic audio synthesis: 8 melodic instruments (marimba, electric piano, FM bells, warm pads), 13 synthesized percussion sounds, and 13 UI foley elements.
• Precision transition cues: sub-bass drops (impact) and rising sweeps (riser) keyed to visual beat points.

---

🎬 Reference Genre Library

Explore complete reference films with accompanying beat sheets and posters:

• Kinetic Poster (examples/poster/): 12.5 s of scrolling type walls, chrome 3D knot, and particle typography.
• 3D Tabletop (examples/tabletop/): 11 s of UI plates laid out in CSS 3D space with a walking box mascot.
• App Promo (examples/app-promo/): 12.6 s mobile journey from App Store listing to interactive chat prompt.
• Brand Promo (examples/brand-promo/): 14 s high-energy SaaS/fintech promo with glossy 3D coins and tilted dashboards.
• Motion Reel (examples/reel/): 13.6 s sizzle reel with squash-and-stretch physics, morphs, and motion blur.
• Abstract Story (examples/journey/): 22 s wordless narrative of a message crossing the globe.
• Flagship Launch (examples/launch/): 34 s full product film pushing through a live chart into a 3D city.

---

📦 Installation & Getting Started

Install into your AI coding assistant:

# Claude Code (official plugin)
/plugin install motion-films --marketplace TheOnlyFusionCube/claude-motion

# Skills CLI (Codex, OpenCode, Pi, etc.)
npx skills add TheOnlyFusionCube/claude-motion

Verify your rendering environment:

node scripts/doctor.mjs

Scaffold and preview a new film:

# Create a new film on a preset
node scripts/new.mjs my-film --style showcase

# Launch local preview player
node scripts/preview.mjs my-film

# Export broadcast-ready 1080p MP4
node scripts/export.mjs my-film --out my-film.mp4