Components · Learning

AnswerChoice

One option in a question. It pops when correct and shakes once when wrong.

Try itChange the motion setting at the top to feel each personality.

An exit should be

Every state

Use it

<AnswerChoice state="correct" onClick={pick}>
  Quicker than the enter
</AnswerChoice>

How it moves

When	Role	What moves
Pointer moves over or away, while idle	state-change	Background color changes
Pressed down, released	feedback	Scales to the role's scale and back
Becomes selected	state-change	Background color changes
Becomes correct	state-change, then celebration	Colors change, and the choice pops from the celebration scale back to 1
Becomes incorrect	state-change, then attention	Colors change, and the choice shakes once across the attention distance
Result mark appears	enter	The check or cross fades in and rises by the enter distance, growing from the enter scale
Returns to idle	state-change	Colors change back. Nothing else moves

Rules:

One focus at a time: only the chosen option celebrates or shakes. The other options stay still.
The shake runs once. Attention never loops.
Only an idle choice shows hover. A disabled choice does not respond at all.
The celebration belongs to this one choice. A finished lesson is a separate, bigger moment.
The result is never shown by color alone. A check or cross appears, and screen readers hear "Correct" or "Not quite".

Reduced motion: the celebration scale is 1 and the attention and enter distances are 0, so nothing moves. The colors still change and the mark still fades in.

CSS variables used: --ss-motion-feedback-*, --ss-motion-state-change-duration, --ss-motion-state-change-easing, --ss-motion-celebration-scale, --ss-motion-celebration-spring, --ss-motion-celebration-spring-duration, --ss-motion-attention-distance, --ss-motion-attention-duration, --ss-motion-attention-easing, --ss-motion-enter-distance, --ss-motion-enter-spring, --ss-motion-enter-spring-duration.

The check or x is the Icon component, so it draws itself as it appears (Icon motion: draw). Under reduced motion it appears complete.