ScrollCurve Text

ScrollCurve Text is an animated curved-band text component that moves smoothly along a customizable arc as the user scrolls.

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 Path Text follows a smooth quadratic Bézier curve spanning the full width of the container. Scroll-Linked Motion Horizontal movement is directly mapped to scroll progress for natural narrative flow. Multi-Layer Color Band Independently control: Text Area Color Top Area Color Bottom Area Color This enables rich, layered band designs instead of a single flat background. Adjustable Curve Depth Control how dramatic or subtle the arc appears. Custom Band Height Define the vertical thickness of the curved band section. Speed Control Fine-tune how quickly the text moves relative to scroll progress. Typography Controls Modify text content, font size, and text color directly from properties. Responsive SVG Rendering Automatically recalculates curve and layout based on container dimensions. Lightweight & Performant Clean 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

A fully customizable scroll-linked curve