Fade Stagger
A free staggered text animation for premium section reveals.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
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 on GSAP ScrollTrigger, 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. With prefers-reduced-motion enabled, or with JavaScript unavailable, the content is simply visible with no movement.
Template Empire
Reveals that feel deliberate
Each direct child of the wrapper fades and rises into place in order, so headlines, sublines and calls to action land as one composed beat.
Scroll it into view once and the sequence plays a single time. With reduced motion enabled, everything is simply here.
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">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 and --ease-out-expo, applied through the shared GSAP defaults in lib/gsap.ts), 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.