Aethera — Cinematic AI Hero

# Dark cinematic full-bleed hero — build prompt

A single-viewport hero section: one generated cinematic photograph running edge to edge, near-black and warm, with a light-weight **monospaced** headline centred in the upper half, a floating pill nav, one white pill CTA, and a small review/stars band floating at the base of the fold. Restrained motion. No cards, no gradients-as-decoration, no glass panels beyond the nav pill.

Design viewport: **1440 × 900 CSS px**. The page is full-bleed: no outer margin, no rounded corners on the page, no coloured sheet behind it, no max-width wrapper around the hero.

---

## 1. Structure

- **Page container:** 100vw, no max-width. Background colour behind everything: `#1A1715`.
- **Content gutter:** 48px left and right. Header and trust band respect it; the hero image ignores it (full bleed).
- **Column structure:** single centred column. The header is a three-zone row: left wordmark, an absolutely centred nav pill (centred on the viewport, *not* on the space left over), right utility cluster.
- **Copy measures:** headline block max-width 880px; paragraph max-width 560px. Both centred, text-align centre.

Sections, top to bottom:

1. **Hero** — 100vh, full-bleed image stage. Contains:
   - **1a. Header** — absolutely positioned inside the hero, 32px from the top, overlaid on the image. Not sticky; it scrolls away with the hero and never returns.
   - **1b. Copy block** — centred column: headline (2 lines) → paragraph (2 lines) → one pill CTA. Positioned from the top of the viewport, **not** vertically centred.
   - **1c. Trust band** — a single centred row absolutely positioned 40px above the bottom edge of the hero: "Reviews 1,042" · five star chips · "Excellent Score".
2. **Continuation band** — 900px of dark ground below the fold, flat `#1A1715`, one centred statement line. It exists so the hero's scroll-linked exit has somewhere to go; keep it near-empty.

---

## 2. Scroll map

| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Hero (incl. 1a, 1b, 1c) | 900px | 1.00 | 900px | entrance on load, then **scroll-linked** exit |
| 1a | Header | 56px tall, overlaid | — | 0 (inside §1) | entrance, then scroll-linked with §1 |
| 1b | Copy block | 296px tall, overlaid | — | 0 (inside §1) | entrance, then scroll-linked with §1 |
| 1c | Trust band | 28px tall, overlaid | — | 0 (inside §1) | entrance, then scroll-linked with §1 |
| 2 | Continuation band | 900px | 1.00 | 900px | entrance |

**Total page height: 1800px ≈ 2.0 viewports.** Nothing pins, nothing stacks, nothing consumes more scroll than its own height.

---

## 3. Spacing

Measured from the top edge of the viewport (the hero starts at y=0; there is no header bar above it):

- Header pill top: **32px**. Pill height 56px → header zone ends at y=88.
- Wordmark: left 48px, vertically centred on the pill (centre y=60).
- Utility cluster: right 48px, vertically centred on the pill. `EN` label → chevron gap 6px; chevron → search icon gap 32px.
- Inside the nav pill: horizontal padding **0 28px**; flex `gap: 24px`; the dot separators are flex items, so label-to-label distance is 52px.
- Pill bottom (y=88) → headline cap-top: **80px**. Headline block top edge at **y=174** (19% of viewport height).
- Headline → paragraph: **32px**.
- Paragraph → CTA: **40px**.
- CTA: 56px tall, padding `0 34px`, min-width 194px. Its bottom sits at y≈470 (52% of viewport).
- Trust band: centred row, **40px** from the bottom edge of the hero. Gaps: label → stars **24px**, stars → label **24px**; star chips 28×28px with **5px** gaps.
- Section 2: padding `160px 48px`, content max-width 880px, centred.

**Rhythm:** the hero has no section padding — every value above is measured against the viewport edges. The internal rhythm is a descending 80 / 32 / 40. Below the fold the rhythm changes to a flat 160px top and bottom. Do not add 80–120px of padding above or below the hero; it is edge-to-edge.

---

## 4. Type

Two families only.

