Browse components
Curved Loop
An endless marquee flowing along a curved path. Grab it to scrub, and flick to send it the other way.
Installation
npx shadcn@latest add @glint-ui/curved-loopFirst 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/curved-loop.json
Usage
import { CurvedLoop } from "@/components/ui/curved-loop";
<CurvedLoop text="Glint ✦ Motion ✦ Components ✦ " curveAmount={300} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Glint ✦ Motion ✦ Components ✦ " | Text to loop. End with a separator for a seamless join. |
| speed | number | 2 | Scroll speed in px per frame. |
| curveAmount | number | 300 | Depth of the curve; negative bends upward. |
| direction | "left" | "right" | "left" | Initial scroll direction. |
| interactive | boolean | true | Drag to scrub and flick to change direction. |
| className | string | — | Extra classes for the root element. |