CurveTextSvg

Make Your Text Follow Any Path

Transform ordinary text into captivating, curved typography. The Curved Text SVG component lets you animate text along any SVG path—from simple waves to custom shapes—creating eye-catching headlines, logos, and decorative elements.

Multiple Path Presets

Choose from Circle, Ellipse, Wave, Arc, or Straight-Line presets that automatically adapt to your component's dimensions.

Custom SVG Path Support

Use your own SVG path data for complete creative control. Perfect for brand logos, unique shapes, and custom designs.

Smooth GSAP Animation

Butter-smooth text scrolling powered by GSAP. Seamlessly loops without any visible jumps or stutters.

Full Typography Control

Extended font controls including family, size, weight, letter spacing, and more—all accessible directly in Framer's properties panel.

Visual Effects

Add depth with configurable text shadow, blur effects, and opacity adjustments.

Use Cases

Hero Headlines — Create attention-grabbing curved text for landing page headers

Logo Animations — Animate brand text along custom paths for dynamic logos

Decorative Elements — Add visual interest with text following waves or arcs

Ticker/Marquee — Seamless looping text animation along circular or elliptical paths

Text & Path

- Text: Your content with optional separator (use `•` or emoji for seamless loops)

- Path Shape: Choose from presets or select "Custom" for your own path

- Custom Path: Enter SVG path data (when Custom is selected)

- View Box: Set the coordinate system for custom paths

Typography

- Font: Full font family, size, weight, and letter spacing control

- Color: Text fill color

- Rotation: Rotate the entire text path

Animation

- Animate: Enable/disable animation

- Duration: Speed of text movement (1-60 seconds)

- Reverse: Change animation direction

Effects

- Opacity: Text transparency (0-1)

- Blur: Add blur effect to text

- Shadow Blur: Text shadow intensity

- Shadow Color: Color of the text shadow

Quick Tips

Seamless Loops — Add a separator like `•` or `😁` at the end of your text for smooth continuous animation.

Custom Paths — Generate SVG paths at svg-editor.griffen.codes or export from Figma/Illustrator.

Performance — Keep path complexity reasonable. Simpler paths render faster.

Responsive Design — The component automatically adapts preset paths to fill its container.

Debug Mode — Enable "Show Path" to visualize the path while designing.License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!