**Display family — monospaced, light.** This is the signature of the design and the single thing most likely to be got wrong. Required characteristics: a true **monospace** with uniform advance widths (~0.6em), **low stroke contrast**, **light weight (300)**, large aperture, double-storey `a`, single-storey `g` with a short open tail, flat horizontally-cut terminals, a straight-hooked `f`, and a `t` with a small curved foot. It must read wide and airy and slightly technical — the letterspacing you see is the monospace advance itself, not tracking piled on a proportional sans.
Use **JetBrains Mono Light (300)**; acceptable equally-close stand-ins are **Roboto Mono Light** or **IBM Plex Mono Light** (all free on Google Fonts). Do **not** use Space Mono, Courier/Courier New, Cutive Mono, VT323, or any slab-serifed/typewriter mono — the quirky serifed terminals destroy it.

**Text family — neutral grotesk.** `Inter` (400/500). Slightly narrow, plain, invisible. Used for everything that is not the headline.

Body anchor: **17px**. Every level below is a multiple of it.

| Level | Multiple | Size | Line-height | Letter-spacing | Weight | Family |
|---|---|---|---|---|---|---|
| Headline (2 lines) | 3.3× | **56px** | 1.15 (64px) | +0.01em | 300 | mono |
| Section 2 statement | 2.0× | **34px** | 1.35 | +0.01em | 300 | mono |
| Body paragraph | 1.0× | **17px** | 1.75 (30px) | 0 | 400 | grotesk |
| CTA label | 0.94× | **16px** | 1.0 | +0.01em | 500 | grotesk |
| Nav links | 0.88× | **15px** | 1.2 | +0.005em | 450 | grotesk |
| Wordmark | 0.88× | **15px** | 1.0 | **+0.22em**, uppercase | 500 | grotesk |
| `EN` / utilities | 0.82× | **14px** | 1.0 | +0.02em | 450 | grotesk |
| Trust band labels | 0.82× | **14px** | 1.2 | +0.01em | 450 | grotesk |

**Max line length:** headline ≤ 30 characters per line, forced to exactly two lines with the second line clearly shorter than the first and centred under it (the second line opens with an en dash + space). Paragraph ≤ 62 characters per line, two lines, balanced (`text-wrap: balance`).

**Placeholder copy by role:** wordmark — one word, 6–8 letters, uppercase. Nav — 4 links of 1–3 words. Headline — 7–9 words on two lines, the second line prefixed `– `. Paragraph — 22–28 words, two sentences. CTA — 3 words. Trust band — `Reviews 1,042` and `Excellent Score`.

---

## 5. Colour

All surface colour comes from the photograph; the CSS palette is small.

| Hex | Role |
|---|---|
| `#1A1715` | **Ground.** The page background, the near-black that fills the top ~30% and the corners of the image, and the fill of section 2. Covers the largest share of the surface. |
| `#394746` | Mid-tone atmosphere — the dark teal haze in the middle of the photograph. In CSS it appears only as the colour of hairlines/dividers at low opacity and the nav dot separators (`#597277` at 60%). |
| `#597277` | The cool light — the pale steel-blue shaft and airborne mist in the image. Lightest cool tone. Not used for text. |
| `#B88765` | **The single accent.** Warm tan. Allowed in exactly three places: the five star chips, the focus ring, and a link hover underline. Nowhere else — no accent buttons, no accent headline, no accent borders. |
| `#865A45` | Deep terracotta ember. Image-only support tone; never a UI fill. |
| `#F2EDE8` | Warm off-white for text. Headline at 96% opacity, paragraph at 78%, nav links at 82%, trust labels at 80%. |
| `#FFFFFF` | Reserved for the CTA fill and the star glyphs only. Never body text. |

**Image overlays** (the photo is already dark — do not flood it):
- top: `linear-gradient(180deg, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0) 38%)`
- bottom: `linear-gradient(0deg, rgba(10,8,7,0.45) 0%, rgba(10,8,7,0) 22%)`
- corner vignette: radial, max 25% opacity at the corners.
Total darkening over the centre of the frame: **0%**. The hands and the light shaft must stay fully legible.

---

## 6. Surface

