Components · Learning
LessonComplete
The end-of-lesson moment: a badge, a burst, and a title. One per screen.
Lesson complete
Use it
<LessonComplete title="Lesson complete">
<Button>Next lesson</Button>
</LessonComplete>How it moves
This is the biggest moment in the system. It plays once, when the component is shown.
| Order | What | Role | What moves |
|---|---|---|---|
| 1 | Badge | celebration | Pops from the celebration scale back to 1 |
| 1 | Burst | celebration, sequence | Eight sparks leave the badge edge, travel the celebration distance, and fade. Each starts one stagger after the last |
| 2 | Title | enter | Fades in and rises by the enter distance, growing from the enter scale, two staggers after the badge |
| 3 | Body | enter | The same, four staggers after the badge |
Rules:
- One per screen, and only for finishing something. A single correct answer uses the smaller celebration on the answer itself.
- It plays once. To play it again, show it again.
- The burst has its own reserved space, sized by the celebration distance, so it never covers or pushes the content around it.
- Nothing here loops.
Reduced motion: there is no burst. The celebration scale is 1 and the enter distance is 0, so the badge, title, and body fade in where they stand. This applies both to the reduced personality and to anyone whose device asks for less motion.
Screen readers: the component is a status region, so the title is read out when it appears. The badge and burst are hidden from them.
CSS variables used: --ss-motion-celebration-scale, --ss-motion-celebration-distance, --ss-motion-celebration-duration, --ss-motion-celebration-easing, --ss-motion-celebration-spring, --ss-motion-celebration-spring-duration, --ss-motion-sequence-stagger, --ss-motion-enter-distance, --ss-motion-enter-spring, --ss-motion-enter-spring-duration.