# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Bold, condensed display face — monumental, architectural |
| **Examples** | Anton, Archivo Black, Druk, Bebas Neue, Space Grotesk Bold |
| **Weight** | 700+ (or variable 100–900 animated for the hero) |
| **Tracking** | -0.02em to 0em (tight — letters touch, form masses) |
| **Size** | `clamp(8rem, 15vw, 18rem)` — monumental, viewport-filling |
| **Transform** | UPPERCASE — lowercase loses the poster's mass |
| **Line Height** | 0.85-0.95 (tight — stacked words overlap and interlock) |

**Why bold condensed:** Condensed faces pack maximum width per letterform, letting text fill the viewport like architecture. A 200px headline of Anton reads as a solid object; the same size in a regular sans reads as a sentence. The type is the layout — it must be structural, not literary.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same family as display, upright and readable — supports, never competes |
| **Examples** | Space Grotesk Regular/Medium, Inter Regular, Archivo Regular |
| **Weight** | 400-500 |
| **Tracking** | 0em-0.02em (standard) |
| **Size** | `clamp(1rem, 1.4vw, 1.375rem)` — 16-22px |
| **Line Height** | 1.4-1.5 (tight-but-readable, matches the dense poster grid) |

**Why a supporting sans:** The body is the calm counterweight to the monumental display. It carries the information the headline shouts. It shares the display family's skeleton so the page stays one voice — but drops the condensation so paragraphs are actually legible at length.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family, light weight, wide tracking |
| **Examples** | Space Grotesk Light, Inter Light, Archivo Light |
| **Weight** | 300 |
| **Tracking** | 0.15em-0.25em (very wide — like technical annotations) |
| **Size** | 10-14px |
| **Transform** | UPPERCASE |

**Usage:** Section indexes ("01 — MOTION"), marquee metadata, credits. These tiny labels create the extreme scale contrast the style is built on — 200px against 12px. They feel like the print production notes on a kinetic poster.

---

## Type Scale

```
Display:  clamp(8rem, 15vw, 18rem)  — monumental, tight, uppercase
Body:     clamp(1rem, 1.4vw, 1.375rem)  — supporting, readable
Micro:    10-14px                    — annotations, wide-tracked
```

The scale is extreme by design — 12px to 288px. The gap between monumental and microscopic IS the energy. There is no middle. If a size lands between body and display, it belongs to the marquee (repeating, 6-12rem, tracked out).

---

## Font Pairing Logic

**Display + one support face:** Never more than two families. Default pairing is one family two roles — Space Grotesk at 300 for micro, 400 for body, 700 for display, weight animated via the variable axis. A condensed display (Anton/Druk) + a clean sans (Inter/Space Grotesk) is the accepted two-family pattern.

**Variable fonts are preferred:** A variable weight axis (100→900) mapped to scroll is the style's signature — static fonts can't achieve the living letterform. Recursive adds weight, width, and slant axes for morphing type.

**Never:** Serif typefaces (too editorial — this is a poster, not a magazine), decorative/handwritten fonts (breaks the mechanical edge), script lettering, or more than two families (the hierarchy collapses into noise).

---

## Kinetic Typography Don'ts

| Don't | Do Instead |
|-------|------------|
| Small display type (under 8rem) | Monumental type, 15vw+ |
| Static headlines | Scroll-driven, animated letterforms |
| Standard line-height (1.2+) | Tight 0.85-0.95 — stacked, interlocking |
| Lowercase display | UPPERCASE, wide micro labels |
| More than 2 families | 1 family, 1 variant, or display + 1 sans |
| Minuscule self-doubting display | Type that fills the viewport and bleeds off edges |

# Color Architecture

## Ground

The ground is near-black — the void against which monumental type shouts. Pure black is forbidden; the ground must carry the same urgency as the type:

```css
--color-ground-dark: #0A0A0A;    /* Near-black — the poster void */
--color-ground-light: #F2F1EC;   /* Warm paper white for light-mode sections */
```

**Why near-black:** #0A0A0A (not pure #000000) lets black letterforms and shadows separate from the background instead of disappearing into it. The ground is not decorative — it is the stage, and it stays out of the type's way.

---

## High-Contrast Duotone Base

