∞ forever components

Swiss Typographic

Grid System

A 12x12 CSS grid of ink, outline, and red accent blocks that scale in and decompose in staggered rhythm, composing an asymmetric Swiss typographic layout.

cssmedium 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

Brand hero sections, editorial landing pages, or design-portfolio tiles that need a bold geometric identity with Swiss modernist aesthetic.

When not to

Contexts requiring legible overlaid content — the animated blocks compete with reading. Avoid on low-contrast or light backgrounds without restyling CSS variables.

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 --sw01-red to #1a6bff, and slow the block reveal rhythm by changing STEP from 0.62 to 1.0. 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 (--sw01-red)
  • animation cycle duration (9s in sw01-pulse)
  • block reveal rhythm (STEP = 0.62)
  • block layout positions and spans (blocks array)
  • background and ink colors (--sw01-bg, --sw01-ink)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard with static fallback
  • visibilitychange pause/resume handler
  • role=img + aria-label on stage
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • No interaction layer; purely decorative passive display
  • Stagger delays are absolute seconds and may feel slow on 9s+ cycles if STEP is increased

swissgridtypographymodularlayoutgeometriceditorial

More Swiss Typographic components

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