animations

FadeIn

Animates children with a simple opacity fade on mount or viewport entry.

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

entrancescrollfadeopacityrevealsimple

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to animate
`preset`	`MotionPresetName`	`fadeIn`	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 fade in

Layout

Display: block

Responsive: No

Wraps children in an animated div with opacity transition.

Examples

Basic usage

<FadeIn>
  <img src="/hero.png" alt="Hero" className="w-full" />
</FadeIn>

Delayed reveal

<FadeIn delay={300}>
  <p className="text-neutral-400">Appears after 300ms</p>
</FadeIn>

AI Usage Hint

Use FadeIn for simple opacity reveals without any directional movement. Ideal for overlays, modal content, image reveals, or any element that should appear without sliding. For directional entrance, use FadeUp or SlideIn instead. Wrap in StaggerGroup for cascading effects.

Works Well With

StaggerGroup