FadeIn

Fades and slides content in when it enters the viewport, respecting reduced-motion preferences.

First card

Second card

Third card

Customize

Direction

Duration (ms)600Distance (px)24Stagger (ms)120Play once

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to fade in
`direction`	`'up' \| 'down' \| 'left' \| 'right' \| 'none'`	`'up'`	Direction the element enters from
`delay`	`number`	`0`	Delay in milliseconds
`duration`	`number`	`600`	Animation duration in milliseconds
`distance`	`number`	`24`	Travel distance in pixels
`once`	`boolean`	`true`	Only trigger the first time it enters the viewport
`className`	`string`	—	Extra class name

IntersectionObserver