Variable axes
One font file changes width and weight continuously, so letters can breathe.
Type that moves. Letters stretch, squash, slide and react to scrolling or the cursor, so words carry rhythm and emotion before anyone reads them.
Open the kit Copy the promptKinetic typography treats letters as moving objects. Variable fonts let one typeface change width and weight smoothly, which turns type itself into animation.
One font file changes width and weight continuously, so letters can breathe.
Staggered delays turn a word into a wave or a beat.
Words fill the screen and act as the main image.
Hover, scroll and cursor position change how the type behaves.
Moving type started in film titles and arrived on the web once browsers learned variable fonts.
Saul Bass designs the opening titles of North by Northwest, with credits sliding along the lines of a building.
Kyle Cooper's scratchy, jittering title sequence for Se7en makes kinetic type famous again.
Font makers announce OpenType variable fonts, where one file holds a whole range of widths and weights.
Browsers start supporting scroll-driven animations, letting type react to scrolling without JavaScript.
Each letter follows the same animation with a small delay. Width, weight and position all change together.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Line-ups and dates pulse like the music they announce.
Studios show their personality with type that reacts to the visitor.
A single animated word can replace a hero image.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Black and white with one acid accent. Motion does the decorating. Tap a swatch to copy its hex value.
:root{
--black: #0D0D0D;
--charcoal: #161616;
--acid-lime: #C6FF00;
--signal-red: #FF3D00;
--white: #F2F2F2;
}A variable display font with width and weight axes, plus a quiet grotesque for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Anybody",system-ui,sans-serif;
--font-b: "Hanken Grotesk",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(53px, 9vw, 125px);
--fs-1: 53.2px; --fs-2: 40.0px;
--fs-3: 30.1px; --fs-4: 22.6px;
--fs-body: 17px; --fs-sm: 12.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 900;
letter-spacing: -.02em;
text-transform: uppercase;
line-height: .9;
}
/* fonts: Anybody (a variable font with width and weight axes) and Hanken Grotesk */Simple full-width bands. Type spans the whole width and the grid stays out of its way.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Pill buttons and soft cards. Shape stays calm so the type can move.
:root {
--radius: 999px;
--radius-sm: 10px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Kinetic Typography kit · Anti-Boring */
:root{
--bg:#0D0D0D;
--surface:#161616;
--surface2:#121212;
--fg:#F2F2F2;
--muted:#A8A8A8;
--accent:#C6FF00;
--accent-fg:#0D0D0D;
--accent2:#FF3D00;
--accent2-fg:#FFFFFF;
--border:#3A3A3A;
--bw:1px;
--radius:999px;
--radius-sm:10px;
--shadow:none;
--shadow-sm:none;
--font-d:"Anybody",system-ui,sans-serif;
--font-b:"Hanken Grotesk",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:900;
--h-track:-.02em;
--h-case:uppercase;
--h-style:normal;
--h-lh:.9;
--gap:24px;
--pad:24px;
--focus:rgba(198,255,0,.45);
--ok:#C6FF00;
--warn:#FFB300;
--danger:#FF3D00;
--info:#8AB4FF;
--field-bg:#161616;
--field-shadow:none;
--media:repeating-linear-gradient(90deg,#C6FF00 0 6px,#0D0D0D 6px 18px);
--code-bg:#000;
--code-fg:#C6FF00;
--btn-case:uppercase;
--btn-track:.08em;
--btn-weight:800;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.8px;
--fs-body:17px;
--fs-4:22.6px;
--fs-3:30.1px;
--fs-2:40.0px;
--fs-1:53.2px;
--fs-d:clamp(53px, 9vw, 125px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{font-family:var(--font-d);font-variation-settings:"wdth" 100;transition:font-variation-settings .25s,transform .12s}
.btn:hover{font-variation-settings:"wdth" 150;transform:none}
.btn-ghost{border-color:var(--fg)}
.card{border-radius:18px}
.card h3,.card h4{transition:font-variation-settings .3s;font-variation-settings:"wdth" 80}
.card:hover h3,.card:hover h4{font-variation-settings:"wdth" 140}
.badge{font-family:var(--font-d);font-variation-settings:"wdth" 60;text-transform:uppercase}
.tab{font-family:var(--font-d);text-transform:uppercase;font-variation-settings:"wdth" 70}
.tab[aria-selected="true"]{font-variation-settings:"wdth" 130}
.table th{font-variation-settings:"wdth" 70;text-transform:uppercase}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F4F4EF;
--surface:#FFFFFF;
--surface2:#E9E9E2;
--fg:#0D0D0D;
--muted:#555;
--border:#0D0D0D;
--accent:#0D0D0D;
--accent-fg:#C6FF00;
--field-bg:#FFFFFF;
--code-bg:#0D0D0D;
--ok:#2E7D32;
--info:#1E4FD8;
}
html.alt .kin span{animation-name:flexalt}@keyframes flexalt{50%{font-variation-settings:"wdth" 150,"wght" 200;color:#FF3D00}}html.alt .tl .yr{color:#FF3D00}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for an electronic music festival in an authentic Kinetic Typography style.
Palette: Black #0D0D0D, Charcoal #161616, Acid lime #C6FF00, Signal red #FF3D00, White #F2F2F2.
Typography: Anybody variable font (width 50 to 150, weight 100 to 900) for all display type in uppercase, Hanken Grotesk for body.
Layout: Full-height hero with one giant word whose letters animate width and weight in a staggered wave, a short intro, two buttons and a scrolling ticker strip below.
Signature details: Black background, white text, acid lime #C6FF00 accent and signal red #FF3D00. Type fills the width. Hover widens button labels using font-variation-settings.
Components: Pill buttons whose text stretches on hover, cards whose titles widen on hover, narrow uppercase badges and tabs.
Motion: Staggered letter waves, width and weight animations, a slow ticker. Everything respects prefers-reduced-motion.
Avoid: animated body text, many colours, stock images, fast flicker, motion without a pause option.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Large moving text can make people feel ill. Respect reduced motion and keep loops slow.
Animate display words only. Body text should never move.
Variable fonts can be large files. Load only the axes you use.
If everything moves all the time, nothing stands out. Animate on purpose.