ScrollCurve Text

ScrollCurve Text is an animated curved-band text component that moves smoothly along a customizable arc as the user scrolls. It renders a layered color band (top, text area, and bottom sections) with scroll-linked motion, making it ideal for expressive hero sections and bold brand storytelling.

The component maps scroll progress to horizontal movement across a dynamic SVG Bézier curve, while giving you full control over typography, curve geometry, band structure, and color segmentation. Built with Framer Motion for smooth, high-performance animation.

✨ Features

Curved Text PathText follows a smooth quadratic Bézier curve spanning the full width of the container.

Scroll-Linked MotionHorizontal movement is directly mapped to scroll progress for natural narrative flow.

Multi-Layer Color BandIndependently control:

• Text Area Color

• Top Area Color

• Bottom Area Color

This enables rich, layered band designs instead of a single flat background.Adjustable Curve DepthControl how dramatic or subtle the arc appears.

Custom Band HeightDefine the vertical thickness of the curved band section.

Speed ControlFine-tune how quickly the text moves relative to scroll progress.

Typography ControlsModify text content, font size, and text color directly from properties.

Responsive SVG RenderingAutomatically recalculates curve and layout based on container dimensions.

Lightweight & PerformantClean SVG + motion.textPath implementation. No heavy dependencies or layout hacks.

Perfect For

• Hero sections

• Premium brand websites

• Editorial storytelling layouts

• Portfolio showcase animations

• Full-width section dividers

• Expressive landing page transitions