Banner Alert
An announcement bar that springs down and tucks away on dismiss
Create a dismissible banner alert. A full-width announcement bar at the top of the page (dark ink background, paper text): an icon on the left, one line of message (truncating with ellipsis), and a small round dismiss button on the right. On mount the banner springs down from above (from y: -100%, stiffness 340, damping 30), pushing the page content down naturally (it lives in the layout flow, not fixed over content). Just after it lands (0.35s delay), the icon does a little announcement wiggle (rotate 0 → -12 → 10 → 0 over 500ms). Dismissing slides it back up and out over 250ms with easing cubic-bezier(0.22, 1, 0.36, 1), letting the content below glide back up. Persist the dismissal (e.g. localStorage) so the banner doesn't reappear on every visit. Accessibility: the banner uses role="status" so it's announced; the dismiss button has aria-label "Dismiss banner". If prefers-reduced-motion is set, show and remove it instantly. 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.