∞ forever components

Swiss Typographic

Column Flow

Three 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.

csslight complexitymoderate 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

Editorial or Swiss-style hero sections, typographic portfolio backgrounds, design-system showcase tiles.

When not to

Contexts requiring legible text overlays — the flowing bars compete visually. Avoid where only a static fallback is acceptable.

Working with an AI agent

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

Change the accent color to electric blue by setting --sw03-red to #2b8be8, and slow the rhythm by increasing STEP from 0.42 to 0.65. 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

  • accent color (--sw03-red)
  • rhythm slot step (STEP = 0.42s)
  • animation cycle duration (11s on .sw03-ln)
  • column line kinds (cols array r/s flags)
  • ink and background colors (--sw03-bg, --sw03-ink)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard with settled static frame
  • visibilitychange pause loop
  • sw03- CSS namespace prefix
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Reduced-motion fallback freezes bars at justified state with no animated alternative
  • Bar heights are percentage-based and may mis-proportion on very short viewports

swisstypographygridcolumnsloopeditorialgeometric

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.
  • 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.
  • Rotated HeadlineBold headline rotates 90 degrees to snap vertical along a modular grid column while a red accent block slides in to fill negative space.