```css
--duotone-ink: #0A0A0A;       /* Black — the letterform */
--duotone-paper: #F2F1EC;     /* White — the space between letters */
```

**These are the primary colors.** Kinetic Typography is a duotone system: black type on white, or white type on black. The palette is the contrast — no mid-tones, no gradients, no color where the type needs to be loudest. Motion provides the color's animation; the color itself stays binary and brutal.

**Rule:** If a section has two backgrounds, it alternates — never blends. The cut between black and white sections is a hard edge, like a poster fold.

---

## Single-Accent Systems

When a project demands one color, it replaces one side of the duotone — it does not join it:

```css
--accent-ink: #FF4D00;       /* Signal orange — the loudest available */
--accent-paper: #F2F1EC;     /* White stays, ink swaps to accent */
```

| System | Combination | Vibe |
|--------|-------------|------|
| **Mono-ink** | Accent type on white | Screen-print poster energy |
| **Mono-paper** | White type on accent ground | Hazard-stripe warning |
| **Accent-split** | Black type on accent field, one element inverted | Editorial punch |

**Rule:** One accent color, used for type or for one structural element (a marquee band, a line, a highlight) — never for gradients, never for imagery, never more than 30% of any viewport.

---

## Text

```css
--color-text-on-dark: #F2F1EC;             /* Full-opacity paper on dark ground */
--color-text-on-light: #0A0A0A;            /* Full-opacity ink on light ground */
--color-text-muted: rgba(242, 241, 236, 0.55);  /* Muted, for captions on dark */
--color-text-muted-dark: rgba(10, 10, 10, 0.55); /* Muted, for captions on light */
```

**Why full-opacity text:** Unlike soft styles, Kinetic Typography never whispers. Display type is 100% opaque — translucency reads as weakness at 200px scale. Only micro labels (12px captions) may drop to 55% so the monumental type keeps all contrast.

---

## Marquee & Band Colors

```css
--band-ink: #0A0A0A;         /* Reversed marquee band on light sections */
--band-paper: #F2F1EC;       /* Reversed marquee band on dark sections */
--band-accent: #FF4D00;      /* Accent band — the one loud moment */
```

**Usage:** Horizontal marquees and full-width bands are the palette's third element. A black section shows a white band; a white section shows a black band. The band is the only surface that inverts — it reads as the page's "tape" running behind the type.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Multi-color palettes | High-contrast duotone (black + white, or black/white + one accent) |
| Gradients behind type | Flat, solid grounds — motion creates the depth |
| Pure #000000 background | Near-black #0A0A0A so black type stays visible |
| Gray mid-tones | Jump straight black ↔ white — no steps in between |
| Muted, desaturated text | Full-opacity text (55% max only for 12px captions) |
| Color-coded sections | One accent for emphasis, duotone everywhere else |
| Soft shadows and glows | Hard-edged type, no blur behind letterforms |

# Motion Principles

## Philosophy

Motion in Kinetic Typography **is** the content. The type does not appear and then animate — it exists as animation. Weight, scale, position, and opacity are all mapped to scroll position, so the user scrubs the page like a film reel. Nothing moves without a reason: every transform communicates hierarchy, pacing, or meaning. The page is hyper-kinetic — marquees run continuously, letterforms morph, headlines reconstruct themselves — but always choreographed, never random.

---

## Scroll-Driven Type Weight

| Element | Animation | Scroll Map | Easing |
|---------|-----------|-----------|--------|
| Hero display | Variable font weight 100→900 | Scroll progress 0→100vh | `cubic-bezier(0.22, 1, 0.36, 1)` |
| Hero scale | Type grows `scale(1.0)→scale(1.25)` + fades | Scroll progress 0→100vh | `ease` scrub |
| Section headlines | Opacity 0.2→1.0 + weight 300→700 | Into viewport, scrubbed | `cubic-bezier(0.22, 1, 0.36, 1)` |

```css
/* Hero: weight lifts as the user scrolls */
.film-hero {
  font-variation-settings: 'wght' 300;
  transform: scale(1);
  transition: none; /* driven by scroll, not time */
}
```

