Kinetic Type

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 15 tokens

--bg oklch(98% 0 0)
--fg oklch(10% 0 0)
--muted oklch(46% 0 0)
--surface oklch(100% 0 0)
--surface-2 oklch(94% 0 0)
--border oklch(82% 0 0)
--accent oklch(10% 0 0)
--accent-fg oklch(98% 0 0)
--focus oklch(55% 0.2 260)

Token	Value
--font-body	`'Barlow Condensed', system-ui, sans-serif`
--font-display	`'Barlow Condensed', system-ui, sans-serif`
--radius	`2px`
--radius-sm	`1px`
--shadow	`2px 2px 0 oklch(10% 0 0)`
--shadow-lg	`4px 4px 0 oklch(10% 0 0)`

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

:root {
	--bg: oklch(98% 0 0);
	--fg: oklch(10% 0 0);
	--muted: oklch(46% 0 0);
	--surface: oklch(100% 0 0);
	--surface-2: oklch(94% 0 0);
	--border: oklch(82% 0 0);
	--accent: oklch(10% 0 0);
	--accent-fg: oklch(98% 0 0);
	--focus: oklch(55% 0.2 260);
	--font-body: 'Barlow Condensed', system-ui, sans-serif;
	--font-display: 'Barlow Condensed', system-ui, sans-serif;
	--radius: 2px;
	--radius-sm: 1px;
	--shadow: 2px 2px 0 oklch(10% 0 0);
	--shadow-lg: 4px 4px 0 oklch(10% 0 0);
}

Where it came from

Origin: Motion graphics, title sequences, MTV and Channel 4 identity

Kinetic typography grew from film title sequences and broadcast identity design. Motion graphics studios in the 1990s pushed type into animation as a standalone art form. On the web, CSS animations and GSAP brought kinetic type to digital products. It is the default mode for big-budget product launch videos and now appears as a micro-interaction pattern in marketing sites.

How to spot it

Type as the primary animated element
Precise timing, easing, and sequencing
Display weight and scale contrast driven by motion
Minimal colour — type is the content

Trade-offs

Strengths	Weaknesses
Exceptional for conveying rhythm and brand personality	Fails completely under prefers-reduced-motion
Makes reading feel active and engaging	Requires careful timing work — hard to rush
Works in small spaces where illustration does not fit	Overused in SaaS hero sections to the point of fatigue

In the wild

Se7en film title sequence (Kyle Cooper)
Apple keynote product video typography
CSS kinetic type experiments on CodePen

Use it when

Hero sections, product launches, or onboarding flows where you want to choreograph attention.