Heroes
35 components
Consultant Circle
Portrait inside a circle backdrop with floating stat cards and 4-card service strip
Landscape Card
White card centered on a moody full-bleed landscape photograph; orange-underlined accent words
Soft Gradient
Cream-to-emerald gradient bg, eyebrow + gradient-text headline + 2 CTAs + image. From Genius Coaching.
Expert with Floating Quotes
Two-column with bullets, avatar stack, and 4 floating testimonial bubbles around the hero image. From Laurie Mabelis.
Crouching Tiger Hero (Local Service)
Bg image with navy tint, 5-star + Top Rated, blob portrait with 3 staggered review toasts + Google rating badge, wave divider. From Crouching Tiger.
Event Countdown (Playful Collage)
Vibrant event hero with bold serif + script accent, two stacked rotated photo cards, scattered stars/squiggle, location + dates, 4-block countdown.
Practice Portrait (Medical / Professional)
Two-column with eyebrow pill + headline + 2 CTAs left, oval-cropped portrait on tinted bg right. 3-card trust strip below: years stat + team avatars + legacy.
Product Cutout (Fashion / Ecom)
Bold-color hero with full-bleed cutout product photo, big serif + script headline accent, two-tone offer badge floating bottom-right.
Quantum Soft (Editorial 3-Column Card)
3-column hero with ivory pill headlines, sage CTA, tall main photo card with floating badge + tag strip, side panel with secondary card. From quantumrealitycreators.com/soft.
Blob Portrait (Editorial Magazine)
Cream/yellow editorial hero with italic Cormorant serif headline, blob-shaped portrait, three yellow circle accents bleeding off corners.
Dating Cards (Member-Card Sticker Wall)
Member/community hero with email-signup pill, 3-stat row, couple photo surrounded by floating member cards, payment card, badges, star + moon decorations.
BP Centered (Editorial Logo + CTA)
Calm centered editorial: large brand logo, single-sentence headline, subhead, dark CTA + secondary link, micro-copy below. From beautiful-possibilities.com.
Wilson Hero (Wide Image + Cream Caption)
Wide cinematic 24:10 photo at top with cream caption card overlapping below, Fraunces serif headline with italic teal accent. From deborahwilsonmd.com.
Cmillworks Hero (Walnut Luxury Craftsman)
Premium walnut bg with bronze blob filters, Playfair italic headline, 4-tile masonry + 3 floating testimonial cards, 3-layer wave divider. From cmillworks.com.
Mazixmahalel Video Hero (Vimeo BG · Gold/Cinzel)
Full-screen Vimeo video background with image fallback, Cinzel serif gradient-gold headline, italic Cormorant tagline, bordered gold CTA, scroll indicator. From mazixmahalel.com.
AI Summit Hero (Glass Pill Nav + Speaker Mosaic)
Deep purple conference hero with translucent glass-pill nav, gradient Register CTA, oversized headline + Learn More button, staggered 5-tile speaker portrait mosaic. For AI / tech / conference / event sites.
AI Summit Tilted (Diagonal Marquee · Deep Teal)
Teal-palette variant with the dual speaker marquees rotated 45° as a unit. Uniform 3:4 portraits scroll diagonally in opposite directions across the right half. Horizontal vignette keeps the headline readable.
Flood Cutout (Local Practice)
Saturated brand-colour field with a full-length cut-out person bleeding off the right, two-weight Playfair headline, hours/address utility strip above the nav, soft disc backdrop and a curved wave edge into the next section. Every colour is a prop.
Cut-out + Blur Band (Portfolio / Studio)
Full-height white stage with one transparent cut-out photograph and the copy along the bottom on page-white. A masked backdrop-filter ramps a blur in behind the lower copy. Fades up while scaling down on load, then zooms in and descends with scroll.
Layered Descent (Pinned Parallax Scene)
A pinned 100vh stage the camera travels down through: parallax planes recede at different rates off one scroll number, a two-term riser carries a foreground plate and its ground up behind it, and copy beats fade in across scroll ranges. Renders as a readable stack with no JS.
Pastel Flood (Wellness / Clinic)
Blush field with a cut-out subject bleeding off the top edge, a small dark serif kicker over an oversized white display word, one pill CTA and sparse tone-on-tone discs. Copy staggers in; the photograph carries a short scroll parallax.
Arc Slider (Practice / Local Business)
Flooded band ending in a wide curve with a rotating cut-out standing on it. Drifting blobs, a spark field with cursor parallax, a floating proof badge, and a scroll zoom from a pinned bottom. The curve is two 300vw circles — one fills, one masks.
Particle Field (SaaS / Product / Event)
Dark cosmic ground with a drifting canvas particle field, transparent nav on top, and a centred three-tier headline stack. Particles twinkle independently, clear a space around the cursor, pause off-screen and hold still under reduced motion. No library.
Photo Dock (Editorial Monochrome / Fintech)
A full-bleed photograph that docks into a card as you scroll: it shrinks and rounds onto the page, white copy leaves upward, dark copy fades in on the white it uncovers, two sibling cards slide out from behind it and the nav inverts. Measured off revolut.com.
Photo Dock — Wipe (Editorial Monochrome / Fintech)
The variant where the photograph holds still: a card-shaped border firms up over it, then white grows OUT of that border in four directions until it covers everything else, and the siblings slide out once it lands. Nothing about the picture moves.
Disc Trio (Restaurant / Menu / Product)
Three counter-rotating circular photographs over a blurred room, with the autoplay timer drawn as a yellow arc around the middle one. The discs never travel — the trio swells and settles while the images cross-fade under it.
Depth Stack (Chaptered Parallax Scenes)
Full-height scenes stacked one after another, four depth layers each, moving on scroll and on the pointer. The oversized word sits behind the subject so the figure stands in front of its own letters.
Deep Zoom (Scroll Dives Into the Detail)
A pinned hero that falls into one detail of a photograph as you scroll — a kitchen down to the crystals in the granite. Three photographs hand over on one shared exponential so an 18x dive stays sharp all the way down.
Deep Zoom (Into the Screen)
The same dive, ending inside the product. A laptop across a quiet office, and the screen fills the frame as you arrive — drawn as live DOM glued to the photograph, so the interface is sharp at 5x rather than an upscaled screenshot.