**Purpose:** The scroll position IS the animation timeline. A hero at weight 300 and scale 1.0 at the top of the page arrives at weight 900 and scale 1.25 as the user scrolls. This is the signature move — the type responds to the user, not to the clock. Use `useScroll` + `useTransform` (framer-motion) or `gsap` ScrollTrigger with `scrub`.

---

## Horizontal Marquee

```css
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 20s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
```

**Purpose:** Continuous, unbroken horizontal scroll strips. The track duplicates its content and translates -50% for a seamless loop. Tracks run at 15-25s per loop, always `linear` — never ease. Marquee text is 6-12rem wide-tracked uppercase, often inverted (white band on a black section). One marquee per viewport max — two competing strips read as noise.

---

## Split-Text Reveals

| Trigger | Pattern | Stagger | Easing |
|---------|---------|---------|--------|
| Into view | Each word lifts `translateY(24px)→0` + opacity 0→1 | 0.06s-0.1s per word | `cubic-bezier(0.22, 1, 0.36, 1)` |
| Into view | Each character scales `scale(0.7)→1` + opacity | 0.04s per character (headlines only) | `cubic-bezier(0.22, 1, 0.36, 1)` |
| Scramble/decode | Characters resolve random → final over 600ms | Per word, sequenced | `ease-out` |

**Purpose:** Text reveals word-by-word or letter-by-letter with staggered delays — the headline "reassembles" as it enters. Word-level stagger for long copy, character-level cascade for short monumental headlines (under 6 words). Scramble/decode effects make characters land one by one from gibberish — reserved for one statement per page, never all headings.

---

## Scroll-Driven Type Movement (Density & Layout)

| Effect | Specification |
|--------|--------------|
| Pinned sequences | Text pinned while the next line formats beneath (`ScrollTrigger` pin + scrub) |
| Horizontal scroll-hijack | Section slides sideways as the user scrolls vertically |
| Magnetic text | Letters/words track the cursor with spring resistance, snap back on leave |
| Bleed-off type | Headlines scale past viewport edges — type never fully fits the frame |
| Reversed words | One key word flips/inverts as you pass it — a reveal not a decoration |

**The type is the director.** Layout shifts come FROM the type moving — sections are divided by giant words sliding across, not by background changes. Pin sequences with `scrub` so the motion is scrubbable, never a one-shot that plays and forgets. Magnetic text uses spring physics (stiffness ~150, damping ~15) — the letters chase, they do not bounce.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero display | Weight 300→900 + clip-path reveal top-to-bottom | 900ms | `cubic-bezier(0.22, 1, 0.36, 1)` | 0ms |
| Marquee band | Slide in from right `translateX(20%)→0` | 700ms | `ease-out` | 200ms |
| Body text | Opacity 0→1 + `translateY(12px)→0` | 500ms | `ease-out` | 300ms |
| Micro labels | Opacity 0→1, no movement | 400ms | `ease-out` | 500ms |

**Key:** Entrances are fast (400-900ms) and confident — this is a kinetic style, not a slow reveal. The hero never fades in thinly; it wipes or clips open at full weight. Everything after the hero is scroll-driven, so entrance animations belong to the first viewport only.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Marquee | Speed 20s → 8s (or pauses) — the strip imitates attention | — |
| Magnetic type | Letters pull toward cursor, spring snap-back | — |
| Links | Underline sweeps in 300ms left-to-right | — |
| Buttons | Background inverts (ink ↔ paper) in 200ms | Scale 0.96 press |

**Hover states are instant (200-300ms).** This style is mechanical and direct — a hover that takes a second reads as dead. The one exception is scroll-linked motion, which by nature matches the user's scroll speed.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All scroll-driven transforms: disabled, type renders at its settled (end) state — full weight
- Marquee: paused, content shown once in full
- Split-text/stagger reveals: instant, no per-word delay
- Magnetic text: disabled (static)
- Scramble effects: final characters shown immediately
- Entrance animations: instant opacity

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

**Reduced motion must never orphan content.** A marquee that's paused must still show its full text. A scramble that's skipped must still render legible words. The static page — type at heavy weight, full visibility — must be a complete design, not an empty shell.

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Bounce or overshoot easing on text | The signature ban — type lands, it does not ricochet |
| Time-based ambient motion | Every animation must be scroll-driven or interaction-driven |
| Auto-playing carousels | The user scrubs the film, it doesn't play itself |
| Animating imagery over type | Type is the star — imagery sits back or is absent |
| Color/gradient animation | The duotone holds still; only letterforms move |
| Confetti, particles, floating elements | This is typographic choreography, not decoration |
| Two marquees competing | One strip per viewport, at one speed |

