Shailendra Kumar

Curve text loop

Text

About

This is curve text loop

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

Code

How Curve text loop is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CurvedLoop } from "@/components/ui/curve-text-loop";

export default function DemoOne() {
  return <CurvedLoop 
  marqueeText="Dream ◆ Build ◆ Launch ◆ Scale ◆ Succeed ◆ Create • Inspire • Transform • Elevate • Shine • Power ✦ Performance ✦ Precision ✦ Progress ✦ Next Level ★ Digital ★ Experience ★ Awaits ★"
  speed={5}
  curveAmount={500}
  direction="right"
  interactive={true}
  className="custom-text-style"
/>
}

More by Shailendra Kumar

View all
  • Map

    Map

    1.8K
  • social card

    social card

    773
  • Animated 3D Card

    Animated 3D Card

    585
  • Date Picker

    Date Picker

    187
  • Animated Button

    Animated Button

    136
  • Kanban

    Kanban

    112
  • switch

    switch

    103
  • 404 page not found

    404 page not found

    91

More in Text

View all
  • Vertical Cut Reveal Characters

    Vertical Cut Reveal Characters

    125
  • Motion Blur Text

    Motion Blur Text

    42
  • Text Reveal

    Text Reveal

    29
  • Shine Border

    Shine Border

    987
  • Text Effect

    Text Effect

    1.7K
  • Rainbow Text Effect

    Rainbow Text Effect

    55
  • Blur Reveal

    Blur Reveal

    344
  • Apple Hello Effect

    Apple Hello Effect

    646