Back Button Animation

Build an animated back button and the two-screen navigation it drives. The button: a pill (about 26px tall) with a left arrow icon and a label, in the accent color on a transparent background. The label is a one-line window (overflow hidden, height = line height) containing two words stacked: "Back" on top and the destination name ("Orders") below. - Hover or focus: the arrow moves 4px left on a spring (stiffness ~520, damping ~22), the word stack slides up one line in 260ms with cubic-bezier(.22,1,.36,1) so "Orders" replaces "Back", and the pill gets an accent background at ~12%. - Press: the arrow goes to 7px left and the pill scales to 0.94 on a spring. - Leaving returns everything to rest. The accessible name is always the full intent: aria-label "Back to Orders"; the visual words are aria-hidden. The navigation: a list screen ("Orders" with rows like "Order #1042 · Sam", each with a chevron) and a detail screen (the back button at top, the order title, and a few lines). Both screens are absolutely positioned in a clipped frame. - Going back: the detail slides out to the right (x to 100%) while the list comes in from x -28% at 60% opacity to 0 and full opacity, 340ms, same easing. The screen on top casts a soft shadow on its left edge. - Opening a row does the exact reverse. Keep track of direction (back or forward) and pass it to both the entering and exiting screen so they move as one stack. Focus: after going back, move focus to the row that was opened; after opening, move focus to the back button. Only do this if focus was already inside the component, so mouse users are not disturbed. Accessibility: real buttons for the back control and the rows, visible focus styles, and meaningful labels ("Open order #1042"). Under prefers-reduced-motion, no arrow lean, no word roll and no slide: the screens swap instantly. Colors as tokens: accent for the button text and its hover tint, surface for screens, hairline for row dividers, muted for secondary text and chevrons. 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.