BT-06 Rolling Text

BT-06 Rolling Text

About BT-06 Rolling Text

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