Kinetic Type Director
Direct a title's motion in plain words, then export it as CSS and JSON.
Spring Lineup
ease out · duration 600 ms · stagger 50 ms · rise 0.55em · scale 100% · tracking 0% · total 650 ms
Direct the motion
Plan
Say how the line should move, or pick a direction.
You see the plan before anything moves.
History
- Nothing yet. Every direction you apply, cancel or undo is listed here.
Take it with you
CSS keyframes that play exactly what the stage plays, and the same motion as JSON.
/* Kinetic Type Director · "Spring Lineup" · made on ronenaminoff.com/lab/kinetic-type-director/
HTML: <p class="ktd-line"><span class="w">Spring</span> <span class="w">Lineup</span></p> */
.ktd-line .w {
display: inline-block;
animation: ktd-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ktd-line .w:nth-child(2) { animation-delay: 50ms; }
@keyframes ktd-in {
from { transform: translateY(0.55em) scale(1); opacity: 1; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ktd-line .w { animation: none; }
}
{
"tool": "Kinetic Type Director",
"version": 1,
"line": "Spring Lineup",
"unit": "word",
"easing": "cubic-bezier(0.16, 1, 0.3, 1)",
"easingToken": "out",
"totalMs": 650,
"words": [
{
"text": "Spring",
"delayMs": 0,
"durationMs": 600
},
{
"text": "Lineup",
"delayMs": 50,
"durationMs": 600
}
],
"keyframes": [
{
"offset": 0,
"translateYEm": 0.55,
"scale": 1,
"opacity": 1
},
{
"offset": 1,
"translateYEm": 0,
"scale": 1,
"opacity": 1
}
],
"trackingEm": 0,
"glitch": null,
"reducedMotion": "no animation: the line appears in place",
"spec": {
"ease": "out",
"dur": 600,
"stagger": 50,
"rise": 0.55,
"fade": false,
"glitch": false,
"scale": 100,
"tracking": 0
}
}What it does
A title's motion is usually described in words, like “more elegant” or “make it bounce”, and then rebuilt by hand as numbers. The words and the numbers drift apart.
Directions in plain words become a plan you can read: which values change, from what to what. Apply it, undo it, then take the motion with you as CSS keyframes and a JSON spec.
- A plan before anything moves
- Asks before risky motion
- Exports that play the same motion
How to use
- Write your line, or keep the sample.
- Give a direction in words, or pick one. Read the plan, then apply it.
- Undo plays the last change backwards.
- Copy or download the CSS and JSON.
Use it in a project
Paste the CSS into your page and wrap each word in a span, as the comment at the top shows. The JSON holds the same motion per word, for a script or another tool.
What was tested
- Pass Unit: directions to planned changes; refusals with reasons; risky motion asks first; exact undo Node 22, Linux
- Pass Unit: CSS and JSON exports carry the stage motion: distance, scale, stagger, easing, glitch, reduced motion Node 22, Linux
- Pass Browser: plan, apply, approve, refuse, undo, line errors; the exported CSS runs the same animation in the page Chromium (Playwright), 1280px
Limits
- Understands the directions shown in the examples, about a dozen words. It is a small grammar, not a language model.
- Moves whole words, not single letters.
- No After Effects export yet, so nothing is claimed for After Effects.
How I built it
- Built with Claude Code in one cloud session on 9 November 2026.
- It runs on the motion engine of the home page's headline, so the same grammar is tested in two places.
- Tested in Node and in Chromium. Not tested in After Effects.
What didn't work
On the home page, asking for the same direction twice shows a plan that changes nothing. Here the tool says the change is already there, or at its limit, and suggests another direction.