Reveal
StableMakes new content ease into view, one after another.
Also known as fade in, entrance animation, transition
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
One after another
<Stack gap={2}>
{items.map((t, i) => (
<Reveal key={t} index={i}>{t}</Reveal>
))}
</Stack>Each item appears just after the one before.
When to use it
Eases new content in with a small rise or a fade, so people notice what just appeared. In a group, each item starts a moment after the one before, and the whole group settles quickly.
Made of: Wrapper · Content
Use it for
- A new answer or card that appears once.
- A short list of steps or results that arrive together.
- Small status text such as Saved, using the fade.
Not for
- Text that arrives word by word as it is written: use StreamingReveal.
- Placeholders while content loads: use Skeleton.
- Content that changes every second.
Do and avoid
Your trip is saved
Payment failed
Do
- Use it on content that appears once, such as a new answer or card.
- Keep groups to a few items so the wait stays short.
- Use the fade for small status text.
- Pair it with Stack so the layout does not jump.
Avoid
- Do not animate things that happen all the time.
- Do not wrap content that changes every second.
- Do not delay long lists item by item.
- Do not animate error messages.
On a phone
- It plays the same short fade or rise on a phone, and nothing about it depends on hover.
- With reduced motion turned on in the phone settings, it shows the content with no animation.
Seen in products
- NN/g suggests 200 to 300 milliseconds for bigger changes, and shorter, subtler motion for things that happen often.
- Atlassian says entrances help people follow changes on screen and that motion should start right away.
- web.dev advises animating only movement and fading.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "rise" | "fade" | "rise" | rise is opacity plus 6px of travel. fade is opacity only. |
| index | number | 0 | Position in a group. Delay is index x 40ms, held at the fifth item. |
| as | "div" | "li" | "section" | "article" | "span" | "p" | "div" | Element to render. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- entering
- On first render it rises or fades in, with a small stagger set by index.
- reduced motion
- When the user prefers reduced motion, no animation runs and the content is simply shown.
Tokens
Change one of these and every part that uses it follows.
--dur-base--dur-fast--ease-out
Built in
- When people turn off motion in their system settings, content shows at once with no animation.
- Content is on the page from the start, so screen readers can read it before the animation ends.
- It only fades and moves a few pixels up. Nothing flashes or spins.
What you need to do
- Do not let the animation be the only sign that something changed. If people need to know, say it in words or announce it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide