Curved Text Loop

Text 42

About

Interactive SVG curved path text marquee with real-time drag velocity manipulation and infinite loop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Curved Text Loop to your project and fits it to your theme.

Code

How Curved Text Loop is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";
import CurvedLoop from "@/components/ui/curved-text-loop";

export default function CurvedLoopDemo() {
  return (
    <div className="flex min-h-[380px] w-full flex-col items-center justify-center bg-zinc-950 px-4 py-12">
      <div className="w-full max-w-4xl rounded-2xl border border-zinc-800/80 bg-zinc-900/50 p-6 backdrop-blur-xl">
        <CurvedLoop
          marqueeText="CREATIVE UI • 21ST DEV • SHADCN • MOTION • NEXTJS • "
          speed={1.5}
          curveAmount={160}
          direction="left"
          interactive={true}
          className="fill-violet-400 font-extrabold"
        />
        <div className="mt-4 text-center">
          <p className="text-xs text-zinc-500 font-mono">
            Click & drag along the path to manipulate speed and direction in real-time.
          </p>
        </div>
      </div>
    </div>
  );
}