Sort Dropdown

Create a sort dropdown that visibly reorders its list. A pill-shaped trigger ("Sort: Newest" with a sort icon) whose border tints accent while open. Clicking opens a small menu that springs down from the trigger (from 6px above at 97% scale, stiffness 440, damping 30, transform-origin top-left, soft shadow); options are rows with a check icon on the current sort and an accent-tinted background. The payoff: below the dropdown sits the list being sorted. When the user picks a new sort, do not re-render the list abruptly: keep stable keys per item and let each row GLIDE to its new position with an animated layout transition (e.g. Framer Motion's layout prop, spring stiffness 420, damping 32). The reorder animation is what makes the control feel trustworthy. Accessibility: the trigger uses aria-expanded; the menu is a listbox with aria-selected on the active option; close on Escape and outside click. If prefers-reduced-motion is set, open the menu and reorder the list 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.