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.
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.
Hero sections
Premium brand websites
Editorial storytelling layouts
Portfolio showcase animations
Full-width section dividers
Expressive landing page transitions
Arvind Singh
