Browse components
Fade Content
Fades and un-blurs its children as they scroll into view, like a lens pulling focus.
Installation
npx shadcn@latest add @glint-ui/fade-contentFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/fade-content.json
Usage
import { FadeContent } from "@/components/ui/fade-content";
<FadeContent blur={12} duration={1000}>
<img src="/photo.jpg" alt="" />
</FadeContent>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to reveal. |
| blur | number | 12 | Starting blur in px. |
| duration | number | 1000 | Duration in ms. |
| delay | number | 0 | Ms to wait once in view. |
| easing | "ease-out" | "ease-in-out" | "ease" | "linear" | "ease-out" | Any CSS timing function. |
| initialOpacity | number | 0 | Starting opacity. |
| threshold | number | 0.2 | Fraction of the element visible before it fades in. |
| once | boolean | true | Fade only the first time it enters view. |
| scrollContainerRef | ReactNode | — | Ref to a scrolling ancestor. Defaults to the viewport. |
| className | string | — | Extra classes for the root element. |