Star Rating

Create an animated star rating. Five star buttons in a row. Hovering star N fills stars 1..N in a warm orange (fill and stroke change over 150ms ease-out), and the hovered star itself scales up to 1.25 with a spring (stiffness ~500). Clicking selects the rating; the chosen star does a tiny wiggle (rotate keyframes 0, -8, 8, 0). Moving the mouse out of the row reverts the preview to the selected value. State model: track hovered and selected separately; displayed fill = hovered || selected. Accessibility: the row is role='radiogroup', each star a role='radio' button with aria-checked and an aria-label like '3 stars'; arrow keys move the selection. Under prefers-reduced-motion, colors still change but there is no scaling or wiggle. 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.