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.7K
  • social card

    social card

    731
  • Animated 3D Card

    Animated 3D Card

    543
  • Date Picker

    Date Picker

    167
  • Animated Button

    Animated Button

    131
  • Kanban

    Kanban

    106
  • switch

    switch

    96
  • 404 page not found

    404 page not found

    81

More in Text

View all
  • Vertical Cut Reveal Characters

    Vertical Cut Reveal Characters

    103
  • Text Reveal

    Text Reveal

    313
  • Motion Blur Text

    Motion Blur Text

    34
  • Rainbow Text Effect

    Rainbow Text Effect

    46
  • Blur Reveal

    Blur Reveal

    296
  • Shine Border

    Shine Border

    946
  • NeonRGBTextEffect

    NeonRGBTextEffect

    144
  • Glow

    Glow

    40