Components
Every piece, with its motion written down.
16 components. Each has a live demo, the code to use it, and a motion spec that says which role it uses in which state.
Learning
The moments that bring learners back.
AnswerChoiceOne option in a question. It pops when correct and shakes once when wrong.ProgressBarProgress through a lesson. It celebrates once, when it fills.StreakCounterA running count that rolls when it changes. Only a gain is celebrated.LessonCompleteThe end-of-lesson moment: a badge, a burst, and a title. One per screen.HubertThe mascot. He reacts to the lesson: idle, thinking, correct, incorrect, celebrate.
Controls
Everything a learner presses, types, or switches.
ButtonA button. Primary for the main action on a screen, quiet for everything else.IconEighteen icons for learning apps. Each moves once, in its own way, when something happens.InputA text field with a label that never moves. Typing has no motion.CheckboxA checkbox with its label. The mark draws itself.ToggleAn on and off switch for settings that take effect at once.TabsA row of tabs with a marker that slides to the selected one.
Layout
Panels and lists that hold the lesson together.
Messages
Dialogs, toasts, and tips.