The SmoothReveal component creates a smooth reveal animation for its children when they enter the viewport.
This content will smoothly reveal on scroll
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/smooth-reveal.jsonEverything Smooth Reveal accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | The content to be revealed |
| direction | 'up' | 'down' | 'left' | 'right' | 'up' | The direction of the reveal animation |
| delay | number | 0 | Delay before the animation starts (in seconds) |
| duration | number | 0.6 | Duration of the animation (in seconds) |
| distance | number | 50 | Distance of the reveal animation (in pixels) |
| className | string | '' | Additional CSS classes for styling |
| once | boolean | true | Whether to trigger the animation only once |
Required.