Fades and slides its children in when they scroll into view. Directional, with delay and replay.
npx shadcn@latest add https://hyperblur.dev/r/fade-in-view.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/fade-in-view.tsx.
import { FadeInView } from "@/components/hyperblur/fade-in-view"
<FadeInView direction="up" delay={0.1}><h2>...</h2></FadeInView>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Content to reveal. |
| direction | "up" | "down" | "left" | "right" | "none" | "up" | Direction the content travels while appearing. |
| distance | number | 24 | Travel distance in pixels. |
| duration | number | 0.7 | Seconds for the transition. |
| delay | number | 0 | Seconds to wait before the reveal starts. |
| once | boolean | true | Reveal only the first time. Set to false to hide and replay on every pass. |
| threshold | number | 0.2 | Share of the element (0 to 1) that must be visible to trigger. |