Browse components
Scroll Float
Characters stretch, rise and fade into place one after another, scrubbed by scroll position inside any scroll container.
Installation
npx shadcn@latest add @glint-ui/scroll-floatFirst 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-float.json
Usage
import { ScrollFloat } from "@/components/ui/scroll-float";
const scroller = useRef<HTMLDivElement>(null);
<div ref={scroller} className="h-96 overflow-y-auto">
<div className="h-80" />
<ScrollFloat text="Scroll to float" scrollContainerRef={scroller} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Scroll to float" | Text to animate. |
| start | number | 0.95 | Animation starts when the text top reaches this fraction of the viewport height. |
| end | number | 0.45 | Every character has landed at this fraction of the viewport height. |
| stagger | number | 0.04 | Progress offset between consecutive characters. |
| scrollContainerRef | ReactNode | — | Ref to the scrolling element. Defaults to the window. |
| as | "h1" | "h2" | "h3" | "p" | "div" | "h2" | Element to render. |
| className | string | — | Extra classes for the root element. |