Reveal

Fades and slides its children up the first time they scroll into view.

motion

Preview

I fade & slide up on scroll.

Installation

Install the component using the CLI.

npx shadcn@latest add https://yash-sakre.github.io/Yash-Sakre/r/reveal.json

Usage

Import the component:

import { Reveal } from "@/components/ui/reveal";

Use it in your code:

<Reveal delay={0.1}>
  <p>I fade &amp; slide in on scroll.</p>
</Reveal>

Props

Property	Type	Default	Description
delay	number	0	Seconds to delay the fade-up.
children	ReactNode	—	Content to reveal.
...props	HTMLMotionProps<div>	—	Forwarded to the motion.div.