Skip to content

component

Text Velocities

By Aidan Looker

Details

Summary

Animated text rotator with motion.

Description

What is Text Velocity? Text Velocity is a premium animated text component that cycles through a configurable list of words with choreographed per-character motion. Each character enters with a staggered slide-up, blur-dissolve, and glow flare, while an animated cursor punctuates the end of each word. The rotating section maintains a fixed width to prevent layout shift, keeping your headline stable and polished. Ideal for hero sections, value propositions, and feature highlights — drop it in, add your words, and publish. Core Features Staggered per-character animation with slide, blur-dissolve, and glow overshoot on entry Animated blinking cursor that enters and exits in sync with each rotating word Six curated colour themes (Ocean, Ember, Frost, Aurora, Neon, Mono) plus full custom colour control Zero layout shift — the rotating section locks to the widest word so your prefix text never moves Viewport-gated animation engine that only runs when visible, preserving scroll performance Four interactive hover effects (None, Glow, Lift, Scale) with smooth transitions Controls inside Framer Text Prefix — static text before the rotating word Rotating Words — array of words that cycle (up to 20) Font — family and weight Font Size — 16px to 200px with stepper Letter Spacing — fine-tune character spacing Line Height — vertical rhythm control Alignment — Left, Center, Right (segmented control) Uppercase — transform all text Theme Theme — six curated presets or Custom Prefix Color — visible when Theme is Custom Rotating Text Color — visible when Theme is Custom Accent Color — cursor and glow colour, visible when Theme is Custom Animation Stagger — delay between each character (0.01s to 0.15s) Duration — animation time per character (0.1s to 1s) Hold — how long each word stays visible (0.5s to 15s) Effects Glow — toggle colour glow around rotating text Glow Intensity — radius of the glow effect (2px to 30px) Cursor — show or hide the blinking accent cursor Pause on Hover — freeze rotation on hover Hover Effect — None, Glow, Lift, or Scale Best use cases Hero headlines that cycle through value propositions or product benefits Portfolio headers that rotate through specialities or project types SaaS landing pages highlighting features, audiences, or outcomes Agency sites showcasing capabilities with dynamic, branded motion Pick a theme, add your words, and ship a production-ready animated headline in under a minute. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Introduction

Animated text rotator with motion.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750180298/148/228/309/79/15
  • All · #8029