∞ forever components

Swiss Typographic

Number Grid

5x5 grid of bold tabular numerals counting in a staggered diagonal beat; a red accent sweeps each anti-diagonal in sequence.

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

Data dashboards, typographic hero sections, or ambient displays needing rhythmic numeric motion with a Swiss/Helvetica aesthetic.

When not to

Contexts where large numerals compete with meaningful content, or where rapid modular counting causes confusion.

Working with an AI agent

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

Change STEP from 520 to 300 to speed up the beat, and change --sw08-acc from #e8482b to #00eaff for a cyan accent sweep. 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

  • beat speed (STEP=520)
  • accent color (--sw08-acc)
  • grid size (COLS/ROWS)
  • font size (min(7.2vw,7.2vh))
  • background/ink colors (--sw08-bg, --sw08-ink)
  • pop animation easing (cubic-bezier values)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (drawStatic path)
  • visibilitychange stop/start handlers
  • alternating sw08-a/sw08-b class swap (prevents forced reflow)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Grid size is hardcoded at 5x5; changing COLS/ROWS requires recomputing phase and diag arrays
  • Baseline rule scaleX starts at 0 in CSS but never resets — cells stay lit once activated

swisstypographygridnumbersmodulardiagonalcounter

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.