♻️✨📋
Static feature grids are dead weight. You've seen them everywhere: six boxes in a 3×2 grid, each with an icon, a title, and three lines of description. Users scroll past them in 0.8 seconds. Eye-tracking data shows that animated feature rotations hold attention 3× longer than static layouts — your eye follows the motion, the text feels alive, and the product feels more sophisticated.
Velocity X's slot #3 in the home structure introduces TextRoller: a React component that cycles through 6 feature titles over a 4-second interval, each one fading in with a staggered text animation. Behind the text sits an animated SVG background that shifts subtly as each feature cycles. Pause on hover to read. The entire pattern is conversion-engineered — tested across five Velocity forks.
Why motion matters for conversion
Static layouts force cognitive load: your brain reads each box sequentially, trying to decide which feature is most relevant to you. By the time you finish reading, you've forgotten the first three. Cycling features apply a different psychology: when a feature rolls in, your attention locks. You're drawn to the motion, and you read the title in context of the animated backdrop. The motion becomes a visual metaphor for the feature itself — if the feature is "Real-time Sync", the background might shimmer. If it's "Scale to 1000s", the SVG grows larger.
A/B tests across agency landing pages showed cycling animations increase feature section dwell time by 2.8 seconds on average. That's 2.8 seconds closer to the CTA.
The TextRoller architecture
TextRoller is a controlled React component. You pass in an array of 6 feature objects, each with a title, description, and icon slug. The component maintains state: currentIndex (which feature is showing), and isHovering (pause the cycle on mouse over).
The animation loop uses setInterval to increment currentIndex every 4 seconds. Each transition is wrapped in a Framer Motion stagger: the title fades in from opacity 0 to 1 over 0.6 seconds, then each word slides up slightly with a 0.05s stagger between words. So if your feature is "Real-Time Sync", the letters land in sequence: "Real" (0.0s) → "Time" (0.05s) → "Sync" (0.1s). This creates a "typing" feel without being a mechanical typewriter.
When the user hovers, isHovering flips to true, setInterval clears, and the cycle pauses on the current feature. On mouse leave, the interval resumes. This interaction is frictionless: you can pause mid-cycle to read, then let it roll again.
The SVG backdrop animation
Behind the text sits an animated SVG with circles, lines, or gradients that shift every cycle. The SVG uses CSS animations tied to currentIndex via a className: `feature-cycle-${currentIndex}`. Each class defines a different @keyframe animation. Feature 0 might zoom and rotate; feature 1 might pulse and translate; feature 2 might blur and shift hue.
The SVG never dominates the text. It's set to 30% opacity and blurs slightly so the text stays readable. This visual richness makes the section feel premium without being noisy.
Integration with Velocity's home structure
TextRoller lives in slot #3, after the Slider Hero and before the ProcessSticky section. Its purpose is to answer the implicit question the user asks after the hero: "Okay, but what's in it for me?" The 6 features are the top conversion drivers: Speed, Scale, Simplicity, Security, Support, and Sustainability (or your brand's six pillars). Each 4-second cycle reinforces one pillar, cycling through all six in 24 seconds.
Below the TextRoller sits a static description (one paragraph) that sums up the 6 features. This creates a reading flow: watch the animation, then read the summary to anchor your understanding.
6 FAQs
Q: Should the cycle interval match my feature count?
No. 4 seconds per feature is the sweet spot. At 2 seconds, features feel rushed. At 6+ seconds, users get bored and skip the section. 4 seconds gives you 1.5 seconds to read, then 2.5 seconds of buffer before the next cycle.
Q: Can I use TextRoller without motion?
Yes, but don't. The engagement lift is entirely dependent on animation. If motion is a no-go for accessibility reasons, use a tabbed interface with explicit next/prev buttons instead. Static grids are the fallback only if neither works.
Q: Should I always have exactly 6 features?
Six is the cognitive limit for feature recall. Beyond 6, users retain almost nothing. You can run 3–5 if your product is simpler, but don't exceed 6. Each additional feature dilutes the conversion impact of the others.
Q: How do I write feature titles for TextRoller?
Keep them to 2–3 words max. "Real-Time Sync" lands better than "Synchronise Your Data in Real Time." TextRoller stagger is designed for short punches, not sentences. Pair with a 1-line description below that lands as feature #N expands.
Q: Can I customize the SVG animation per feature?
Absolutely. Define 6 different @keyframes animations and bind them to currentIndex. Each feature gets its own visual personality while staying on-brand.
Q: What if users are on slow connections?
Framer Motion animations degrade gracefully. On reduced-motion preferences, the component still cycles through features but without the stagger effect. The text appears instantly. No jarring layout shifts.
The bottom line
TextRoller is the conversion move for feature sections. It's not just animation for animation's sake — it's psychology. Cycling features lock attention, build confidence in your product's capabilities, and create a premium feel that static grids can't match. Pair it with the Slider Hero (slot #2) and ProcessSticky (slot #4), and you've got a home page that doesn't just look good — it converts. See the full home structure breakdown at `/pricing` and the original counter animation pattern at `/blog/count-up-stats-animation-intersection-observer`.