# Layout Grammar

## Grid System

**The type is the grid.** Oversized letterforms run edge-to-edge and define the spatial structure — baseline rows, cap-height lines, and descender overhangs replace conventional columns. Internally:

- Full-bleed type: 100vw width, letters bleed past the viewport edge (negative indent on display text)
- Headline scale: monumental, `clamp(4rem, 12vw, 12rem)` and up (120px+) — never small
- Variable font weight: animated across the type-face grid, not per element
- Margins: tight — type dominates, whitespace is a pause, not a frame
- Marquee strips: full-width horizontal tracks running continuously between sections

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Flat high-contrast duotone (single color or B&W) — no imagery |
| Hero | Oversized headline (120px+) that animates on load and responds to scroll |
| Text position | The text IS the hero — full-width, edge-to-edge, no container |
| Animation | Split-text reveal with staggered letter entry, then scroll-driven weight scaling |

```
┌─────────────────────────────────────────┐
│  T H E   W O R D                         │
│  B E C O M E S                          │
│  T H E   S T A G E                     │
│  (letters animate in, one by one)       │
│                                         │
│  [marquee strip runs below]             │
└─────────────────────────────────────────┘
```

**The hero is the headline.** Every pixel of the viewport belongs to the type. Image content is absent — letterforms carry 100% of the visual weight.

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 12vh, 10rem);
--display-type-max: clamp(4rem, 12vw, 12rem);
--marquee-speed: 20s;
--marquee-track-gap: 4rem;
```

**Spacing choreographs the motion.** Sections are separated into clear bands so each animated reveal has its own stage. Moving type needs room — a cramped section collapses the kinetic effect into noise. Whitespace between sections is the "rest" between beats.

---

## Layout Patterns

### Pattern 1: Full-Bleed Type + Marquee
```
┌─────────────────────────────────────────┐
│                                         │
│  W O R D S   A S   A R C H I T E C T U R E
│  (monumental type, edge-to-edge)        │
│                                         │
│  ▓ NEXT ▓ WATCH ▓ MOVE ▓ READ ▓ NEXT ▓  │  ← marquee
└─────────────────────────────────────────┘
```

### Pattern 2: Scrub-Driven Split Text
```
┌──────────────────┬──────────────────────┐
│  W O R T         │  (scrub-controlled)  │
│  H S P L I T     │  words reveal with   │
│  A C R O S S     │  scroll progress     │
│  S C R O L L     │  weight 100→900      │
│                  │                      │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Overlapping Type Layers
```
┌─────────────────────────────────────────┐
│        D E P T H (behind, tate 6%)      │
│    S C A L E   (behind, larger)         │
│  C O N T R A S T  (front, filled)       │
│  (stacked letterforms, mixed opacities) │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full monumental headline, edge-to-edge type, continuous marquees, rich scroll choreography |
| **Tablet (768px)** | Headline scales down (8vw), marquees slow, scroll-driven effects simplified |
| **Mobile (375px)** | Headline at 6rem nesting per word, letter-per-line stacking, marquees halved in speed and pause on reduced-motion |

**On mobile:** One word per line. Split-text effects collapse to word-level rather than letter-level — letter-by-letter animation at 375px is hard to read and can trigger motion sensitivity. The kinetic character survives through scroll-driven weight changes alone.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Contained headline boxes | Full-bleed type that bleeds past viewport edges |
| Small headlines (under 60px) | Monumental display type — 120px+ |
| Image hero sections | Type-only heroes — letterforms carry the weight |
| Card grids | Full-width type bands and marquee strips |
| Bordered containers | No borders — type defines its own edges |
| Dense multi-column text | One choreographed statement per section |
| Center-column alignment | Edge-to-edge type with intentional overhang |

# Texture & Surface

## Primary Texture: The Type Itself

The texture IS the letterforms. Kinetic Typography is a `texture: 1` style — the cleanest on the axis — because motion and monumental type provide all the visual interest. There is no imagery, no grain, no noise, no photographic texture to lean on. The only texture in the frame is typographic:

| Texture Source | Description |
|----------------|-------------|
| **Letterform mass** | Solid 200px letterforms reading as blocks, not characters |
| **Interlocking stacks** | Tight line-height (0.85) makes stacked words collide and overlap |
| **Letter interactions** | Characters overlapping, bleeding off viewport edges, clipped mid-glyph |
| **Marquee motion** | Continuous horizontal strips that act as a scanning pattern |
| **Morphing weight** | Variable font axis animating 100→900 creates a rippling surface |

**The goal:** The page should feel machined — crisp edges, hard cuts, zero analog artifacts. Where a style like grunge uses noise, Kinetic Typography uses the internal construction of the letterform itself. A 15vw "MOVEMENT" in Anton IS the texture.

---

## Typographic Texture Techniques

```css
.type-glyph-texture {
  font-weight: 900;
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  line-height: 0.9;
  font-size: clamp(8rem, 15vw, 18rem);
  background: none; /* flat ink, no fills, no gradients */
}
```

**Purpose:** Texture is generated by arrangement, not decoration:
- **Overlap:** Words stacked with `line-height: 0.85` so descenders/ascenders intersect.
- **Bleed:** Headlines sized wider than the viewport (`translateX(-12%)`) so glyphs are clipped at the frame edge — the letter becomes geometry.
- **Contrast pairs:** A 15rem glyph beside a 12px label — the two textures (mass vs. hairline) define each other.
- **Word repetition:** The same word repeated at descending weights in a stack reads as a gradient made of letters.

---

## Minimal Surface Treatments

The ground stays flat — but two treatments are allowed, and only two:

```css
/* 1. Inverted band — the marquee strip flips the duotone */
.marquee-band {
  background: var(--color-ground-light); /* paper band on dark ground */
  color: var(--color-ground-dark);
}