- **Radii:** nav pill `999px`; CTA `999px`; star chips `6px`; language dropdown `12px`. Everything else square. The page itself has **no** radius.
- **Borders:** one only — the nav pill: `1px solid rgba(255,255,255,0.10)`, plus an optional `inset 0 1px 0 rgba(255,255,255,0.06)` top highlight. No border on the CTA, the chips, or the hero.
- **Nav pill fill:** `rgba(255,255,255,0.06)` with `backdrop-filter: blur(18px) saturate(115%)`. Translucent — the photograph must be faintly visible through it.
- **Shadows:** none, anywhere. No drop shadow on the CTA, no text-shadow on the headline, no glow. The only depth in the composition is the photograph's own light.

---

## 7. Imagery

**One image, and it must be generated — it is 100% of the hero's surface.** Build the layout only after the image exists; a flat colour, a mesh gradient, or a grey placeholder is a failed rebuild, and so is a stock handshake photo.

**Hero photograph** — aspect ratio **8:5 (1440×900)**, rendered at 2880×1800, full-bleed `object-fit: cover`, `object-position: center 55%`, sits at z-index 0 behind everything in §1.

Subject and treatment: two human hands reach horizontally toward each other from the left and right edges of the frame, fingertips almost touching — the gap lands on the **horizontal centre**, at about **62% of the frame height**, directly below the CTA. Both forearms do not end in bodies: they dissolve at the frame edges into a churning nebula of warm tan and terracotta dust and filament. A broad volumetric shaft of pale blue-teal light falls diagonally from the upper-left, crossing the gap between the fingertips and catching airborne particles. The top third of the frame is near-black and almost featureless, with one faint teal-and-ember cloud in the top-left corner — that emptiness is what lets the headline sit on the image with no panel behind it. Skin is lit softly from above: warm tan highlights on the knuckles, deep shadow underneath. Shallow depth of field, fine film grain, painterly rather than crisp.

Generation prompt to use verbatim:

> Cinematic macro photograph, two bare human hands reaching horizontally toward each other from opposite edges of the frame, fingertips almost touching at the exact horizontal centre at 62% of the frame height, each hand anatomically correct with five fingers; both forearms dissolve at the frame edges into a churning nebula of warm amber and terracotta dust and filaments; a broad volumetric shaft of pale blue-teal light falls diagonally from the upper left across the gap between the fingertips, catching drifting particles; the top third of the frame is near-black and empty except for one faint teal-and-ember nebula cloud in the top-left corner; soft top light on the skin, warm tan highlights, deep shadow beneath; shallow depth of field, fine film grain; colour palette limited to near-black #1A1715, dark teal #394746, steel blue #597277, warm tan #B88765, deep terracotta #865A45; no faces, no figures, no robots or prosthetics, no text, no watermark; 8:5 aspect ratio.

**Star chips** (not an image): five 28×28px rounded squares, radius 6px, fill `#B88765`, each holding a centred 15px five-pointed star in `#FFFFFF` at 92% opacity. The fifth chip is a half star: the glyph is filled from the left to 50%, the remainder at 30% opacity. Inline SVG, not an icon font.

**Icons:** search magnifier 20px, chevron-down 10px, both 1.5px stroke, `currentColor` at 80% opacity.

---

## 8. Motion

No live-page motion capture exists for this design, so **every value in this section is (inferred)** from the stills and the design's restrained character. Durations, easings and staggers are **not measured** — each is given as a range with a recommended value; do not invent library parameters beyond these.

### §1a — Header
- **kind:** entrance on load, then scroll-linked with §1 (inferred)
- **what moves:** wordmark, nav pill, utility cluster
- **from → to:** entrance — opacity 0 → 1, translateY +10px → 0, pill `backdrop-filter` blur 0 → 18px. Exit — translateY 0 → −40px, opacity 1 → 0.
- **range:** entrance fires once on load after webfonts resolve; duration not measured, use **600ms** (range 500–800ms), easing `cubic-bezier(0.22, 0.61, 0.36, 1)`, stagger **80ms** (range 60–120ms) left → centre → right. Exit is **scroll-linked**: mapped over scroll 0 → 450px (0 → 0.5 viewport) and it reverses on the way back up.
- **reduced motion:** no entrance transform and no scroll-linked exit; the header renders at its final state and simply scrolls out of frame with the page.

