Live Examples

Hero banners built with Claude

Twenty-one hero sections — the first thing anyone sees on a page, and the hardest part to get right. Split screens, aurora gradients, particle fields, sliders, WebGL terrain, liquid chrome and more. Every one is live and interactive: open it, resize it, view the source. Ask Claude for any of them on your own site.

Twenty-one hero banner designs, one builder

Each preview below is the real banner running live — not a screenshot. Every one is a self-contained page Claude produced end-to-end: layout, copy, animation and the interactive touches. Describe the one you want and Claude builds it into your site.

Split gradient

01

Classic two-column split: copy on the left, an animated gradient panel and glass stat card on the right.

SaaSSplit

Aurora

02

Centred type over three drifting blurred blobs with a film-grain overlay. Slow, cheap and never visibly loops.

GradientCentred

Particle field

03

Canvas particle mesh that draws connecting lines between nearby points, with a stat row beneath.

CanvasTech

Typewriter

04

Headline that types and deletes through five phrases, over a faded grid, with an inline email capture.

LightSignup

Product shot

05

Tilted app window rising into view with floating metric cards — a full UI mockup in pure CSS.

Product3D

Logo marquee

06

Corporate centred hero with an infinite, pause-on-hover client logo strip and compliance micro-copy.

EnterpriseSocial proof

Spotlight

07

A torch that follows the cursor, revealing a dot grid through the darkness. Open it and move your mouse.

CursorSecurity

Bento grid

08

Headline as one tile in a grid of stats, features and a sparkline — the whole pitch above the fold.

GridModular

Diagonal split

09

Hard clip-path diagonal with pulsing rings, reflowing to a horizontal split on mobile.

GreenClip-path

Image collage

10

Scattered, slightly rotated photo tiles that lift on hover, beside a serif headline. Warm and hospitality-ready.

RestaurantSerif

Kinetic words

11

Rotating word swap inside a fixed-height window, so the headline never reflows. Ticker strip along the bottom.

AgencyKinetic

Glass panel

12

Frosted search card floating over a CSS-painted sunset scene. Swap in a photo and nothing else changes.

TravelGlass

Terminal

13

Developer hero with a copyable install command and a terminal that types its output line by line.

Dev toolMono

Parallax layers

14

Six mountain layers that shift at different rates as you move the cursor. Open it full size for the effect.

ParallaxOutdoor

Editorial

15

Print-style masthead, drop cap, standfirst and a contents rail — a magazine cover as a hero.

MagazineSerif

Slider

16

Auto-advancing three-slide carousel with a slow zoom, staggered text entry and clickable progress bars.

RetailCarousel

Stats bar

17

Clean fintech hero with a highlighter underline and a four-up figure strip that counts up once on entry.

FintechCounters

Video loop

18

Full-bleed moving backdrop with a live badge and a play control — drop a real video in and the layout holds.

FilmFull-bleed

Brutalist mono

19

Heavy borders, inverted and outlined type, monospace throughout, with a character marquee along the bottom.

TypeBold

Liquid metaballs

21

Raymarched liquid chrome — gooey blobs merge and split in real time, and one follows your cursor. Raw WebGL, no libraries.

StudioWebGL

Countdown

20

Event hero with a live ticking countdown, mesh gradient background and a speaker avatar row.

EventCountdown

Want one of these on your site?

Point Claude at the one you like and describe your business. It builds the banner into your own site, in your colours, with your words — usually in a single message.

Every banner here is a self-contained document: markup, styles and behaviour in one file, no framework and no build step. Ask Claude to adapt one to your brand tokens and it writes it straight into your site.