Animated Features Hero
A hero that cycles through key features with motion next to a headline and CTA. Use it to show what your product does the moment a visitor arrives.
A hero that cycles through key features with motion next to a headline and CTA. Use it to show what your product does the moment a visitor arrives.
Search blocks by description or jump to a page.
Animated Features Hero opens with a centered headline and subtext, then a two-column section below. The left column holds a four-button tab strip inside a card, one button per feature. Below that strip a detail card shows the active feature's icon, title, description, three bullet checkmarks with sub-points, and a "Learn more" ghost link. The right column holds a square illustration panel that fades between four large SVG icons, one per feature, each on its own color-tinted background. Clicking a tab updates both the detail card and the illustration simultaneously.
The headline, subtext, button labels, and the four features are all independent copy. You can reorder features, rename them, swap in different SVG icons, or change the bullet sub-points without touching the layout. The two primary and outline CTAs above the feature section can be retargeted to any route.
Reach for this block when your product has three to five distinct pillars and you want visitors to explore each one without leaving the page. It fits a developer tools landing page well because engineers tend to click through tabs and read the specifics rather than scroll past a static feature grid. It outperforms a plain feature grid here because the tab interaction keeps the fold compact while still surfacing detail on demand.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block is built around four swappable feature slots, each driving both the tab strip and the illustration panel. Practical ways to use that:
Tip: keep feature titles to two words so the tab strip label (which shows only the first word) stays legible at narrow widths.