Motion Showreel trailer · 80 s
The skill's own trailer. One orange dot is redrawn in a new medium every beat (ink, paper, risograph, CRT, collage, glass, clay …), then bursts into a wall of 22 live styles. The synthesized score changes instruments with the medium. |
AFTERGLOW · 19 s · synthwave-neon
Title sequence for a fictional album. The camera drives through neon gates; after the last gate there is half a beat of black, then the chrome title springs up from the horizon on the drop. |
boink · 18 s · soft-3d-toy
A one-take chain reaction (after Honda's "Cog"). Every domino plays a marimba note; the jelly's slam sends a squash wave through the world, and the opening ball lands as the dot of the i. |
LAST STROKE · 30 s · custom "stick ink" style
Trailer for a fictional game where every line you draw becomes real. The single stroke through 40 enemies is followed by the film's only beat of total silence; then the enemies burst into ink and the stroke becomes the title. |
UMBRA · 27 s · cinematic-title
Opening titles for a fictional film about a total eclipse, letterboxed at 2.39:1. A beat of absolute silence, then the last Baily's bead flares into the diamond ring and the title develops inside the moon. The piano is a sampled Salamander grand (tier 2) with synthesized trailer sound design (booms, braam) layered on top. |
What you get for every piece
out/final.mp4 + out/poster.png
brief.md: a reusable structured prompt
index.html / timeline.js / score.mjs: editable source
sh build.sh: rebuild everything, or one segment
qa/: contact sheets, phone-size check, per-shot motion, text-framing marks, waveform and spectrum
Technical checks (all PASS) and an honest review log
|
---
## Core Ideas
- **Picture = a function of time.** The page exposes a deterministic `window.render(t)` (no `Math.random`, timers, rAF or CSS animation). Playwright captures every frame and ffmpeg encodes the MP4. Motion blur (`--subframes`), supersampling (`--dpr`) and film grain (`--grain`) are render flags, not page code.
- **One timeline for picture and sound.** `timeline.js` holds every cut, hit and cue; the page and the score both import it, so hits land on the exact frame.
- **Benchmark first, then three structures.** Before anything is drawn, the agent picks 1–2 reference works (what to learn, what not to copy) and writes down three candidate structures. A reference video can be measured: `inspect.mjs grid` finds its cuts and the beat grid they sit on, `heat` shows where each segment moves. The first idea that comes to mind is usually the style's cliché.
- **A style library that is a starting point, not a menu.** 28 styles, each with fixed rules for look, palette, type, motion, camera grammar, sound palette, native moves and pitfalls. Every style also lists 8–12 recognition signals to pick 2–3 from and spells out its own cliché, so choosing "synthwave" does not mean the same grid-and-sunset every time. Use one, adapt it, mix two, or write your own from the template.
- **Sound gets its own direction.** The brief covers sound too: a reference, groove, harmony, palette and dramatic arc. A list of audio defaults keeps pieces from all ending up with the same song.
- **One checkpoint, then all-out.** The only stop is the style-frame review. If no style was given, the agent offers three deliberately different directions, one key frame each. After that it builds autonomously.
- **Technical acceptance is separate from taste.** Programmatic checks (size, fps, duration, frame count, black frames, loudness, true peak, loop seams, determinism) must all pass. Measured review material sits next to them without blocking anything: per-shot motion with sudden jumps and one-frame flashes, and a text-framing pass (text cut by the frame, overlapping, in the safe zone, too small). The agent's review notes help the user watch faster; they never replace the user's own viewing.
- **Free mode.** Say "go all out" or "surprise me" and the agent keeps only the baseline rules and the technical pipeline. Style, structure and technique are left to the model.
---
## Workflow
```text
0 Environment check (once)
1 Ask once ─────────── max 5 questions; anything inferable is not asked
2 brief.md ─────────── benchmark → format + style → Reel Read → beat grid + shot list + forbidden list
3 Style frames ─────── 🛑 the only checkpoint: style given → 3 frames; no style → 3 directions × 1 frame
4 Build ────────────── timeline → shot by shot → stills → determinism → proxy → master
5 Sound (optional) ─── synthesized / user's track / silent
6 Acceptance ───────── technical checks (must PASS) + review notes for the user
7 Delivery
```
---
## Style Library
28 styles in 8 groups: graphics & type, interface & product, retro & screens, 3D & material, generative & abstract, illustration & comics, handmade, cinematic. A few of them, rendered by the skill:
