TITLE: A Century of Useful Things — Walther Institute exhibition page
PROMPT: Hand-author one self-contained HTML page (no external assets, no occurrence of the substring "http") that reads as the exhibition page of a small design museum. Ground: warm gallery wall #f4f1ea with ink #1d1d1f, brass #b08d57, grey #6b7280 and a deep red accent #8c1c13. Type: Georgia 400 for display (hero title clamp 38px–112px with an italic brass "Useful"), system-ui 500 uppercase letterspaced labels, ui-monospace captions. Structure top to bottom: a fixed frosted top bar with the institution name and a "Plan your visit" pill that scrolls to the footer; a hero with kicker, two-line title, a serif lede, a brass hairline and a mono meta row; a decade timeline rail (1px track, brass fill that scales in on reveal, six circular nodes that act as decade filters); a collection section with a filter row of pills and a responsive auto-fill card grid; a spotlight section pairing a canvas armillary sphere on a clipped trapezoid plinth with curatorial copy and a "drag the object to turn it" hint; and a four-column visiting footer with a fine-print line. Each of the six exhibit cards carries a CSS-drawn catalogue plate: a 4:5 gradient field with a hairline inner frame, a paper-fibre overlay, a mono plate number, and one of six geometric forms (stacked bars, a masked conic arc, a ringed disc, a modular grid, a clipped triangle, a scattered dot field) in a per-card --f colour. Cards lift 9px on hover and a brass underline scales in from the left. Clicking a card opens a dialog sheet that clones the plate's palette and form, shows the title, category, caption, a paragraph of curatorial text and a provenance line, and closes on Escape, backdrop click or the round close button. The armillary canvas is DPR-scaled (canvas.width = cssW * devicePixelRatio, ctx.setTransform) and draws three 48-segment brass rings, six node studs and a shaded core sphere with a perspective projection (p = 1/(1 + z*0.34)), per-segment alpha and width derived from depth; it auto-rotates slowly and can be dragged to spin with inertia. Reveals use IntersectionObserver and move elements with translateY only, never opacity. Respect prefers-reduced-motion by stopping auto-rotation, shortening reveals and using instant scroll.
DESCRIPTION: A calm, curatorial exhibition page that behaves like a well-set catalogue: generous white wall, a single brass accent, and typography that does the work. The hero is pure Georgia with an italic word in brass; below it a timeline rail draws itself across the decades, and the works appear as six catalogue plates — each an abstract geometric study in paper, ink and brass — that lift and underline themselves on hover. The artifact spotlight gives the page its one kinetic moment: a brass armillary sphere on a stone plinth that turns slowly and can be spun by hand. Everything is quiet, spaced and legible, with the interactions reserved for where they add meaning.
TECHNIQUES: IntersectionObserver reveal system using transform-only (translateY 26px to none) with per-element transition delays so nothing is hidden in a frozen render; CSS-drawn catalogue plates with clip-path triangles, mask-based conic arcs, repeating-gradient grids and dot fields; brass underline via transform scaleX with a left origin; 3D armillary sphere rendered on a DPR-scaled canvas with manual rotate-then-perspective projection, per-segment depth shading, gradient core sphere and drag inertia; grid-clipped trapezoid plinth with a radial-gradient floor shadow; frosted fixed header via backdrop-filter; overlay dialog with visibility/opacity state, Escape-to-close, backdrop dismissal and body scroll lock; decade filter that hides cards and keeps the timeline nodes and filter pills in sync; prefers-reduced-motion branch that halts auto-rotation.
INTERACTION: The "Plan your visit" button scrolls smoothly to the visiting footer. Clicking a timeline node or a filter pill filters the grid by decade and updates the "N works on view" caption, with both control sets staying in sync. Hovering a card lifts it 9px, casts a soft shadow and scales a brass underline in from the left. Clicking a card opens the detail sheet with the plate, title, category, caption, curatorial text and provenance; Escape, a backdrop click or the close button dismisses it. Dragging on the armillary sphere rotates it in two axes with momentum when released; otherwise it turns slowly on its own. The page reveals sections and cards as they scroll into view.