---
title: "BT-06 Rolling Text — Framer component · Best of Framer"
description: "$2.00 · Framer component · by BENNI TRAN · Text. Refined rolling hover text for Framer"
canonical: "https://framer.elliotli.dev/component/bt-06-rolling-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/BT-06 Rolling Text

# BT-06 Rolling Text

Refined rolling hover text for Framer

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

![BT-06 Rolling Text preview image 1](https://framer.elliotli.dev/og/component/bt-06-rolling-text/c6b85a1fb89ec08d/1600x1200.jpg)

## Summary

Refined rolling hover text for Framer

## Description

## ABOUT THE COMPONENT

Rolling Text is a hover-driven text component for Framer that introduces motion at the character level. Instead of changing the whole label at once, each letter transitions in sequence, creating a subtle rolling effect that feels precise, responsive, and intentional.

It is designed for designers who want interaction detail without adding visual noise. The component works especially well for navigation, call-to-actions, and text-based interface elements where small motion cues can make the experience feel more considered.

Typography stays fully customizable through Framer’s font controls, while the animation can be tuned through presets or manual settings. This makes it easy to move from restrained and elegant to faster and more pronounced, depending on the tone of the site.

## FEATURES

-   Character-based hover animation with vertical movement
    
-   Sequential timing for a more natural interactive rhythm
    
-   Built-in presets for faster setup
    
-   Manual controls for timing, easing, opacity, and movement distance
    
-   Upward/Downward roll direction
    

### CUSTOMIZABLE PROPERTIES

### Content

-   Text | Defines the label shown in the component
    
-   Link | Assigns a destination URL or page
    
-   New Tab | Chooses whether the link opens in a new tab
    

### Typography

-   Font | Controls family, size, weight, spacing, alignment, and more
    
-   Color | Sets the text color
    

### Animation

-   Preset | Select a ready-made motion style or switch to Custom
    
-   Easing | Defines how the motion accelerates and settles
    
-   Reveal Opacity | Sets the opacity of the revealed letter state
    
-   Distance | Controls how far letters travel vertically
    
-   Speed | Sets the animation duration per character
    
-   Stagger | Offsets the start time between characters
    
-   Direction | Switches the movement upward or downward
    

### Style

-   Padding X/Y
    

### WATCH THE DEMO

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

-   All · #9161

## Details

- **Author**: BENNI TRAN
- **Price**: $2.00
- **Published**: 2026-05-05
- **Updated**: 2026-08-14
- **Added**: 2026-04-21
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing