∞ forever components

Swiss Typographic

Baseline Tick

Red vertical bar sweeps pendulum-style across a Swiss baseline grid at 120 BPM; "tempo" and "measure" flash in sync with each beat.

svglight 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

Music, editorial, or typographic hero sections where measured rhythm and graphic precision set the mood. Good ambient background for design portfolios.

When not to

Contexts requiring legible text overlays on the active baseline, or where motion distracts from reading tasks.

Working with an AI agent

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

Change tempo to 1.4s (85 BPM), update the BPM label to "85 BPM", and set accent to electric blue by changing --sw04-red to #0af. 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

  • sweep duration (2.2s in animation)
  • SPAN constant (132, controls sweep width in viewBox units)
  • accent color (--sw04-red: #e8482b)
  • alternating words (tempo / measure text content)
  • baseline grid line y positions
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (CSS @media + JS matchMedia)
  • visibilitychange pause handler
  • svg.style.setProperty for --sw04-span
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • SPAN constant is in viewBox units (not pixels) — rescaling layout requires adjusting grid line coordinates too
  • Word alternation uses CSS steps(1) opacity, so timing drifts slightly if animation duration is changed without matching the delay

swisstypographymetronomependulumbaseline-gridsvgrhythm

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