ScrollCurve Text

ScrollCurve Text is an animated curved-text component that moves smoothly along a custom arc as the user scrolls. Perfect for hero sections, editorial layouts, landing pages, and expressive branding moments.

The component automatically maps scroll progress to horizontal motion, making your text glide across a beautifully drawn SVG curve. Fully responsive, customizable, and built with Framer Motion.

The component automatically maps scroll progress to horizontal motion, making your text glide across a beautifully drawn SVG curve. Fully responsive, customizable, and built with Framer Motion.

✨ Features

• Curved Text Path — Text follows a smooth quadratic Bézier curve across the width.

• Scroll-Linked Animation — Movement is tied to scroll progress for natural storytelling.

• Fully Customizable — Adjust text, font size, color, curve height, and scroll speed.

• Responsive Curve Rendering — Auto-resizes and updates based on container size.

• Motion Path Support — Uses motion.textPath for fluid, high-performance animation.

• Clean, lightweight SVG implementation — No hacks or heavy dependencies.

🎯 Perfect For

• Hero sections

• Premium branded websites

• Editorial layouts

• Portfolio animations

• Full-width expressive text interactions