Search documentation

Search components and pages

Fade In

Preset-driven entrance reveal on mount or scroll.

Fade in content

Installation

Requires MotionProvider and gsap. Add the fade in component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/fade-in.json

Usage

import { FadeIn } from "@/void/scroll/fade-in"

<FadeIn duration={1.2}>
  <div className="rounded-xl border bg-card p-6">Fade in content</div>
</FadeIn>

Examples

Default

Fade in content

Code

import { FadeIn } from "@/void/scroll/fade-in"

<FadeIn duration={1.2}>
  <div className="rounded-xl border bg-card p-6">Fade in content</div>
</FadeIn>