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-blog.vercel.app/r/curved-loop.json

bash

Copied

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

bash

Copied

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

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/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

marqueeText

Type: string
Default: ""
Description: Text repeated along the curve.

speed

Type: number
Default: 2
Description: Loop speed.

curveAmount

Type: number
Default: 400
Description: Vertical curve intensity.

direction

Type: "left" | "right"
Default: "left"
Description: Marquee direction.

interactive

Type: boolean
Default: true
Description: Whether drag controls speed and direction.

colors

Type: readonly string[]
Default: -
Description: Optional SVG gradient colors for the text.

className

Type: string
Default: -
Description: Additional classes merged onto the component.

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