Primitive · CLI
Fade In
The scroll reveal — opacity + rise on the section beat. Optional blur settle.
Preview
npx shadcn@latest add @atroui/fade-inFadeIn
Scroll-reveal motion
Fades and rises as it enters view. Replay to see it again.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/fade-inSource lands in your repo. Installation · Registry
Usage
Use this for any scroll enter. Pass
preview in docs canvases. For landing sections, use earlier trigger defaults (margin="-40px", amount=0.2) or spread fadeInSection. Prefer Stagger when siblings enter in sequence, Line Reveal for headlines.tsx
import { FadeIn } from "@/components/ui/fade-in"
<FadeIn>Content</FadeIn>
{/* Docs preview (skips IntersectionObserver) */}
<FadeIn preview>Content</FadeIn>Delay and travel
delay is seconds (Motion), not ms. Raise y when the block should feel like it climbed farther.
delay · y
Arrives later, from farther
delay is seconds; y is the starting translateY in px.
Section (landing) trigger
Earlier viewport trigger — same motion language, not a second component.
FadeIn · section
Earlier trigger, same motion
Spreading fadeInSection — not a second component.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| y | number | 14 | Starting translateY in px. |
| delay | number | 0 | Delay in seconds. |
| duration | number | 0.45 | Tween duration (easeOutExpo section beat). |
| blur | number | false | false | Opt-in enter blur in px (e.g. SCROLL_REVEAL_BLUR). Off by default. |
| once | boolean | true | Play only the first time it enters view. |
| amount | number | "some" | "all" | 0.15 | How much must be visible to trigger. |
| margin | string | "0px" | Viewport root margin. "-40px" triggers earlier (landing). |
| preview | boolean | false | Animate on mount (docs canvases). |
Fade In