Broken Image Fallback

Build an image slot that handles a failed load beautifully. Structure: a rounded 16:9 media area with a hairline border on a 6% ink background, and below it a status caption (monospace, muted) on the left and a small pill Retry button on the right. Sequence: on mount the area shows a loading shimmer - a diagonal white streak sweeping left to right (1.1s, linear, repeating). After ~1s the load "fails": the shimmer stops and a broken-image glyph drops in from above with a spring (y from -26px, slight -6deg rotation, stiffness ~320, damping ~18 so it lands with one soft bounce), plus a caption like "hero.jpg didn't load". Status reads "fallback shown". Retry: clicking Retry replays the shimmer for ~1s and then succeeds - a brand-gradient image fades and settles in (opacity 0 -> 1 while scale eases 1.06 -> 1 over 0.5s), with a white badge holding an accent check that springs in at the center. Status reads "recovered" and the button label becomes "Replay" so the whole loop can run again. Details: the drop-in glyph and caption exit with a quick fade+shrink when retrying - no hard cuts. Accessibility: the status caption is aria-live="polite"; decorative layers are aria-hidden. Under prefers-reduced-motion there is no shimmer and states swap instantly. Colors as tokens: paper, ink, one accent (gradient built from the accent family). Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.