Drawer Slide

Create a sliding drawer panel. A side panel that slides in from the right (or left) over a dimmed backdrop, with its menu items entering in a small cascade after the panel lands. Opening: backdrop fades in (rgba black ~40%, 200ms); the panel slides from transform: translateX(100%) to 0 over 400ms with cubic-bezier(0.22, 1, 0.36, 1), with a soft shadow on its leading edge (-12px 0 32px at ~12% black). Then the items inside stagger in: each fades and slides 14px from the drawer's direction, 250ms, 60ms apart, starting ~150ms after the panel starts. Closing reverses the panel and backdrop (items can just leave with the panel). Behavior: backdrop click and Escape close it; focus moves into the drawer on open (first focusable), is trapped inside, and returns to the trigger on close; role='dialog'. Prevent body scroll while open. On mobile make it 80-90% width; on desktop a fixed 300-400px. Under prefers-reduced-motion, use plain fades with no sliding or stagger. 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.