Curved Text Loop: Text Along a Path for React (Free)

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add curved-text-loop.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Flow speed (px/s)speed

Font sizefontSize

Drag to flickdraggable

Show the reference curveshowPath

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<CurvedTextLoop/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/curved-text-loop.en.json

Or, 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 an aria-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

Curved Text Loop