### §1b — Copy block
- **kind:** entrance on load, then scroll-linked with §1 (inferred)
- **what moves:** headline line 1, headline line 2, paragraph, CTA
- **from → to:** entrance — each element opacity 0 → 1, translateY +18px → 0 (CTA +10px → 0, plus scale 0.98 → 1). Exit — the whole block translateY 0 → −60px, opacity 1 → 0.
- **range:** entrance fires once on load, beginning 120ms after the header; duration not measured, use **700ms** (range 600–900ms), easing `cubic-bezier(0.22, 0.61, 0.36, 1)`, stagger **90ms** (range 70–120ms) in DOM order. Exit is **scroll-linked**, mapped over scroll 0 → 500px, fully transparent by 500px, and it reverses on scroll up.
- **reduced motion:** all elements render at opacity 1, translate 0; no parallax and no fade on scroll.

### §1c — Trust band
- **kind:** entrance on load, then scroll-linked with §1 (inferred)
- **what moves:** the label/stars row as one unit
- **from → to:** entrance — opacity 0 → 1, translateY +10px → 0. Exit — opacity 1 → 0 over the first 300px of scroll. The star chips never animate individually: no pop-in, no fill sweep, no count-up on the review number.
- **range:** entrance fires once on load, last in the sequence (≈480ms after the header begins); duration not measured, use **600ms** (range 500–800ms), same easing, no internal stagger. Exit is **scroll-linked** over scroll 0 → 300px and reverses.
- **reduced motion:** renders at final state; no fade on scroll.

### §1 — Hero image
- **kind:** scroll-linked (inferred)
- **what moves:** the background photograph
- **from → to:** on load, scale 1.06 → 1.00 and opacity 0 → 1. On scroll, translateY 0 → −90px (the image drifts up at roughly 0.1× scroll speed, slower than the copy, which travels −60px over a shorter range) and brightness 1 → 0.85.
- **range:** the load animation is an entrance, once, duration not measured, use **1200ms** (range 900–1600ms), easing `cubic-bezier(0.16, 1, 0.3, 1)`. The parallax is **scroll-linked**: from scroll 0 until the hero's bottom edge reaches the top of the viewport (0 → 900px), and it reverses exactly on the way back up.
- **reduced motion:** the image renders at scale 1.00, opacity 1, no translate, no brightness change — it is a static background.

### §2 — Continuation band
- **kind:** entrance (inferred)
- **what moves:** the single statement line
- **from → to:** opacity 0 → 1, translateY +20px → 0
- **range:** plays **once**, triggered when the element's top reaches 80% of the viewport height; duration not measured, use **700ms** (range 600–900ms), easing `cubic-bezier(0.22, 0.61, 0.36, 1)`, stagger 80ms if split into more than one line. Does not reverse.
- **reduced motion:** renders at its final state immediately.

### Interaction transitions (not part of the scroll choreography)

- **Nav link hover:** colour `#F2EDE8` 82% → 100%, plus a 1px `#B88765` underline growing from the centre, 160ms `ease-out`. Dot separators do not react.
- **Nav pill hover:** nothing. The pill itself is not interactive.
- **CTA hover:** background `#FFFFFF` → `#F2EDE8`, scale 1 → 1.02, 180ms `ease-out`.
- **CTA press:** scale → 0.98, 90ms.
- **`EN` open:** dropdown fades in and rises 6px, 160ms `ease-out`; **close:** fades out, 120ms.
- **Search open:** an inline field expands from the icon, width 0 → 240px, 220ms `cubic-bezier(0.22, 0.61, 0.36, 1)`, the icon staying anchored to the right; **close:** the reverse, 180ms.
- **Focus-visible (all):** 1px `#B88765` ring at 2px offset, no transition.

---

## 9. Responsive (below 640px)

