Perplexity AI — Cinematic Hero

# Cinematic dusk hero — full-bleed single-screen landing page

**Read this first.** No Motion report, motion strip, or page composite was supplied with this reference — only one still of the first (and only) screen. Every measurement below is read off that still and is marked **(inferred)** in the Motion section; structural values in Structure/Spacing/Type/Colour are given as design decisions derived from the still and should be treated as the spec. Anything a report would normally measure — exact durations, easings, stagger — is written as **not measured** with a range. Do not invent tighter numbers.

This page is **one viewport tall and does not scroll.** It is a single full-bleed photograph with six overlay zones composed on top of it. Build it that way; do not append sections.

---

## 1. Structure

Design canvas: **1440 × 900** (the still is 1440 × 868 — treat the page as `100vh`, not a fixed 900px).

- **Container:** none. The photograph is full-bleed, edge to edge, `100vw × 100vh`, `overflow: hidden`. There is no max-width wrapper and no centred content column.
- **Alignment rails** (all overlay text hangs off three vertical rails, not a visible grid):
  - **Rail A — 64px** from the left edge. Headline, subhead, hairline, footer caption.
  - **Rail B — 33% / 475px.** Footer's second item only.
  - **Rail C — 61% / 876px.** CTA button and the narrative paragraphs. Their block is **500px wide**, ending at 1376px, leaving a 64px right margin that mirrors rail A.
  - Equivalent 12-column reading: 64px side padding, 24px gutters, 87px columns — rail B ≈ column 5, rail C ≈ column 8, narrative block spans columns 8–12.
- **Sections, top to bottom** (z-order in parentheses):
  1. **Backdrop** — full-bleed photograph + vignette + two gradient scrims (z-0)
  2. **Floating nav** — centred cluster, mark + 4 links, no bar (z-30)
  3. **Hero title block** — headline + subhead, bottom-left on rail A (z-20)
  4. **Hairline divider** — 1px rule under the title block, rail A (z-20)
  5. **Action + narrative column** — outline pill button, then two paragraphs, rail C (z-20)
  6. **Footer row** — two items on rails A and B, bottom edge (z-20)

Sections 2–6 are absolutely positioned siblings over section 1. They never reflow each other.

---

## 2. Scroll map

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Backdrop | 900px | 1.00 | 0 | static (load entrance only) |
| 2 | Floating nav | 48px band, top at 32px | 0.05 | 0 | static (load entrance only) |
| 3 | Hero title block | 148px, top at 500px | 0.16 | 0 | static (load entrance only) |
| 4 | Hairline divider | 1px, at y = 631px | 0.00 | 0 | static (load entrance only) |
| 5 | Action + narrative column | 300px, top at 545px | 0.33 | 0 | static (load entrance only) |
| 6 | Footer row | 20px, baseline at y = 852px | 0.02 | 0 | static (load entrance only) |

**Total page height: 900px = 1.00 viewport. Total scroll: 0.** Nothing pins, nothing stacks, nothing is scroll-linked. `body { overflow: hidden }` is a legitimate implementation here.

---

## 3. Spacing

- Page padding: **64px left and right**, **32px top**, **48px bottom**.
- Section 2 (nav): cluster vertically centred at **y = 55px**. Mark sits **28px** left of the first link. Gap between links: **28px**. Cluster is horizontally centred on the page.
- Section 3: headline baseline at **y = 533px**; subhead baseline at **y = 590px** — a **57px** baseline step, which is tighter than either element's own line-height and is the point of the block. No margin between them beyond that.
- Section 4: hairline at **y = 631px** — **41px** below the subhead baseline.
- Section 5: button top at **y = 545px**, height **56px**, width **176px**. First paragraph's cap-line at **y = 658px** — **57px** below the button's bottom edge. Paragraph-to-paragraph gap: **20px** (on top of the 28px line-height, so 48px baseline to baseline across the break).
- Section 6: baseline **48px** above the bottom edge.
- **Rhythm:** the whole composition is bottom-weighted. The top 55% of the canvas is empty photograph; every text element lives in the lower 45%, and the two text columns (rail A and rail C) are deliberately *not* baseline-aligned with each other — the right column starts lower and runs longer. Do not correct this into a tidy two-column row.

---

## 4. Type

