Awwwards Hero Section

Awwwards-Tier Hero Section

This skill is HERO-SECTION ONLY. It does not govern full pages, navigation systems, footers, or feature sections. It fires when the user asks for a hero, a landing header, an above-the-fold section, or provides reference screenshots of hero designs.

The Pipeline

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│   BRIEF IN ──→ Phase 1: Read ──→ Phase 2: Architecture              │
│                  (extract signals)  (pick one, commit)               │
│                                                                      │
│                              ──→ Phase 3: Build                      │
│                                   (type, palette, atmosphere,        │
│                                    motion, mobile)                   │
│                                                                      │
│                              ──→ Phase 4: Verify                     │
│                                   (visual diff against reference)    │
│                                                                      │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

Phase 1: Read the Reference

Before writing any code, extract design signals from the user's reference images (or infer from their brief). Do not project your own aesthetic onto the reference. Read what is actually there.

→ Extract these signals from each image

→ Output a Hero Extraction before generating code

State in 2-3 lines exactly what you extracted:

"Hero Extraction: Dark mode, centered 3D card carousel with CSS perspective as focal element, massive sans-serif heading below in mixed-case, monospace micro-label above, single ghost CTA, floating pill nav. Palette: off-black + white + one muted accent. Feels like: dark cinematic agency with depth-layered cards."

→ If no reference images are provided

Ask exactly ONE question: "Do you want this hero closer to [dark cinematic] or [light editorial]? And what's the brand name + one-line value prop?"

If you can infer from context (e.g., user said "AI startup" or "luxury agency"), skip the question and declare your Hero Extraction.

✓ Quality Gate: Read

Before moving to Phase 2, confirm:

• You have extracted all 8 signals from the reference (or inferred them from the brief)
• You have written the Hero Extraction summary
• You know the mode (light/dark), the focal element, and the palette direction

Phase 2: Pick an Architecture

Select ONE architecture from the six below that best matches the reference. Do not blend two architectures. Commit fully to one.

Architecture A: The Cinematic Center

Best for: dark cinematic agency sites, immersive product launches, atmospheric brand pages

The heading sits centered in the viewport. A cinematic visual (3D render, product shot, atmospheric photography) fills the background or floats behind/around the text. The CTA is a single centered pill or ghost button below the heading.

[viewport container: relative, min-h-[100dvh], overflow-hidden]
  [background visual: absolute inset-0, object-cover or positioned 3D element]
  [content overlay: relative z-10, flex flex-col items-center justify-center text-center]
    [optional eyebrow: small mono label]
    [H1: massive centered, max 2-3 lines]
    [optional subtext: max 20 words, muted color]
    [CTA: single pill button]

The background visual uses position: absolute; inset: 0 with object-fit: cover (for images) or centered absolute positioning (for 3D/illustrations). Text sits on top via position: relative; z-index: 10. If text readability suffers, add a scrim gradient overlay between the image and text layers (bg-gradient-to-t from-black/60 via-black/20 to-transparent).

Architecture B: The Asymmetric Split

Best for: bold agency homepages, AI/tech product launches, statement brand pages

Massive heading on one side (usually left, occupying 55-65% width). Supporting content (subtext, CTA, or a visual asset) on the other side, vertically offset. The two halves do NOT align to the same baseline - deliberate vertical tension.

[viewport container: min-h-[100dvh], grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] items-end lg:items-center gap-8 lg:gap-0]
  [left: H1, massive, left-aligned, takes up most of the width]
  [right: subtext + CTA OR visual asset, vertically offset from the H1 baseline]

Use items-end on the left column and items-start on the right (or vice versa) to create vertical tension. The heading should feel like it anchors the page to one side. On mobile (< 768px), collapse to single column, full-width.

Architecture C: The Full-Bleed Subject

Best for: athlete/personal brand sites, product photography heroes, editorial fashion or lifestyle

A full-viewport photograph or 3D render IS the hero. Typography is overlaid directly on the image - either at the top-left, bottom-left, or bleeding across the bottom edge. No separate "text area" - the image and text coexist in the same spatial plane.

[viewport container: relative, min-h-[100dvh], overflow-hidden]
  [full-bleed image: absolute inset-0, object-cover]
  [gradient scrim: absolute inset-0, bg-gradient-to-t from-black/70 via-transparent to-black/20]
  [content: absolute bottom-0 left-0 p-12 lg:p-20, z-10]
    [H1: massive, white, mix-blend-mode: difference OR on top of scrim]
    [optional CTA]

The text MUST be readable against the photo. Use either a gradient scrim layer OR mix-blend-mode: difference on the text (which inverts text color against the background). Scrim is safer, blend mode is bolder. On mobile, increase scrim opacity.

Architecture D: The Typographic Poster

Best for: creative studio portfolios, personal brand statements, typography-led editorial

Typography IS the visual. There is no hero image. The heading itself, at viewport-bleeding scale, IS the graphic element. Words may be split across the viewport edges. Different weights, sizes, or italics within the same heading create visual texture.

[viewport container: min-h-[100dvh], flex flex-col justify-between p-8 lg:p-16]
  [top: nav or micro-label]
  [center: H1 at viewport-scale (10vw-15vw), possibly split into multiple positioned lines]
  [bottom: CTA or micro-metadata strip]

