Kinetic Typography

---
name: kinetic-typography
description: Apply the Kinetic Typography visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Kinetic Typography, mentions moving type, animated typography, type in motion, or describes oversized variable-font headlines, infinite marquee strips, scroll-scrubbed text reveals — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Kinetic Typography Design System

Typography as the entire interface: enormous high-contrast monochrome type that moves — marquees ticking past, headlines assembling letter by letter, variable-font weights breathing under the cursor, words scrubbing with scroll. Layout, imagery, and ornament are all replaced by motion applied to letters.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Kinetic Typography.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (moving type, animated typography, type in motion, marquee typography), or describes its traits: oversized variable-font headlines; infinite marquee strips; scroll-scrubbed text reveals; split-letter stagger animation; stark monochrome palette; type as layout.

## Design tokens

### Color palette

- Ink-black canvas: `#0a0a0a` (--color-bg)
- The type itself — near-white, maximal contrast: `#fafafa` (--color-text)
- Small captions, indices, and metadata: `#8a8a8a` (--color-text-muted)
- Single electric spark: one highlighted word, cursor, or hover fill: `#ff4d00` (--color-accent)
- Inverted sections — the palette flips wholesale, never mixes: `#fafafa` (--color-bg-inverse)
- Type on inverted sections: `#0a0a0a` (--color-text-inverse)

### Typography

- Display / headings: Archivo (fallback: Arial Black, sans-serif) (ideal: Monument Extended, premium — use Archivo as the free substitute)
- Body: Space Grotesk (fallback: Helvetica, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.6 ratio, base 16px — computed steps: 16px / 26px / 41px / 66px / 105px / 168px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 900, line-height 0.95, letter-spacing -0.03em, uppercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 32, 64, 96, 160, 240, 320 — Dynamic extremes: headlines bleed off all four edges at 10–20vw sizes, while body content shrinks to narrow columns — the contrast in scale IS the composition.
- Border radius: none 0px — Zero radius everywhere; the letterforms supply all the curves this style needs.
- Border treatment: 1px solid #fafafa — Used sparingly as horizontal rules between marquee strips and to box the occasional index table; most edges are implied by type alignment.

### Shadows

- none: `none` — Everywhere — flatness keeps attention on letterform motion

### Layout

- Max content width: 1920px
- Full-bleed type: headlines sized in vw units (10–20vw) and allowed to clip at viewport edges
- Horizontal marquee strips as section dividers, alternating scroll direction
- Rigid baseline grid for small text against free-scale display type
- Editorial index blocks (numbered lists, 01/02/03) in mono as navigation
- Wholesale black/white section inversions as chapter breaks

### Effects

- Infinite marquee (translateX loop, pausable on hover/focus)
- Split-letter stagger: characters translate/rotate in individually with 20–40ms offsets
- Variable-font axis animation (wght, wdth) on hover and scroll
- Scroll-scrubbed line reveals with clip-path or masked overflow
- Text outline (stroke) state swapping to solid fill on hover

### Motion

- Easing: cubic-bezier(0.76, 0, 0.24, 1); durations 200ms / 500ms / 900ms
- Choreograph, don't decorate: each headline gets ONE entrance behavior, applied consistently
- Marquees drift at reading speed (~60–90px/s), not blur speed
- Split-letter staggers cap at ~40ms per character so words never feel like loading bars
- Scroll-scrubbed animations are position-driven and reversible, never fire-and-forget
- Under prefers-reduced-motion: marquees stop, staggers collapse to simple fades, variable axes freeze at final values

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0a0a;
  --color-text: #fafafa;
  --color-text-muted: #8a8a8a;
  --color-accent: #ff4d00;
  --color-bg-inverse: #fafafa;
  --color-text-inverse: #0a0a0a;
  --radius-none: 0px;
  --border-default: 1px solid #fafafa;
  --font-display: Archivo, "Arial Black", sans-serif;
  --font-body: "Space Grotesk", Helvetica, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 0.95;
  --leading-body: 1.5;
  --tracking-heading: -0.03em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&family=Space+Grotesk:wght@400;500&family=Space+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Type-only bar: wordmark set in the display face left, uppercase mono links right with an animated underline that draws on hover; no icons, no buttons
- **Hero:** A single word or short phrase at 15–20vw in Archivo 900 uppercase, entering via split-letter stagger; one word in accent or outlined; a slow marquee strip of secondary copy beneath
- **Card:** Barely a card: a numbered index row (mono 01–99, title in display face) that on hover swells its variable weight and slides a full-bleed accent underline beneath
- **Button (primary):** Uppercase display-face text with a thick 2px underline; hover fills the text with accent and shifts the underline to full text height behind it — a link acting with button confidence
- **Button (secondary):** Outlined (text-stroke) uppercase text that fills solid on hover; no boxes
- **Form fields:** A bare bottom-border line with oversized 24px+ input text in the body face; the placeholder ticks away letter-by-letter on focus

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The variable-font morph: a viewport-filling headline whose weight (and width axis, when available) animates live — swelling from 400 to 900 under the cursor or on scroll — making the letterforms themselves the interactive material. Spend boldness here; keep everything else quiet.

## Do

- Commit to type as the only visual material — imagery undermines the premise
- Use a true variable font so weight/width motion is smooth, not stepped
- Keep the palette strictly monochrome plus one spark accent
- Pause every marquee on hover and focus so content is actually readable

## Don't

- Don't run more than one motion behavior per element — stacked effects read as chaos
- Never scrub text opacity below legibility mid-viewport; reveals finish fast
- Don't letter-stagger body copy — paragraphs must simply appear
- Avoid decorative fonts that fall apart at 900 weight or huge sizes

## Accessibility notes

- Constant motion is the style's core risk: prefers-reduced-motion must stop marquees, collapse staggers to fades, and freeze variable axes — the reduced version should look confidently static, not broken
- Auto-scrolling marquees violate WCAG 2.2.2 unless they can be paused; wire pause to hover, focus, and a visible control
- Screen readers must receive intact text: animate wrapper spans while keeping the accessible name on the parent (aria-label), never aria-hidden the only copy of a headline
- Very tight leading (0.95) and uppercase-only display text slow reading — keep functional copy in mixed-case Space Grotesk at normal leading

## Reference sites

- Awwwards — kinetic typography collections: https://www.awwwards.com
- v-fonts (variable font index): https://v-fonts.com
- hoverstat.es: https://www.hoverstat.es

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip kinetic-typography.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/kinetic-typography.json

Settings → Capabilities → Skills → Upload skill → kinetic-typography.zip