Search blocks by description or jump to a page.
A hero set on a slowly shifting gradient backdrop with a centered headline and CTA. A colorful, lively opener for SaaS and creative product pages.
Animated Gradient is a two-column hero. The left column holds a large headline, a short paragraph, an inline email input with a subscribe button, a row of small technology badge pills, and a social proof strip showing three stacked avatars beside a joined-by count. The right column displays a faux code editor card: a title bar with traffic-light dots and a filename tab, then a scrollable code block beneath it. Four large blurred color orbs (purple, yellow, pink, and blue) float in the background and slowly drift in overlapping loops to produce the shifting gradient effect.
The left and right columns are fully independent. You can rewrite the headline and paragraph, change the badge labels to reflect your own stack, update the email label and button text, and swap the joined-by count for any social proof figure. The code panel is a static display, so you can replace the snippet with any short code example that speaks to your audience.
Reach for this block when your product targets a technical audience and you want to capture early interest in one motion. For a fintech or banking product, it works particularly well as an onboarding entry point: the email input converts curious visitors into a waitlist while the code panel signals that the API or SDK is real and ready. It fits a launch page, an early access campaign, or a developer-facing product site where a static background would feel flat.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block has three distinct zones you can adapt without touching the others:
Tip: keep the code snippet short enough to display without horizontal scrolling; four to eight lines is the sweet spot for quick comprehension.