Path Marquee

Items that travel without end along a curved arc, or along any path you draw, turning to follow it.

pnpm dlx shadcn@latest add @latheui/path-marquee

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Path Marquee is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes. Size it with className; the path stretches to fill it.

Prop	Type	Default	Description
children* (required)	ReactNode	—	The items. Each child is one item.
label	string	—	Accessible name for the group.
bend	number	0.35	How far the arc rises, as a fraction of the height. Negative bends down.
path	string	—	An SVG path in a 0–1000 box. Overrides the arc.
speed	number	60	Pixels per second along the path.
direction	"forward" \| "backward"	"forward"	Which way items travel.
gap	number	28	Pixels between items along the path.
orient	boolean	true	Turn each item to follow the path.
hover	"pause" \| "slow" \| "none"	"slow"	What a pointer or focus inside does.
fade	boolean	true	Fade items near both ends of the path.

The items are read once, in order. The repeats that fill the path are hidden from assistive tech.
It slows or pauses while the pointer or keyboard focus is inside, so links in it can be used.
With reduced motion it stands still, with the items laid along the path.

Items keep an even spacing along the path whatever its shape, measured along the curve rather than across.
Speed changes ease in over about 180ms, so hovering slows it smoothly rather than stopping dead.

<PathMarquee label="Principles" bend={-0.3} orient={false} direction="backward">{words}</PathMarquee>

API reference

Also accepts native div attributes. Size it with className; the path stretches to fill it.

Prop	Type	Default	Description
children* (required)	ReactNode	—	The items. Each child is one item.
label	string	—	Accessible name for the group.
bend	number	0.35	How far the arc rises, as a fraction of the height. Negative bends down.
path	string	—	An SVG path in a 0–1000 box. Overrides the arc.
speed	number	60	Pixels per second along the path.
direction	"forward" \| "backward"	"forward"	Which way items travel.
gap	number	28	Pixels between items along the path.
orient	boolean	true	Turn each item to follow the path.
hover	"pause" \| "slow" \| "none"	"slow"	What a pointer or focus inside does.
fade	boolean	true	Fade items near both ends of the path.