One family for everything. Class: **neo-grotesk, light weights, open apertures, slightly negative tracking at display sizes.** Free stand-in: **Inter** (variable, 300–400). Alternative: **Instrument Sans**. Do not mix in a second family.

| Level | Section | Size | Line-height | Tracking | Weight | Max line length |
|---|---|---|---|---|---|---|
| Headline | 3 | 64px | 1.05 (67px) | −0.02em | 300 | one line, ≤ 18 characters |
| Subhead | 3 | 44px | 1.15 (51px) | −0.01em | 300 | one line, ≤ 26 characters |
| Nav link | 2 | 15px | 1.2 | 0 | 400 | 1–2 words each |
| Button label | 5 | 15px | 1.0 | +0.02em | 400 | 2 words |
| Body paragraph | 5 | 16px | 1.75 (28px) | 0 | 400 | **500px ≈ 62 characters**, 2–3 lines per paragraph |
| Footer caption | 6 | 14px | 1.4 | +0.01em | 400 | ≤ 40 characters |

Nothing on this page is bolder than 400. Nothing is uppercase. Nothing is italic.

**Placeholder copy by role:** nav — 4 links, 1–2 words each. Headline — product name, 1–2 words. Subhead — positioning line, 3–4 words, ends in a full stop. Button — verb + noun, 2 words. Paragraph 1 — 2 lines on the problem. Paragraph 2 — 3 lines on the product, ending in two short fragments. Footer left — an aphorism, 5–7 words. Footer rail B — name + year.

---

## 5. Colour

The photograph covers 100% of the surface, so the palette is the photograph's grade plus one type colour.

- **#4C6485 — dominant, ~40% of surface.** Mid slate-blue. The dusk sky and the spiral of light above the horizon. This is also the page's `background-color` behind the image, so a slow-loading photo never flashes white or black.
- **#15191A — structural dark, ~35%.** Near-black with a green cast. The vignette, both scrims, the dark landmass at the right edge, the shadowed foreground bottom-left. All scrim gradients are built from this, never from `#000`.
- **#7787A8 — ~15%.** Lighter periwinkle haze: the horizon band and the sea of cloud.
- **#B8B7D5 — ~10%.** Pale lavender. The flowering field in the foreground and the brightest filaments of the spiral. The lightest thing in the photograph.
- **#F4F4F8 — type only (inferred).** Near-white, used at graded opacities: headline **100%**, subhead **88%**, body **82%**, nav links **78%**, button label **100%**, footer **62%**.

**There is no chromatic accent.** The accent is *luminance*: full-opacity **#F4F4F8**. It is allowed in exactly three places — the headline, the CTA's 1px border and label, and hover states. Nothing else on the page reaches full white. Do not introduce a brand hue.

**Scrims** (all three sit above the photo, below the text):
```
top:      linear-gradient(180deg, rgba(21,25,26,.55) 0%,  rgba(21,25,26,0) 22%)
bottom:   linear-gradient(0deg,   rgba(21,25,26,.72) 0%,  rgba(21,25,26,.25) 26%, rgba(21,25,26,0) 52%)
vignette: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(21,25,26,.55) 100%)
```

---

## 6. Surface

- **Borders:** one. The CTA pill, `1px solid rgba(244,244,248,.45)`. The hairline in section 4 is `1px` at `rgba(244,244,248,.22)`.
- **Radii:** the CTA is `999px` (true pill, 56px tall). **Everything else is 0.** No cards, no rounded image corners, no rounded nav pill at rest.
- **Shadows:** none. Zero `box-shadow`, zero `text-shadow`, zero `backdrop-filter` at rest. Every bit of separation between type and photograph comes from the two scrims and the vignette. If your text is hard to read, deepen the bottom scrim — do not add a blur panel or a text shadow.
- **Fills:** the CTA is fully transparent at rest. There is no filled surface anywhere on the page.

---

## 7. Imagery

**One image. It is the entire design.**

