Browse components
Scroll Expand
A media card that grows from an inset, rounded frame to full-bleed as you scroll, splitting its headline apart.
Installation
npx shadcn@latest add @glint-ui/scroll-expandFirst 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-expand.json
Usage
import { ScrollExpand } from "@/components/ui/scroll-expand";
const box = useRef<HTMLDivElement>(null);
<div ref={box} className="h-[32rem] overflow-y-auto">
<ScrollExpand src="/cover.jpg" title="Into the wild" scrollContainerRef={box}>
<p>Revealed at full size</p>
</ScrollExpand>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL. |
| title | string | "Into the wild" | Headline; its halves slide apart as the media expands. |
| children | ReactNode | — | Content faded in once the media is full-bleed. |
| startInset | number | 24 | Starting inset as a percent of the width. |
| radius | number | 32 | Starting corner radius in px. |
| scrollLength | number | 1.5 | Scroll distance to fully expand, in viewport heights. |
| scrollContainerRef | ReactNode | — | Ref to the element that scrolls. Defaults to the window. |
| className | string | — | Extra classes for the root element. |