Curved Text Loop
Text flowing seamlessly along a custom curve, which the pointer can drag and flick with momentum.
Text flows continuously along an SVG curve, with copies automatically tiling the whole path to form a seamless loop. It can also be flicked by hand with the pointer, and keeps gliding on momentum after release.
npx shadcn@latest add https://webberui.com/r/curved-text-loop.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<CurvedTextLoop />
Installation
npx shadcn@latest add https://webberui.com/r/curved-text-loop.jsonOr, once registries are configured in components.json, install it as @webberui/curved-text-loop.
Usage
import { CurvedTextLoop } from "@/components/ui/curved-text-loop";
<CurvedTextLoop text="DESIGN IN MOTION" separator=" ✦ " speed={44} />The color comes from the surrounding text color (currentColor), and the size from fontSize (in viewBox coordinates). To swap in a different curve, pass a custom SVG path d to pathD — a circle, for example: pathD="M 320 40 A 90 90 0 1 1 319 40".
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text flowing along the curve |
separator | string | " • " | The separator between segments, repeated along with them |
pathD | string | sine wave | The d of a custom SVG path |
width | number | 640 | viewBox width |
height | number | 260 | viewBox height |
fontSize | number | 34 | Font size (in viewBox coordinates) |
speed | number | 46 | Automatic flow speed (px/second); negative reverses, 0 stops |
draggable | boolean | true | Whether it can be dragged and flicked (with momentum after release) |
showPath | boolean | false | Show the underlying curve as a guide |
textClassName | string | — | Applied to the <text> to control color and weight |
Accessibility
- The SVG carries
role="img"and anaria-label, so what is announced is the complete text, and the repeated visual copies are hidden from assistive technology - When the user has "reduce motion" enabled at the system level, the automatic flow stops and only the user's own dragging remains