Offline Indicator

Create an offline indicator. When the connection drops, two things happen together: the page content dims and desaturates (opacity to 45%, filter grayscale, 400ms transition), and a dark pill floats up from the bottom edge with a spring (from 40px below, stiffness 380, damping 28): a wifi-off icon plus "You're offline. Changes saved locally". When the connection returns, the pill swaps (exit down, new one springs up) to a green "Back online, syncing" variant while the content restores to full color; the online pill auto-dismisses after a couple of seconds. Drive it from real connectivity: window online/offline events plus a periodic fetch heartbeat for captive-portal cases. Accessibility: the pill uses role="status" so state changes are announced; the dimmed content stays in the DOM and readable. If prefers-reduced-motion is set, swap states instantly with no float. 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.