Use font-size: clamp(4rem, 12vw, 16rem). Words can be positioned with text-align: left on line 1, text-align: right on line 2, creating diagonal visual flow. Mix font-weight: 900 with font-weight: 300 or font-style: italic within the same heading using <span> wrappers.

Architecture E: The Inline-Image Typography

Best for: creative agency hero sections, brand pages with personality, editorial homepages

Massive typography with small, rounded images embedded BETWEEN words in the headline. The images sit inline at type-height, acting as visual punctuation. The heading reads as a sentence with tiny photo interruptions.

[viewport container: min-h-[100dvh], flex items-center justify-center]
  [H1: massive, contains <span> wrappers for inline images]
    "Build " [inline-image: w-16 h-10 rounded-full object-cover align-middle mx-1] " a quieter, " [inline-image] " smarter AI agency presence."

/* BLUEPRINT: Inline hero images
   WHY: The images must match the x-height of the surrounding text.
   They are punctuation, not focal elements. Making them too large
   turns the heading into a gallery instead of a sentence. */
.inline-hero-img {
  display: inline-block;
  width: clamp(3rem, 5vw, 5rem);
  height: clamp(2rem, 3.5vw, 3.5rem);
  border-radius: 9999px;       /* pill shape */
  object-fit: cover;
  vertical-align: middle;
  margin-inline: 0.25em;
}

On mobile, the inline images can either scale down with the text or stack below the heading (hidden md:inline-block).

Architecture F: The Layered Depth (Z-Axis Composition)

Best for: portfolio showcases, SaaS product demos, multi-project agency displays

Multiple visual elements (cards, images, UI mockups) are arranged at different depths using CSS perspective and transform: rotateY() rotateX(). A single element is "closest" (largest, front-center). Others recede into the background (smaller, rotated, lower opacity). Typography anchors the composition above or below.

[viewport container: min-h-[100dvh], relative, perspective: 1200px on parent]
  [card layer: absolute, multiple cards with varying transform: rotateY(Xdeg) translateZ(Ypx)]
    [front card: scale(1), translateZ(0), centered]
    [left card: rotateY(25deg), translateZ(-200px), scale(0.85), opacity-70]
    [right card: rotateY(-25deg), translateZ(-200px), scale(0.85), opacity-70]
  [text layer: relative z-10, positioned below or overlapping the card cluster]
    [H1]
    [CTA]

/* BLUEPRINT: Perspective card shelf
   WHY: perspective-origin centers the vanishing point. 
   preserve-3d lets child transforms create real depth.
   backface-visibility prevents render flicker on rotation. */
.perspective-container {
  perspective: 1200px;
  perspective-origin: center center;
}
.depth-card {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
}

⚠ Drift Warning: The #1 AI failure mode for this architecture is scattering 8-10 cards randomly across the screen at random rotations. The layout MUST have a clear focal card (front-center, full opacity, largest) with 2-4 supporting cards receding symmetrically into depth. Think Apple TV app shelf, not a card explosion.

✓ Quality Gate: Architecture

Before moving to Phase 3, confirm:

• You selected ONE architecture from A-F
• Your selection matches the Hero Extraction from Phase 1
• You are not blending two architectures

Phase 3: Build the Hero

→ Typography

Hero headings are not "big text." They are architectural elements that structure the entire viewport.

Font selection - pick ONE from the appropriate row:

⚠ Drift Warning: Inter, Roboto, Open Sans, Poppins, Arial, and Helvetica are body fonts, not display fonts. Using them as a hero heading font produces generic output regardless of how good the layout is. If the reference uses one of these, verify carefully - at hero scale, Inter and Geist look nearly identical, and Geist is the display-grade choice.

Heading CSS blueprint:

/* BLUEPRINT: Hero heading
   WHY: clamp() makes the heading responsive without breakpoints.
   Negative letter-spacing is critical at large sizes - positive
   tracking on massive text creates a loose, amateurish feel.
   line-height below 1.0 lets ascenders and descenders overlap
   slightly, which looks intentional at display scale. */
.hero-heading {
  font-size: clamp(2.5rem, 7vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
  max-width: 18ch; /* prevents 4+ line wraps */
}

/* For 1-3 word headings, go larger */
.hero-heading--short {
  font-size: clamp(4rem, 14vw, 18rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
}

Supporting text hierarchy:

→ Palette

Maximum 3 hues in the hero. This is not a suggestion - it is what separates award-winning heroes from busy ones.

Dark hero palette:

/* BLUEPRINT: Dark hero atmosphere
   WHY: #0a0a0a reads as black but has enough data for 
   subtle gradients to register. Pure #000000 is a dead 
   flat surface that cannot hold atmospheric effects. */
.hero-dark {
  background: #0a0a0a;
  color: #f5f5f5;
  /* Accent: one muted hue, used on max 1-2 small elements */
}

Light hero palette:

.hero-light {
  background: #FAFAF9; /* or #F5F5F0 or #FDFBF7 - warm cream, not pure white */
  color: #1a1a1a;      /* or #111111 - near-black, not pure black */
  /* Accent: one considered hue */
}

⚠ Drift Warning: More than one saturated accent in the hero guarantees a busy, unfocused feel. One accent on CTAs and active states. Everything else is the base palette (background + text + muted text).