/* 2. Accent band: one band may carry the single accent color */
.marquee-band--accent {
  background: #FF4D00;
  color: #0A0A0A;
}
```

| Surface | Treatment |
|---------|-----------|
| Ground | Flat duotone: #0A0A0A on dark sections, #F2F1EC on light sections |
| Display type | Flat fill — never gradient, never outlined, never textured |
| Marquee bands | Solid inverted band — the ONE allowed surface element |
| Buttons | Flat ink/paper, hard-edged (0-2px radius), invert on hover |
| Navigation | Small caps text links, no chrome, no background |
| Dividers | Bold horizontal rules (2-4px) — or the gap between stacked words |

**No cards, no panels, no shadows, no glows, no glassmorphism, no noise overlays.** Every surface is a flat, hard-edged rectangle of solid color. Depth comes from type size and motion, never from elevation or blur.

---

## Image Handling

| Approach | Use |
|----------|-----|
| No image | Preferred — pure type composition, zero imagery |
| Indexical stills | Small, duotone-processed (contrast 100%, grayscale), cropped inside giant type, never behind it |
| Full-bleed imagery | Banned — it steals the weight from the letterforms |

If one image is used, it must be converted to strict duotone: `filter: grayscale(1) contrast(1.5)`, sized small (≤ 30% viewport), and placed INSIDE or BESIDE the type, never as a full-bleed backdrop. The moment imagery out-weights type, the style is lost.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| Grain, noise, film scratches | Clean, machined flat surfaces |
| Gradients and glows | Flat ink, hard edges |
| Drop shadows / depth blur | Overlapping letterforms create depth contiguously |
| Card surfaces / panels | Flat ground, type is the only module |
| Background imagery | Pure typographic composition |
| Rounded, soft corners | Hard 0-2px edges — poster geometry |
| Multiple textured bands | One inverted marquee band per viewport |
| Subtle, quiet type | Monumental type is the texture — size it to fill the frame |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `monumental type` | Oversized display faces (120px+) — the hero of the page |
| `kinetic letterforms` | Letters as moving objects, not static glyphs |
| `scroll-driven type scale` | Weight/position mapped to scroll progress |
| `variable font animation` | Animated font axes (weight 100→900) make letterforms breathe |
| `split-text animation` | Text split into units (letters/words) and animated staggered |
| `horizontal marquee` | Continuous scrolling text strip between sections |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `scramble effect` | Characters decode/cycle through random glyphs into the final word |
| `clip-path reveal` | A mask (wipe, iris, slice) uncovers the text as it enters |
| `stagger` | Offset delays between animated units — the heart of choreography |
| `scrub` | Motion driven by scroll position, playable forward and back |
| `pinned sequence` | GSAP ScrollTrigger pins a phrase while its letters animate |
| `letter-spacing ramp` | Tracking that widens/narrows toward the word's apex moment |
| `weight axis` | The variable-font axis (`wght`) — animated live, not static weights |
| `bleed-overhang` | Letters that cross the viewport edge — type as architecture |
| `char-freeze` | Characters locked into place once revealed — rest state |
| `expo-out` | The signature decelerating reveal curve `cubic-bezier(0.16, 1, 0.3, 1)` |

---

## Context Terms

| Term | Mood |
|------|------|
| `interruptible` | Motion that can be stopped/scrubbed, never rail-tracked |
| `type-forward` | Letterforms lead; imagery is secondary or absent |
| `word-level choreography` | One beat per word — meaning drives the motion |
| `at-rest state` | The stable, readable position every animation must settle into |
| `motion budget` | Only a small share of elements may move at once |
| `duotone contrast` | Two-tone B&W/single-color field the type performs on |
| `reduced-motion branch` | The static fallback for `prefers-reduced-motion` |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `static type` | The style IS type in motion — a still hero is unfinished |
| `small headlines` | Monumental scale (120px+) is the entire visual weight |
| `image-dominant layout` | Type is the hero; imagery is secondary or absent |
| `bounce easing on text` | Comic, unresolved — reveals must decelerate, not bounce |
| `gratuitous animation` | Motion without hierarchy or intent is noise |
| `default ease` | `linear` / default bezier reads mechanical, not choreographed |
| `continuous on-screen motion` | Seizure/motion-sickness risk — marquees must scroll away |

---

## Prompt-Ready Phrases

```
"monumental 120px display headline, full-bleed, letters bleed past the viewport"
"split-text reveal — letter-by-letter staggered entry with expo-out ease"
"scroll-driven variable-font weight ramp, 100 to 900, scrubbed to scroll progress"
"horizontal marquee strip running continuously between sections"
"single decorative word tracks cursor on a spring — everything else inert"
"high-contrast duotone field (B&W or one strong color) behind the type"
"word-level choreography — one motion beat per word, meaning drives the movement"
"clip-path reveal with 400ms wipe — body copy moves once, then rests"
"scramble effect on a 2-to-6-word display phrase, then freeze to the final text"
"stagger delays of 60–120ms between animated units"
"custom cubic-bezier easing (0.16, 1, 0.3, 1) — never default or bounce"
"prefers-reduced-motion: static type, no scrub, no scramble, no marquee"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Music & audio brands** | Type in motion is the natural language of rhythm, tempo, and live performance |
| **Motion design studios** | The style showcases exactly what the studio sells — choreographed movement |
| **Film, TV & streaming** | Title sequences and season launches are built on kinetic type |
| **Product launches & keynotes** | Monumental animated headlines turn announcements into events |
| **Creative agencies** | Scroll-driven typography demonstrates craft and capability |
| **Events & festivals** | Marquee strips and pinned sequences match the energy of a live crowd |
| **Personal portfolios (design/motion)** | Type-forward pages prove the designer can direct attention |
| **Fashion (streetwear)** | Condensed display type and high-contrast duotone suit bold street aesthetics |

