Fade Stagger
A free staggered text animation for premium section reveals.
Fieldhouse Studio
Drawings you can build from
We survey, model and detail every project in-house, so the set that goes out to tender is the set that gets built. No second round of value engineering once the quotes come back.
Twelve houses and four workplaces finished since 2019, every one of them within an hour of the studio in Hebden Bridge.
Customise
Code
<TextFadeStagger>
{/* one child per step of the sequence */}
</TextFadeStagger>Fade Stagger is a free text effect component for Next.js and React that reveals the direct children of a wrapper one after another, each fading in and rising 16 pixels into place. It is built with Motion, styled with Tailwind, and plays once when the wrapper scrolls into view.
The reveal runs at 60 millisecond intervals by default and animates only transform and opacity, so layout never shifts. Each child fades up to its own opacity and keeps its own transform, so a dimmed or rotated child looks the same during the reveal as at rest. With prefers-reduced-motion enabled, or with JavaScript unavailable, the content is simply visible with no movement, and a focusable child stays reachable throughout: focus arriving finishes the reveal at once.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-fade-staggerUsage
import { TextFadeStagger } from "@/components/text-fade-stagger";
export function Example() {
return (
<TextFadeStagger as="section" stagger={0.06} className="space-y-4">
<h2 className="text-4xl font-semibold">Launch faster</h2>
<p className="text-muted-foreground">Every direct child reveals in order.</p>
<a href="#pricing">See pricing</a>
</TextFadeStagger>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Content to reveal. Each direct child is one stagger target. |
| as | ElementType | "div" | Element rendered as the wrapper. |
| stagger | number | 0.06 | Delay between each child's reveal, in seconds. |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Fade Stagger deliberately ships without component-level CSS variables. Its duration and ease follow the library-wide motion tokens (--dur-3, read from the wrapper when the reveal starts, and --ease-out-expo), so it always matches the rest of your motion system. Pace the sequence with the stagger prop:
<TextFadeStagger stagger={0.12}>
{/* slower, more deliberate cadence */}
</TextFadeStagger>Frequently asked questions
- Is Fade Stagger free for commercial use?
- Yes. Fade Stagger is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Fade Stagger respect prefers-reduced-motion?
- Yes. When reduced motion is enabled the animation is skipped entirely and the content renders immediately in its final, fully visible state. The reveal also animates only transform and opacity, so it causes zero layout shift.
- How do I change the speed of the stagger animation?
- Use the stagger prop to set the delay between children in seconds; the default is 0.06. The duration and easing of each reveal come from the shared motion tokens, so they stay consistent with every other component in the library.