# Motion Achievement Unlock

Learning or fitness app that reveals a badge in a corner toast when the first lesson of the day is done.

- id: `motion-achievement-unlock`
- Page: https://agentic-ui-kit.com/components/motion-achievement-unlock
- Live preview: https://agentic-ui-kit.com/live/component/motion-achievement-unlock

## Install

```bash
agentic-ui add motion-achievement-unlock
npx shadcn@4.17.0 add @agentic-ui/motion-achievement-unlock
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** badge-scale-in, shine-sweep, points-count-up, ring-and-spark-burst, toast-variant, modal-variant, inline-variant, dialog-focus-handling, status-announcement, reveal-on-view, unlock-state-callback, semantic-colour-tokens, shown-without-js, reduced-motion-fallback
- **Intents:** communicate, execute-flow
- **Suits domains:** education, saas, ecommerce, social
- **Interaction:** click, keyboard-navigation, scroll
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Learning or fitness app that reveals a badge in a corner toast when the first lesson of the day is done, Weekly streak or level milestone shown as a modal worth a pause, with a link to the badge collection, Onboarding checklist that reveals an inline badge in the card once every step is complete
- **Avoid when:** Browsing a collection of badges with progress, which is the achievements grid, Billing, healthcare or legal screens, where the delight group never runs, Personalities other than playful, which render the badge statically, Frequent, low-value events, where repeated celebrations become noise
- **Preserve when adapting:** status-or-dialog-semantics-by-variant, modal-focus-in-and-return, final-points-announced-once, transform-and-opacity-only, static-badge-without-motion, work-only-in-view
- **Replace when adapting:** copy, icon, tone, points-format, actions, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion