Browse components
Scroll Reveal
A paragraph whose words sharpen from dim and blurred to crisp as it scrolls through view.
Installation
npx shadcn@latest add @glint-ui/scroll-revealFirst 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/scroll-reveal.json
Usage
import { ScrollReveal } from "@/components/ui/scroll-reveal";
const box = useRef<HTMLDivElement>(null);
<div ref={box} className="h-96 overflow-y-auto">
<ScrollReveal scrollContainerRef={box} text="Good motion is a quiet language..." />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Good motion is a quiet language. Every fade and every shift in focus tells the reader where to look next, and when it is done right nobody notices the craft, only the clarity." | Paragraph to reveal. |
| baseOpacity | number | 0.12 | Opacity of words not revealed yet. |
| blur | number | 8 | Blur of unrevealed words, in px. |
| softness | number | 6 | How many words transition at once. |
| rotation | number | 3 | Starting tilt in degrees, settles to 0. |
| scrollContainerRef | ReactNode | — | Ref to the scrolling element. Defaults to the window. |
| as | "p" | "h2" | "h3" | "div" | "p" | Element to render. |
| className | string | — | Extra classes for the root element. |