- **Subject:** a lone figure in a long dark robe, seen from behind at middle distance, standing on the crest of a hillside that is blanketed in low pale-lavender flowering scrub. The hill falls away to the left; beyond it a sea of cloud fills the valley to a soft horizon. Above the horizon, a vast slow spiral of thin light trails turns in the dusk sky — concentric, off-centre, like a long-exposure of star trails but flatter and wider. A small dark rock outcrop breaks the flower field on the left; a darker landmass anchors the right edge.
- **Treatment:** long lens, compressed depth. Low contrast, heavy atmospheric haze, desaturated blue-violet grade. No visible sun, no warm light anywhere. Fine film grain. Highlights roll off — nothing clips to white except the thinnest spiral filaments.
- **Aspect ratio:** shot at **16:10 or wider**, delivered as `object-fit: cover` on a `100vw × 100vh` element.
- **Art direction / safe zones:** the figure sits at **50% width, 45% height** — dead centre horizontally, above the midline. Horizon at **38% height**. The lower-left third must stay soft and low-detail so the headline reads on it. The top 22% must stay light enough that the nav's top scrim is subtle rather than a black bar.
- Do not crop the figure out, and do not let it collide with the rail-C text column at 61% width.

---

## 8. Motion

Restrained by design. **There are no scroll-linked, pinned, or stacked behaviours anywhere on this page — the page does not scroll.** Every movement below is an **entrance**, fired once on load, on a single shared timeline. All durations, easings and stagger values are **not measured**; ranges are given. Easing throughout: a decelerating ease-out with no overshoot and no bounce (not measured — any standard ease-out is correct). Nothing overlaps with a spring.

### Section 1 — Backdrop
- **kind:** entrance (inferred)
- **what moves:** the photograph itself; the three scrims are static from frame one.
- **from → to:** `opacity 0 → 1`, `scale 1.06 → 1.00`, transform-origin 50% 45% (on the figure).
- **range:** trigger is page load / image decode, not scroll. Duration **not measured — 1400–2200ms**. No stagger (single element). It begins first; everything else starts on top of it.
- **reduced motion:** no scale. `opacity 0 → 1` over 200ms, or render at full opacity immediately.

### Section 2 — Floating nav
- **kind:** entrance (inferred)
- **what moves:** the mark and the four links, as one group.
- **from → to:** `opacity 0 → 1`, `translateY −8px → 0`.
- **range:** load-triggered, starting **not measured — 200–400ms** after the backdrop begins. Duration **not measured — 500–700ms**. Stagger across the five items: **not measured — 30–60ms**, left to right.
- **reduced motion:** opacity only, no translate, no stagger.

### Section 3 — Hero title block
- **kind:** entrance (inferred)
- **what moves:** headline line, then subhead line.
- **from → to:** each line `clip-path: inset(0 0 100% 0) → inset(0 0 0% 0)` (a bottom-up wipe) combined with `translateY 16px → 0`; opacity stays at its final value throughout — the wipe does the reveal, not a fade.
- **range:** load-triggered, starting **not measured — 400–700ms** after the backdrop begins. Duration per line **not measured — 800–1100ms**. Stagger headline → subhead: **not measured — 80–140ms**.
- **reduced motion:** no clip, no translate. Both lines fade `opacity 0 → 1` together over 200ms.

### Section 4 — Hairline divider
- **kind:** entrance (inferred)
- **what moves:** the 1px rule.
- **from → to:** `transform: scaleX(0) → scaleX(1)`, `transform-origin: left`. Opacity constant at the 0.22 value.
- **range:** load-triggered, begins as the subhead's wipe finishes. Duration **not measured — 700–1000ms**.
- **reduced motion:** rendered at full width immediately.

### Section 5 — Action + narrative column
- **kind:** entrance (inferred)
- **what moves:** the CTA pill, then paragraph 1, then paragraph 2 — three items, one stagger group.
- **from → to:** each `opacity 0 → 1`, `translateY 12px → 0`. The CTA's border animates with it (no separate draw-on).
- **range:** load-triggered, starting after section 3's headline lands. Duration per item **not measured — 600–900ms**. Stagger **not measured — 90–150ms**, top to bottom. Paragraphs move as whole blocks — **do not** split them into per-line or per-word reveals.
- **reduced motion:** opacity only, all three at once, 200ms.

### Section 6 — Footer row
- **kind:** entrance (inferred)
- **what moves:** both footer items together.
- **from → to:** `opacity 0 → 0.62` (its resting value). No translate.
- **range:** load-triggered, last on the timeline. Duration **not measured — 500–800ms**. No stagger.
- **reduced motion:** rendered at resting opacity immediately.

