Text Effects

Curved Text Marquee

곡선 경로를 따라 텍스트가 반복되고 드래그로 흐름을 제어할 수 있는 SVG 마키입니다.

Preview

text motion

Curved Text Marquee

curved marquee text

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/curved-loop.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/curved-loop.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/curved-loop.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/curved-loop.json

Code

typescript

Copied

1import { CurvedLoop } from "@/components/curved-loop"23export default function Example() {4  return (5    <CurvedLoop6      marqueeText="React Bits ✦ Curved Loop ✦ "7      speed={3}8      curveAmount={120}9      className="text-5xl font-semibold"10    />11  )12}

Props

Prop	Type	Default	Description
marqueeText	string	""	Text repeated along the curve.
speed	number	2	Loop speed.
curveAmount	number	400	Vertical curve intensity.
direction	"left" \| "right"	"left"	Marquee direction.
interactive	boolean	true	Whether drag controls speed and direction.
colors	readonly string[]	-	Optional SVG gradient colors for the text.
className	string	-	Additional classes merged onto the component.

Reference

ReactBits Curved Text Marquee