An evening of pure CSS

CSSRecital

Six movements, one stylesheet, and a few lines of JavaScript reserved for the encore.

↓
I

Allegro

the turntable — hover state, conic gradients

Hover or focus the turntable — the tonearm lowers itself with nothing but :hover and :focus-within.

II

Adagio

the cassette — state without JavaScript, via :has()

The toggle in the title scene pauses every animation on this page — equalizer, vinyl, reels, stage lights — through a single body:has(#master-toggle:checked) rule.

III

Capriccio

the strings — damped keyframe oscillation

Tab or click a string to pluck it. Each one decays through a hand-tuned multi-step @keyframes curve.

IV

Presto

the stage lights — clip-path, @property, mix-blend-mode

Three animated light cones, swept and recoloured purely in CSS using a registered @property --hue custom property.

V

Largo

the staff — infinite marquee, container queries

VI

Coda

the programme notes — what's actually playing

  1. Custom properties & @property — animatable, type-checked CSS variables drive the title gradient and stage-light hues.
  2. :has() for state — the master pause toggle controls the whole page with zero JavaScript.
  3. clip-path & conic-gradient — the spotlight cones and curtain folds are shaped, not drawn.
  4. Container queries — this programme list re-flows by its own width, not the viewport's.
  5. prefers-reduced-motion — every animation collapses gracefully when requested.
  6. One JavaScript flourish — a transpose button below nudges a CSS hue variable, and an IntersectionObserver reveals each movement on scroll.