TITLE: Morphic Icons — nine line glyphs that fold into their opposites
PROMPT: Build a single self-contained HTML page: a 3×3 grid of interactive line-icon tiles on a #101216 ground, overlaid by a fixed layer of two soft radial glows (#7dd3fc at 13% top-left, #f9a8d4 at 10% bottom-right) and a faint 26px grid of rgba(255,255,255,.028) lines. Container max-width 980px, centred. Header row (flex, space-between, wrap): left column with a ui-monospace 11px/.3em uppercase eyebrow "icon set · 09 glyphs · 02 states each" in #7dd3fc, an 800-weight system-ui headline "MORPHICONS" at clamp(32px,7vw,58px) with "ICONS" in #8b95a3, and a 15px #8b95a3 lede; right column with a pill "MORPH ALL" button (transparent, 1px #262b34 border, 12px/.18em uppercase, fills #7dd3fc on hover and lifts −3px) and a monospace counter "N pinned" whose number is #f9a8d4. The grid uses repeat(3,1fr) → repeat(2,1fr) at 760px → 1fr at 430px, gap clamp(10px,1.7vw,18px). Each tile is a square button, aspect-ratio 1, 20px radius, background linear-gradient(158deg,#191d24,#12151a), 1px #262b34 border, containing a corner index number (01–09), a 38–54px inline SVG glyph with 2px round-cap/round-join strokes, and a one-line monospace label that slides vertically to reveal the alternate word. Hover lifts the tile −7px with a cyan border and glow; pinned tiles turn #f9a8d4. The nine icon pairs: play↔pause, plus↔minus, sun↔moon, lock↔unlock, chevron-right↔chevron-down, speaker↔mute-X, eye↔eye-off, download↔upload, check↔cross. Implement the morph in JS, not CSS: every subpath is sampled to exactly 24 points by an arc-length resampler, so state A and state B have identical point counts and can be linearly interpolated; each frame rebuilds the `d` attribute string from lerped coordinates. Shapes are built from helpers (lineA, circleA, arcA, eyeA for a two-arc lens, crescentA which solves the two-circle intersection to carve a filled moon from the sun disc). The morph is driven by requestAnimationFrame with an easeOutBack spring (c1=1.28) over 540ms; a stroke-dashoffset "ink" sweep (pathLength=1) runs on each morph. Tiles enter with a transform-only rise animation staggered by --i*48ms. Footer rule with "equal point counts · spring easing · no dependencies" and "tab to walk the set". All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system fonts only; no external resources; never call createElementNS.
DESCRIPTION: A tiny interaction-design gem: nine monoline icons on dark glass tiles, each pair built from the same number of sampled points so one can flow into the other with no crossfade and no swap. Hovering a tile lifts it and lets the geometry travel — the play triangle folds into two bars, the sun's disc is carved into a crescent while its rays retract onto the moon's inner edge, a plus collapses sideways into a minus. Clicking pins the alternate state in pink; MORPH ALL sends a staggered wave through the grid while a diagonal light sweep crosses the page. Everything is drawn from scratch: no icon font, no sprite, no library.
TECHNIQUES: arc-length resampling so every subpath has exactly 24 points (equal point counts for clean morphs); per-frame `d` attribute interpolation with requestAnimationFrame; easeOutBack spring easing; geometry helpers for circles, arcs, a two-arc lens eye, and a crescent derived from the analytic two-circle intersection; filled-disc → filled-crescent morph where retracted ray subpaths hide under the fill (painted earlier in DOM order); stroke-dashoffset ink sweep using pathLength=1; transform-only staggered entrance animation; CSS custom properties for the entrance delay; translateY label track instead of an opacity crossfade; prefers-reduced-motion collapsing morphs to instant, disabling the sweep and the ink animation.
INTERACTION: Hover a tile (or tab to it) and its icon morphs to the alternate state while the label slides to the alternate word and the stroke turns cyan. Click a tile to pin the alternate state — it stays morphed in pink and the footer counter increments; click again to unpin. MORPH ALL triggers every icon in a 55ms-staggered wave, holds for ~900ms, then releases them all (pinned tiles stay put) while a light sweep crosses the viewport. Tab walks the whole set and focus mirrors hover exactly.