Skip to the collection
Trova
Browse Kinetic Typography / Viewport StretcherCompare with another family →

Style sheet · 4 references

Kinetic Typography / Viewport Stretcher

Variable weight and width fonts that physically stretch and compress to fit 100% of the screen width on resize.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Kinetic Typography / Viewport Stretcher (kinetic-viewport-stretcher) */
/* Evidence base: 4 curated reference(s) · Primary contrast 21:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #ffffff;
  --surface-elevated: #262626;
  --text-primary: #000000;
  --accent-primary: #161618;
  --border-hairline: color-mix(in srgb, #000000 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Mono", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Kinetic Typography / Viewport Stretcher — style sheet

> Variable weight and width fonts that physically stretch and compress to fit 100% of the screen width on resize.

Derived from 4 curated reference(s) in the `kinetic-viewport-stretcher` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Archivo — 1/4
- IBM Plex Mono — 1/4
- Monument Extended — 1/4
- Neue Haas Grotesk — 1/4
- SF Mono — 1/4
- SF Pro Display — 1/4
- Space Mono — 1/4
- Whyte Inktrap — 1/4

## Color

- `#000000` dark neutral — 4/4
- `#ffffff` light neutral — 3/4
- `#161618` dark neutral — 1/4
- `#262626` dark neutral — 1/4
- `#3a3a3a` dark neutral — 1/4
- `#e63946` chromatic — 1/4
- `#ff3b30` chromatic — 1/4
- `#ff4d00` chromatic — 1/4
- `#ff9f0a` chromatic — 1/4
- `#30d158` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#000000` / `#ffffff` — 21:1
- `#000000` / `#30d158` — 10.4:1
- `#000000` / `#ff9f0a` — 10.2:1
- `#000000` / `#ff4d00` — 6.3:1

## Moves

### motion/interaction

- Phase-offset sine wave staggering (`delay: calc(var(--line-index) * 45ms)`) turns static multi-line stacked display type into a rhythmic mechanical cylinder. — 133-dia-studio-kinetic-variable-type-identity-system
- Project list rows apply a transient `transform: skewX(calc(var(--scroll-velocity) * -0.18deg))` that snaps back to 0deg with a 280ms cubic-bezier ease the instant scrolling stops. — 135-locomotive-montreal-scroll-driven-velocity-skew
- Container morphs from a compact 126×36px pill to a 360×180px notification card using critically damped spring physics (stiffness: 320, damping: 26) with velocity handoff mid-gesture. — 136-apple-dynamic-island-fluid-svg-path-interpolation

### typography

- Variable font axes (`wdth` 50..150, `wght` 200..900) are driven directly by scroll velocity and pointer X/Y coordinates so the headline stretches edge-to-edge (`100vw`) as a kinetic accordion. — 133-dia-studio-kinetic-variable-type-identity-system
- Display masthead uses `font-size: clamp(4.5rem, 16.5vw, 22rem)` with `line-height: 0.84` and `-0.04em` tracking so the wordmark physically locks to both left and right viewport edges. — 134-studio-freight-darkroom-viewport-locked-oversized-type

### component pattern

- Hovering a full-width project row expands an inline video reel inside the word gap between the client name and the year (`LOCOMOTIVE [REEL] 2026`), pushing the text apart horizontally. — 135-locomotive-montreal-scroll-driven-velocity-skew
- Live waveform bars and countdown timers stay continuously mounted during container expansion, scaling their layout bounds without unmounting or resetting animation frames. — 136-apple-dynamic-island-fluid-svg-path-interpolation

### grid/layout

- Tiny 12px uppercase monospace index coordinates (`[01 // ARCHITECTURE]`) sit pinned at the exact mathematical intersections of the 12-column grid beneath the giant display type. — 134-studio-freight-darkroom-viewport-locked-oversized-type

## References

- 133-dia-studio-kinetic-variable-type-identity-system — DIA Studio — Kinetic Variable Type Identity System (exemplar)
- 134-studio-freight-darkroom-viewport-locked-oversized-type — Studio Freight / Darkroom — Viewport-Locked Oversized Type
- 135-locomotive-montreal-scroll-driven-velocity-skew — Locomotive Montreal — Scroll-Driven Velocity Skew
- 136-apple-dynamic-island-fluid-svg-path-interpolation — Apple Dynamic Island — Fluid SVG Path Interpolation

Type

Loadable Open-Source Stand-Ins

  • Monument Extended (licensed) → Archivo at wdth 125
  • Neue Haas Grotesk (licensed) → Inter
  • SF Mono (macOS only) → JetBrains Mono
  • SF Pro Display (macOS only) → Inter Tight
  • Whyte Inktrap (licensed) → Space Grotesk

Color

Pairs that read

  • Steal this.#000000 on #ffffff · 21:1
  • Steal this.#000000 on #30d158 · 10.4:1
  • Steal this.#000000 on #ff9f0a · 10.2:1
  • Steal this.#000000 on #ff4d00 · 6.3:1

Moves

motion/interaction

typography

component pattern

grid/layout

References