∞ 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 motionmobile-ready

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 →
1

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.