Experiments / rendered live in your browser
Motion
lab.
Not everything ships as a film. These are the studio’s desk tests — easing arguments, stagger studies, kinetic swaps — running as CSS in this page. No video tags were harmed.
01 / Easing race
Same 1.4 seconds, three tempers. Expo leaves fast and lands soft — the default for anything premium. Linear is for machines.
02 / Stagger study
Eight identical keyframes, offset 80 ms apart. Stagger is the cheapest way to make a group feel like it has a pulse.
03 / Kinetic swap
One line, four states, a hard-stop easing. The cycle lands on the word you care about — swap the copy, keep the timing.
04 / Clip wipe — hover it
KAON
A clip-path wipe reveals the layer beneath — the same trick drives half the name-outs in the Spline titles.
05 / Letter wave
KAON
Per-letter sine with a 100 ms cascade. Fine for a logo hold; a felony anywhere else.
06 / Slab turn
Rotation in discrete 90° beats with rests — motion that punctuates instead of spins. The asterisk is the studio mark.
House rules
01
Every frame earns its movement.
If a cut or a curve does not carry the story forward, it is decoration. Decoration gets deleted before the render.
02
Easing is argument.
The way something stops says more than the way it starts. I defend bezier curves in boardrooms so you never have to.
03
Motion must survive the client.
Systems ship with templates, tokens and a two-minute training video — not a project file only I can open.