Hidden Achievement Reveal
A locked secret row lifts its shackle and clears, the placeholder bars fade, and the real name and criterion rise into their place in turn.
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 { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Hidden Achievement Reveal
*
* A secret achievement sits in the list as a locked row with its name
* withheld. When it is earned, the lock's shackle lifts and the lockAbout this pattern
Secret achievements only work if the moment they stop being secret is noticed. This belongs in an achievements list, a profile's trophy case and the summary a game or learning app shows after a session. The row sits in the list from the start with its name withheld, so the reveal happens in place instead of in a pop-up that covers the screen. The lock's shackle lifts a few pixels and the lock fades, the grey placeholder bars clear, and the name, the criterion and the unlock date each rise a short way and fade in, one after another, so the eye reads them in order. The icon tile takes the accent color only as the text arrives. Everything is a short eased tween on position and opacity: there are no springs and no text scales. Under reduced motion the lock and the placeholders fade out and the text fades in without travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
A locked row near the bottom of the list opens and its name, criterion and date rise in one after another.
- Profile page
In the trophy case, a hidden slot lifts its lock and the earned name replaces the grey bars.
Related patterns
- Medal Ribbon PinA pin bar settles across the ribbon top, two straps draw down to the medal, and the disc lands on one soft spring while its star fades in.
- Certificate IssueThe border strokes itself around the sheet, the seal settles on, and the name is written last.
- Checklist CompleteThe remaining items check off one by one, then the card earns a completion band once the last one lands.