Curved Loop

Text 1

About

A draggable, animated curved text component that loops infinitely along a customizable SVG path.

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

Code

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

Usage.tsx

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

export default function DemoOne() {
  return <CurvedLoop
        text={{
          text: "Next.js Curved Text Loop",
          font: {
            fontFamily: "Arial, sans-serif",
            fontWeight: "600",
            fontSize: 72,
            letterSpacing: "2px",
            lineHeight: "1.2em",
          },
          color: "#000000",
          className: "fill-black dark:fill-white",
        }}
        direction="left"
        baseVelocity={80}
        curveAmount={200}
        draggable={true}
        fade={true}
      />;
}