## Brand Personality Match

This style reinforces brands that are:
- **Dynamic** — movement is the brand's core identity
- **Bold** — unafraid of full-viewport statements
- **Type-forward** — letterforms are the product, not decoration
- **Animated** — energy and motion define the experience
- **Expressive** — emotion carried through choreography, not copy

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B** | Kinetic spectacle undermines the calm, credible tone professional buyers need |
| **Content-heavy sites** | Documentation, blogs, and long-form copy can't survive the type-as-hero layout |
| **E-commerce (catalog)** | Product grids need stable, scannable typography — not motion |
| **Healthcare/finance** | Monumental moving type reads as noise and instability, not trust |
| **Government/legal** | Regulatory content must be legible first; kinetic type fights that |
| **Accessibility-sensitive products** | Motion-heavy type burdens users with vestibular issues, even with reduced-motion support |
| **Brands needing quiet confidence** | The style is a shout; it cannot whisper |
| **SEO-dependent pages** | Oversized animated headlines leave little room for keyword-bearing copy |

## How to Decide

Ask: **"Does my brand want type to be the performer — words that move, split, and carry the entire composition?"**

If yes → Kinetic Typography.
If no → Consider Bold Anti-Corporate Color (if you want loud attitude without the motion), Playful Interactive Maximal (if you want motion plus imagery and color), or Editorial Serif Narrative (if you want expressive typography that stays still and literary).

