Browse components
Scroll Velocity
Rows of oversized marquee text that drift on their own and surge or reverse with scroll speed.
Installation
npx shadcn@latest add @glint-ui/scroll-velocityFirst 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-velocity.json
Usage
import { ScrollVelocity } from "@/components/ui/scroll-velocity";
<ScrollVelocity texts={["Scroll faster", "Feel the motion"]} baseVelocity={60} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| texts | string[] | ["Scroll faster","Feel the motion","Built to move"] | One row per string. Rows alternate direction. |
| baseVelocity | number | 60 | Drift speed in px per second while idle. |
| velocityFactor | number | 0.4 | How much scroll speed adds to the drift. |
| skew | boolean | true | Lean rows in the direction of travel. |
| outlineAlternate | boolean | true | Outline every other row. |
| separator | string | "✦" | Glyph between repeats. |
| scrollContainerRef | ReactNode | — | Ref to the scrolling element. Defaults to the window. |
| className | string | — | Extra classes for the root element. |