Component theme

Swiss Typographic

10 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• 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.
• 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.
• Number Grid5x5 grid of bold tabular numerals counting in a staggered diagonal beat; a red accent sweeps each anti-diagonal in sequence.
• Accent ShiftA red accent block migrates through 6 discrete modular positions on a dark 12-column grid while bold Swiss type and an expanding red rule animate in sync.
• Margin DanceSwiss typographic grid breathes: margin frame scales, red gutter rule drifts, display word skews, and measure bars pulse — all compositor-only transforms.