animations

FadeUp

Animates children with a fade + upward translate on mount or viewport entry.

v1.0.0react >=18next >=14tailwind >=4motion >=12

entrancescrollfadetranslatereveal

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to animate
`preset`	`MotionPresetName`	`fadeUp`	Motion preset from the token system
`delay`	`number`	`—`	Custom delay in milliseconds
`triggerOnView`	`boolean`	`true`	Animate when element enters viewport
`viewThreshold`	`number`	`0.2`	Fraction of element visible before triggering
`once`	`boolean`	`true`	Only animate once (don't re-trigger on scroll back)
`className`	`string`	`—`	Additional Tailwind classes

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Content to animate with a fade-up entrance

Layout

Display: block

Responsive: No

Wraps children in an animated div. Takes full width of parent by default.

Examples

Basic usage

<FadeUp>
  <h1 className="text-4xl font-bold">Hello World</h1>
</FadeUp>

With custom delay

<FadeUp delay={200}>
  <p className="text-lg text-neutral-400">Appears after 200ms</p>
</FadeUp>

Staggered group

<StaggerGroup stagger="normal">
  <FadeUp><Card title="Feature 1" /></FadeUp>
  <FadeUp><Card title="Feature 2" /></FadeUp>
  <FadeUp><Card title="Feature 3" /></FadeUp>
</StaggerGroup>

Different preset

<FadeUp preset="scaleIn">
  <div className="rounded-xl bg-neutral-900 p-8">Scales in instead of sliding up</div>
</FadeUp>

AI Usage Hint

Use FadeUp to reveal content sections on scroll. Wrap multiple FadeUp components inside a StaggerGroup for cascading entrance effects. Works well for hero text, feature cards, testimonial sections, and any content that should appear as the user scrolls. Supports all motion presets from the token system via the 'preset' prop.

Works Well With

StaggerGroupGradientBackground