---
title: "ScrollCurve Text — Framer component · Best of Framer"
description: "$1.00 · Framer component · by Arvind Singh · Text. ScrollCurve Text is an animated curved-band text component that moves smoothly along a customizable arc as the user scrolls."
canonical: "https://framer.elliotli.dev/component/scrollcurve-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ScrollCurve Text

# ScrollCurve Text

A fully customizable scroll-linked curve

[View on Framer](https://framer.com/marketplace/components/scrollcurve-text/?via=elliot-li)

![ScrollCurve Text preview image 1](https://framer.elliotli.dev/og/component/scrollcurve-text/81fc3a7a74488c19/1600x1200.jpg)

## Summary

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

## Description

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8y2qa4og-Gu0hjsL3pucNtmyJHLVxq1RmvuR4bJ)

## Perfect For

-   Hero sections
    
-   Premium brand websites
    
-   Editorial storytelling layouts
    
-   Portfolio showcase animations
    
-   Full-width section dividers
    
-   Expressive landing page transitions
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10344

## Details

- **Author**: Arvind Singh
- **Price**: $1.00
- **Published**: 2025-12-18
- **Updated**: 2026-03-02
- **Added**: 2025-12-07
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos