BT-06 Rolling Text

Refined rolling hover text for Framer

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

Refined rolling hover text for Framer