- Gutters drop 48px → 20px. Hero height `100svh`, min 640px.
- Header: the centred nav pill is replaced by a 44×44px circular button (same translucent fill and 1px border) holding a hamburger, pinned to the right beside the search icon. The wordmark stays left at 14px / +0.20em. The `EN` label is dropped from the bar and moved into the opened menu. The open menu is a full-screen `#1A1715` panel at 96% opacity with the four links stacked at 20px, 28px apart, centred.
- Copy block top offset 174px → **14vh**. Headline 56px → **34px** (2.0× body), still mono 300, line-height 1.2, wrapping to 3–4 lines; the forced 2-line break is removed. Paragraph 17px → 16px, max-width 100%, still centred.
- CTA becomes full-width up to a 280px max, height 52px.
- Trust band: 40px → 24px from the bottom; it stacks into two centred rows — the five chips (24px each) on the first row, the two labels side by side at 13px on the second, 10px apart.
- Hero image: swap `object-position` to `center 62%` so the fingertip gap stays in frame; if using `<picture>`, supply a 3:4 crop centred on the meeting fingertips. Never letterbox it or add a border.
- §2 padding 160px → 88px; statement 34px → 22px.
- Nothing is dropped except the inline `EN` control.

---

## 10. Don'ts

- **Don't set the headline in the body grotesk.** Inter/Helvetica/Poppins in the headline is the single failure that kills this design. It is a light monospace with uniform advance widths, and the airiness comes from those advances — you cannot fake it with `letter-spacing` on a proportional sans.
- **Don't reach for Space Mono, Courier, or any typewriter mono.** The slab serifs and novelty terminals are wrong. Use JetBrains Mono / Roboto Mono / IBM Plex Mono at weight 300.
- **Don't bold the headline.** Weight 300, never ≥500. Don't uppercase it, don't apply a gradient text-fill, don't add a glow, a text-shadow, or an animated per-character reveal.
- **Don't ship the hero without generating the image.** No solid colour, no mesh gradient, no grey `div`, no stock photo of a handshake, two people, or a robot hand touching a human hand. The hands dissolve into nebula; there are no faces, no figures, no chrome.
- **Don't flood the image with a dark overlay.** It is already dark. Only the two edge gradients and a 25% corner vignette; the centre stays at full brightness.
- **Don't use a purple/violet "AI" gradient, a mesh blob, a dot grid, scan lines, a particle canvas, or a starfield.** The atmosphere is photographic and warm-neutral, not neon.
- **Don't build a full-width nav bar.** The nav is a floating translucent pill, centred on the viewport, physically separate from the wordmark — not a left-aligned link row next to the logo, and not opaque black. Keep the backdrop blur.
- **Don't make the nav sticky** and don't give it a solid background on scroll.
- **Don't vertically centre the hero copy.** It sits high — top edge at 19% of the viewport, CTA bottom at 52% — leaving the whole lower half to the photograph. Centring it puts the text on top of the hands.
- **Don't stretch the headline to the container width.** Exactly two centred lines, the second shorter than the first, max 880px.
- **Don't add a second CTA.** One white pill. No "Learn more" ghost button, no arrow icon inside the button, no shadow under it.
- **Don't let the accent escape.** `#B88765` appears on the star chips, the focus ring, and a link hover underline. Not on the CTA, not on the headline, not as a border, not as a "gradient from tan to terracotta".
- **Don't box the trust band.** No card, no border, no background pill — the labels and chips float directly on the photograph at the base of the fold.
- **Don't round the page corners or inset the hero on a coloured sheet.** No outer margin, no `border-radius` on the image, no letterboxing.
- **Don't add looping motion** — no bobbing, floating, pulsing, marquee, typewriter, or animated gradient. Restraint is the point: one load entrance, one slow parallax.
- **Don't scale the headline on scroll** or add a big zoom-out. The copy travels 60px and fades; the image travels 90px. That is all.
- **Don't use pure white for body text.** Warm off-white `#F2EDE8` at reduced opacity; white is reserved for the CTA fill and the star glyphs.
- **Don't drop the dot separators** between nav links, and don't put dots before the first or after the last link — exactly three.
- **Don't shrink the small type past the floor.** Trust labels and `EN` are 14px, never 12px or below; nav and the CTA label never below 14px.