NIGHT RUN · 2026-06-04
Five visual-craft upgrades, shipped overnight
You asked me to go broad on the visuals while you slept. I researched what actually
separates high-end 2D animation from amateur, then built five new engine capabilities - each one
self-tested, proven on a real clip, and documented. Sound stays parked; this is all picture.
Flagship: five capabilities in one shot
Kinetic spring title + count-up to 14 + camera push-in + warm grade & grain. Built end to end from one JSON scene.
Per-property springs
Arcs + stagger
Motion blur
Color grade + grain
Design tokens
Kinetic type
1 · Per-property easing + springs
Every property (position, scale, opacity, rotation) can now ease on its own curve instead of one
global ease. New real damped-spring physics overshoot past the target then settle with a decaying
tail - the difference between "templated" and "hand-animated".
Spring entrances
Title springs up while fading cleanly; card pops on a spring; the LIVE badge bounces.
2 · Arcs + stagger (the motion vocabulary)
Position tweens can travel a curve instead of a straight line, and groups cascade with
offset delays. Curved, staggered motion is the single most recognizable "pro" tell.
Five cards, curved + cascading
Each card arcs in on an alternating path and lands a beat after the last one.
3 · Motion blur
Fast motion now smears across the shutter like real footage instead of strobing. The engine renders
several sub-frames per output frame and averages them - so moving pixels blur while static pixels stay
razor sharp. Watch the puck: blurred has a clean trail, the title stays crisp either way.
4 · Finishing grade: color + vignette + grain
One pass adds contrast/saturation, a teal-orange split-tone, a vignette to pull the eye in, and film
grain to kill the flat-vector CSS look. This is the cheapest jump from "clean" to "cinematic".
AFTER
Graded + vignette + grain
5 · Design system + kinetic typography
A locked token vocabulary (60-30-10 palette, type scale, spacing, radii, motion presets) so every
scene feels like one brand - the whole token clip below is authored from @tokens, nothing
hand-picked. And text can now reveal word-by-word or letter-by-letter.
Authored from design tokens
Color, type, radius, motion, grade - all referenced by name.
Kinetic typography
Title reveals per word, subtitle per character, staggered.
What the research said separates high-end from amateur
- Easing on every property, with intent - linear is robotic; springs/overshoot give weight. built
- Arcs + stagger + secondary motion - the named pro differentiator. built (arcs+stagger)
- Motion blur on fast moves so nothing strobes. built
- Texture & grade - grain + vignette + color grade de-flatten the look. built
- A locked design system - one palette/type/motion language = one brand. built
- Kinetic typography - staggered word/char reveals. built
- Sound - ~half of perceived quality. parked per your call (video first)
What I'd build next
- Secondary motion - shadows/accents that lag the parent, so motion feels physical.
- More transitions - zoom-punch, glitch cut, and match-cuts that carry an element across scenes.
- Parallax / depth - background, mid, foreground layers moving at different speeds on a camera push.
- Character upgrade - give the blob reactions: squash-on-land, brow raises, a reacting mouth.
- Your first real video - hand me one screenshot + a hook line and I'll cut a full piece end to end.
Every clip here was authored as a validated JSON
scene, checked for pixel collisions, rendered deterministically to MP4, and the frames reviewed by eye
before shipping. Engine self-tests all green. Full write-up lives in the repo: NIGHT_RUN.md, ROADMAP.md,
KNOWLEDGE.md, engine/schema.md.