∞ forever components

Swiss Typographic

Margin Dance

Swiss typographic grid breathes: margin frame scales, red gutter rule drifts, display word skews, and measure bars pulse — all compositor-only transforms.

cssmedium complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dark-mode editorial heroes, design portfolio headers, or any context needing calm ambient typographic motion with a modernist grid feel.

When not to

Light backgrounds (dark palette hardcoded). Layouts where legible body text is needed — the text is purely decorative.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the accent color from #e8482b to #00aaff, slow the breath cycle by changing the time multiplier from 0.00042 to 0.00025, and update the display word from 'Margin/Dance' to 'Grid/Lock'. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • breath speed (0.00042 multiplier in rAF)
  • accent color (--sw10-red: #e8482b)
  • frame scale swing (b*0.11 and b*0.07)
  • gutter drift amount (b * -3.6 vw)
  • display word text content
  • bar count and stagger phase offsets
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (apply(0.6) static fallback)
  • visibilitychange pause/resume
  • will-change:transform on animated elements
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background and text colors are hardcoded CSS variables — light-theme adaptation requires changing all four root vars
  • Display word uses soft-hyphen; long replacements may need manual shy insertion

swisstypographygridbreathinglayouttransformambient

More Swiss Typographic components

  • Grid SystemA 12x12 CSS grid of ink, outline, and red accent blocks that scale in and decompose in staggered rhythm, composing an asymmetric Swiss typographic layout.
  • Type RampFive-step type scale drifts horizontally and fades in a staggered sine wave on a Swiss baseline grid; red accent rules breathe in opposition.
  • Column FlowThree columns of text-block bars flow in from the left, scale to full justified width, then retract in staggered typographic rhythm with red accent lines.
  • Baseline TickRed vertical bar sweeps pendulum-style across a Swiss baseline grid at 120 BPM; "tempo" and "measure" flash in sync with each beat.
  • Poster BuildSwiss-grid poster assembles itself: ink and red panels wipe/slide into a 12x16 grid while "POSTER BUILD" rises line by line beneath a red rule.
  • Rule LinesSix horizontal bars slide in from alternating edges then pulse slowly. One red accent rule and a vertical axis enforce Swiss typographic restraint.