Swiss Typographic

Rotated Headline

Bold headline rotates 90 degrees to snap vertical along a modular grid column while a red accent block slides in to fill negative space.

csslight 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

Swiss/editorial design contexts, typographic hero sections, brand identity demos that need geometric precision and strong grid presence.

When not to

Contexts requiring readable text at all times — headline is unreadable mid-rotation. Avoid on low-contrast or light backgrounds without CSS variable overrides.

Working with an AI agent

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

Change the headline word to 'DESIGN', set --sw07-red to #0057ff (blue accent), and slow the rotation cycle to 10s by editing animation-duration on .sw07-head and .sw07-sq. 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 (--sw07-red)
headline text (.sw07-head content)
animation duration (6.4s on sw07-rot and sw07-sq)
grid column positions (.sw07-v1/.sw07-v2/.sw07-v3 left%)
font size range (clamp 34px,17cqmin,150px)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE visibilitychange pause handler
prefers-reduced-motion guard with static fallback
sw07- namespaced CSS classes (scoped isolation)
role=img aria-label on stage
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Headline is unreadable during mid-rotation — not suitable where text must always be legible
Font size uses cqmin units requiring container-type:size support (no IE/old Safari)

swisstypographyrotationgridheadlineaccentlayout

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.