---
title: "Scroll Curve Text — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nostromo Studio · Text. About This Component Scroll Curve Text lets you dynamically curve or straighten text based on scroll position, creating expressive…"
canonical: "https://framer.elliotli.dev/component/scroll-curve-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scroll Curve Text

# Scroll Curve Text

Curved Text Animation on Scroll

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

![Scroll Curve Text preview image 1](https://framer.elliotli.dev/og/component/scroll-curve-text/833fbcaf138ca967/1600x1200.jpg)

## Summary

About This Component Scroll Curve Text lets you dynamically curve or straighten text based on scroll position, creating expressive and fluid typography.

## Description

## About This Component

Scroll Curve Text lets you dynamically curve or straighten text based on scroll position, creating expressive and fluid typography.

Perfect for large, full-width headlines, especially in hero sections or footers, the component transforms static text into a living element that reacts to user interaction. Whether you want subtle curvature or dramatic bending, the effect remains smooth and visually engaging.

It works perfectly with Framer [Smooth Scroll](https://framer.university/resources/smooth-scroll-effect-in-framer) for an ultra-fluid visual experience.

[Demo Preview](https://scrollcurvetext-component.framer.website/)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fe9psez7-SEiABdoAKUZS5uGqFWWb2qGpThmHYI)](https://scrollcurvetext-component.framer.website/)

## Usage Notes

Best used with short text (single words or short phrases) for optimal performance. Multi-word text will not wrap to new lines and may overflow the container when Font Fit is disabled.

Make sure any parent Stack wrapping this component is set to **Overflow Visible**, so the curved text won’t be clipped.

## Key Features

Fine-tune text curvature and control how it responds to scroll.

### Text & Styling

-   Define any text content (single word or full sentence)
    
-   Set text color or use a two-color gradient
    
-   Full typography control (font, size, line-height, etc.)
    
-   Enable Font Fit for fluid/responsive text that fills the component width (overrides font size; requires component width set to Fill)
    
-   Choose semantic HTML tag (h1–h6, p, span) for accessibility and SEO
    

### Curvature Controls

-   Rotation controls individual letter rotation
    
-   Depth defines the curvature intensity (arc depth)
    
-   Spread adjusts spacing between letters
    
-   Scale allows zooming in or out of the text
    
-   Distribution controls how the effect is applied across the text (center vs edges)
    
-   Letter Origin defines the pivot point for letter transformations (bottom, center, or top of each letter)
    

### Scroll Behavior

-   Start from straight or from curved state
    
-   Preview lets you visualize the before or after state directly in the canvas
    
-   Start controls when the animation begins (% of viewport height)
    
-   End controls when the animation completes (% of viewport height)
    
-   Works like scroll-trigger systems for precise control over animation timing
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fe9psez7-FxYiSvXNEGsY41dP843PPSguiy0MWh)

## How to Set Up

1.  Drag Scroll Curve Text onto your canvas
    
2.  Add your text and adjust typography
    
3.  Configure curvature settings (rotation, depth, spread, etc.)
    
4.  Set scroll behavior (effect, start, end)
    
5.  Publish
    

## Refund Policy

All sales of digital products are final and non-refundable.

If you have any questions about the product, please contact me at [pierrevion90@gmail.com](mailto:pierrevion90@gmail.com) before completing your purchase. I’m happy to help.Enjoy!

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

-   All · #10471

## Details

- **Author**: Nostromo Studio
- **Price**: $10.00
- **Published**: 2026-04-30
- **Updated**: 2026-04-29
- **Added**: 2026-04-17
- **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