Text Ribbon Loop Draggable

ProNew

A phrase that runs around a closed loop and can be nudged by dragging or with the arrow keys.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/text-ribbon-loop-draggable

Prop	Type	Default	Description
`children`	`string`	-	The phrase.
`speed`	`number`	`40`	Resting drift in pixels per second.
`separator`	`string`	`" — "`	Text between repeats.
`className`	`string`	-	Classes for the root element.

Focusable group; Left and Right arrow keys nudge the ribbon, and dragging with a pointer does the same.
The phrase is part of the group's accessible name.
Under prefers-reduced-motion the ribbon does not drift; the arrow keys step it by a fixed distance. The loop pauses off screen.