# Reference Gallery

## Live Sites

### Awwwards Kinetic Typography Winners
- **What works:** Monumental scroll-driven headlines, split-text reveals, variable font weight scrubbing, pinned GSAP sequences
- **URL:** awwwards.com.au (search "kinetic typography" / "big type" trends for current Site of the Day examples)

### Locomotive (locomotive.ca)
- **What works:** Scroll-driven type scale, oversized display faces that grow and shrink with scroll position, pin-and-scrub text sequences
- **URL:** locomotive.ca

### FWA (thefwa.com) Kinetic Type Category
- **What works:** The definitive archive of type-in-motion experiments — marquees, letter-by-letter reveals, scramble/decode effects, magnetic text
- **URL:** thefwa.com (filter awards by "kinetic typography")

### Heresy (heresy.studio)
- **What works:** Editorial-grade kinetic scroll experiences, split-text reveals, type used as architectural scale
- **URL:** heresy.studio

## Key Visual References

### Apple Event Keynote Typography
- **What works:** Massive condensed display type revealing word-by-word, camera-pan pacing, one message per screen. Study the restraint — the reveal timing, not flash.
- **URL:** apple.com/apple-events/

### Spotify Wrapped
- **What works:** Word-level choreography at consumer scale, bold moving statement typography, marquee-style shares built to be screenshotted. The annual campaign is a case study in kinetic type with a general audience.
- **URL:** spotify.com/wrapped (annual)

### Film Title Sequences
- **What works:** Narrative type choreography — the gold standard. Study: Saul Bass (Anatomy of a Murder — type as a jittering character), Kyle Cooper (Seven — hand-scratched letters as scenery), and the Wes Anderson/Annie Atkins French Dispatch title cards (cut-paper letter-by-letter assembly).
- **URL:** artofthetitle.com — the reference archive for credits sequences, searchable by designer

## Key Visual References — DNA Notes

### Color References
- **High-contrast duotone** — near-black #0A0A0A, pure white #FFFFFF, and one single accent. No gradients, no multi-color palettes.
- **Ghost text** — outline-only or 40% opacity type layered behind the primary headline

### Typography References
- **Bold condensed display** — Archivo Black, Anton, Bebas Neue (120px+ / `clamp(4rem, 12vw, 12rem)`)
- **Variable fonts for weight animation** — weight axis 100→900 mapped to scroll
- **Tight leading** — 0.9-0.95, uppercase, aggressive scale contrast between hero and micro-labels

### Motion References
- **Split-text reveal** — letter-by-letter stagger (0.05-0.1s), power3.out
- **Weight scrub** — variable font axis driven by scroll progress, GSAP ScrollTrigger `scrub: 1`
- **Marquee** — continuous translateX loop, 30-60s, linear, infinite; reverse strip for counterpoint
- **Scramble/decode** — character swap, 800-1200ms per phrase
- **Magnetic text** — cursor proximity with spring resistance

## Screenshot Notes

> When capturing references for this style, look for:
> - The type size (must be monumental — 120px+, viewport-filling)
> - The animation technique (split-text, weight scrub, marquee — and note the easing, never bounce)
> - The scroll relationship (pinned sequences, scrub mapping)
> - The palette (must be high-contrast duotone — B&W or one accent, never multi-color)
> - The imagery (must be absent or secondary — type carries the weight)
> - The choreography discipline (one technique per headline, not layering three on one line)
> - The overall mood (must feel dynamic, bold, slightly theatrical — never static)