Skill Tree Unlock
A locked node blooms open as its connector extends: the line reaches out from the lit parent on an eased tween, the seal scales up on a single spring, and the label only fades in once the node is still.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Skill Tree Unlock
*
* The moment a progression tree grants its next node. A bright
* connector draws from the lit parent to the locked child, the node
* blooms open on the file's only spring, the lock crossfades into theAbout this pattern
The moment a progression tree grants its next node, at home in learning apps, training programs, and game-like habit trackers. The connector is the event, so it moves first: a bright line extends from the lit parent to the locked child as an eased tween, because a line becoming a line is a one-dimensional size change, not a spring. The node itself blooms on the file's only spring, over-damped so it settles once with no wobble, and the lock crossfades into the skill glyph while the bloom is still travelling. The two locked siblings answer on a small opacity pulse, staggered, so the unlock reads as earned by the whole branch. The label never moves and never scales; it only fades in after the node is still. Under reduced motion the order survives and the travel goes: the connector simply appears, the node simply opens, nothing shifts.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
A locked skill node blooms as the connector extends from its parent; the label fades in only after the node is still.
- Onboarding flow
The course map shows the learning path; the next module's node blooms open as its connector extends.
Related patterns
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.
- Challenge CompleteA seal presses onto the finished challenge card and settles a couple of degrees off square.
- Combo MultiplierThe multiplier climbs while answers keep landing, and the charge bar drains toward the break.