Animated Text Hero
A hero where the headline word swaps through phrases with smooth motion. Highlights several value points in one line at the top of a landing page.
A hero where the headline word swaps through phrases with smooth motion. Highlights several value points in one line at the top of a landing page.
Search blocks by description or jump to a page.
Animated Text Hero is a centered, full-width hero that opens with a large headline, a body paragraph, two call-to-action buttons, and a row of four social-proof stats. The headline contains a typewriter phrase that types out one value claim, pauses, deletes it, and cycles to the next. A blinking cursor sits at the end of the phrase so the animation is clearly intentional. Below the headline, the two CTAs sit side by side on wider screens and stack on mobile. The stats grid sits below the buttons, showing a number and a short label in each cell.
Every piece of copy is independent. The headline prefix, the cycling phrases, the paragraph text, the button labels, and each stat number and label can all be edited without touching the animation logic. You can add or remove phrases from the rotation and adjust the stat count from four to two if you only have two numbers worth showing.
This layout suits a healthcare scheduling product that needs to highlight several distinct value points in a single line without crowding the page. The typewriter loop is a natural fit when your product serves more than one buyer persona and you want each group to see their own reason to keep reading, all within the same fold. The stat row adds light credibility without requiring a separate social-proof section below.
Compared to a static centered hero like Simple Centred, this block does more work on attention without adding visual noise. If you need the page to also show a product screenshot or UI preview, reach for With Dashboard or With Product Screenshots instead.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block has three clearly separable zones you can tune independently:
Tip: keep each phrase short enough to fit on one line at the largest heading size so the blinking cursor stays visible and the layout does not reflow mid-animation.