### Interaction transitions (not part of the load choreography)
- **Nav link hover:** colour `rgba(244,244,248,.78) → 1.0` over 150–200ms. No underline, no translate, no background.
- **CTA hover:** background `transparent → rgba(244,244,248,.10)`, border `.45 → .70` opacity, over 200–250ms. The label does not move and the pill does not scale.
- **CTA press:** `scale 1 → 0.98`, 80–120ms, returning on release.
- **Focus (keyboard):** 2px outline in `#F4F4F8` at 2px offset, on nav links and the CTA. Never remove it.
- **Cursor:** default. No custom cursor, no magnetic button.

---

## 9. Responsive (below 640px)

- Photograph switches to a **portrait or square crop** with the figure repositioned to **50% width / 32% height**, so the lower two-thirds is clear for text. Bottom scrim strengthens to `rgba(21,25,26,.82)` at the base and extends to 65% height.
- Page padding: **24px** left and right, **20px** top, **32px** bottom.
- Section 2: the mark stays, the four links collapse to a single text toggle ("Menu") on the right of the same row. The row becomes left-mark / right-toggle, no longer a centred cluster. Opened menu is a full-screen `#15191A` panel at 0.96 opacity with the four links stacked at 24px, 300 weight, 20px gap — not a dropdown, not a sheet with a radius.
- Section 3: headline **34px / 1.1**, subhead **24px / 1.2**, baseline step **32px**. Both stay on rail A (now 24px).
- Section 4: hairline spans the full content width.
- Section 5: **stacks below section 3**, on the same left rail — rail C disappears entirely. Button first, full-width capped at 240px, height 52px. Paragraphs at **15px / 1.7**, full content width. Gap from hairline to button: 32px.
- Section 6: stacks to two lines, both on the left rail, 12px apart, 13px type. Rail B is abandoned.
- Everything still fits one screen only if the viewport is tall; **allow this one breakpoint to scroll** rather than shrinking type below 15px for body copy.

---

## 10. Don'ts

- **Don't add sections.** No features grid, no logo cloud, no testimonial, no pricing table, no second screen. This is a single-viewport page and its whole argument is the restraint. If you feel the page is "unfinished", that is the design working.
- **Don't add a scroll cue** — no chevron, no bouncing arrow, no "scroll" label, no mouse-wheel glyph. There is nothing below.
- **Don't put the text on a panel.** No card, no glassmorphic blur box, no semi-transparent rounded rectangle behind the headline or the paragraphs. Type sits directly on the photograph; the scrims are the only aid.
- **Don't add text-shadow or drop-shadow.** Anywhere. If contrast fails, deepen the scrim.
- **Don't centre the hero.** The headline is bottom-left on rail A and the prose is on rail C at 61%. A centred hero with the paragraph beneath it is the default this design exists to avoid.
- **Don't fill the CTA.** It is a transparent 1px outline pill. Not a white button, not a gradient, not a brand-coloured button, not a button with an arrow icon.
- **Don't introduce an accent colour.** No violet, no teal, no electric blue "AI" hue. The brightest thing on the page is white type and the light in the sky.
- **Don't go above weight 400.** No semibold headline, no bold nav, no uppercase letterspaced eyebrow. There is no eyebrow on this page at all.
- **Don't use a serif** for the headline, and don't pair two families.
- **Don't build the nav as a full-width bar** with a background, a bottom border, or a sticky blur. It is a free-floating centred cluster with nothing behind it but the top scrim.
- **Don't right-align the paragraphs.** They sit in a right-hand column but are left-aligned and ragged-right.
- **Don't align the two text columns to a shared baseline.** The right column starting lower than the headline is intentional.
- **Don't animate per-character or per-word.** Lines wipe, blocks fade. Split-text on the paragraphs would wreck the tone.
- **Don't loop anything.** No ambient Ken Burns drift, no parallax on mouse-move, no floating particles, no animated gradient in the sky. The backdrop scales once on load and then holds.
- **Don't grade the photo up.** Do not add saturation, contrast, or a warm sunset tint. Hazy, cold, low-contrast, slightly underexposed is the whole look.
- **Don't stretch or letterbox the photograph,** and don't round its corners or inset it — it is full-bleed to all four edges, square corners, no page margin.
- **Don't use `#000`** for scrims or type shadows; every dark is `#15191A`.
- **Don't let line length run past 62 characters** in the narrative column, even at wider viewports — the column stays 500px, it does not grow.