Cookie Consent

Create an animated cookie consent banner. A dark ink banner pinned to the bottom of the viewport (inset by 8-16px, rounded, soft shadow) that slides up ~600ms after page load with a gentle bouncy spring (from 74px below and transparent, stiffness 340, damping 22: soft enough to bounce once). Inside: a small accent-colored cookie icon, one short monospace line ('We use cookies to improve Acme.'), and two buttons: 'Essentials only' as a quiet outlined ghost, 'Accept' as a solid accent pill. Choices animate differently: 'Essentials only' slides the banner straight back down (0.25s ease-out). 'Accept' first morphs its own label into a check that pops in with a spring (from 40% scale, stiffness 520, damping 20), holds ~450ms so the confirmation registers, then the banner slides away. Equal-choice rule: both buttons are the same size and read clearly. The decline path must never be hidden or shrunken; the visual difference is weight (outline vs fill), not accessibility. Persist the choice (localStorage or a cookie) so the banner shows only once; in a demo, replay on a trigger. Accessibility: the banner is a labeled region (role="region", aria-label='Cookie consent'), reachable by keyboard as soon as it appears; the accepted state is announced via aria-live="polite". If prefers-reduced-motion is set, fade the banner in and out with no slide or bounce. 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.