Dark AI video editor hero

# Dark AI video editor hero — build prompt

A single-screen, full-bleed dark landing hero for an AI video-editing product. The entire page is one viewport: a photographic field of a hand reaching into a vertical shaft of warm light, with all type and chrome laid over it. Editorial, near-monochrome, one warm accent that lives only inside the photograph. Restrained motion.

No motion report accompanies this reference — only a single still. **Every motion value below is marked (inferred) and given as a range.** Do not invent exact durations, easings or spring parameters beyond the ranges stated.

## Structure

- Viewport target: 1440 × 866 CSS px. The page is **full-bleed** — no outer margin, no page background behind it, no rounded corners on the page itself, no max-width wrapper with visible edges.
- Page gutters: **48px** left and right. Chrome (logo, nav pills, glyph cluster, right caption) aligns to those gutters.
- Content column: a second alignment edge at **x = 184px**. The nav link list, the headline, the hero CTA and the bottom-left paragraph all start there. This offset left rail is the layout's signature — the logo sits alone in it.
- Grid: 12 columns, 24px gutters, inside the 1344px content box. Headline occupies cols 1–5 measured from the content edge; the photograph's focal light column lands at ~58% of viewport width.
- No cards, no panels, no containers with visible bounds. Everything floats on the image.

Sections, top to bottom (numbers reused in every section below):

1. **Background image field** — z-0, full-bleed, covers the entire 1440 × 866 viewport, behind everything.
2. **Top nav row** — y 40 → 80. Logo left; comma-separated link list at the content edge; two pills flush right.
3. **Hero copy block** — y 228 → 517. Three-line headline, then the CTA pill. Left-aligned at x = 184.
4. **Tool-glyph cluster** — y ~177 → 193, flush to the right gutter. Three or four 16px line icons in a row.
5. **Bottom meta row** — bottom-anchored, 48px from the bottom edge (y 770 → 818). Support paragraph left at x = 184; small caption right, ending at x = 1392, preceded by a tiny mark glyph.

## Scroll map

| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Background image field | 866px (full layer) | 1.00 | 0 | static (with on-load settle) |
| 2 | Top nav row | 40px band | 0.05 | 0 | static (entrance on load) |
| 3 | Hero copy block | 289px band | 0.33 | 0 | static (entrance on load) |
| 4 | Tool-glyph cluster | 16px band | 0.02 | 0 | static (entrance on load) |
| 5 | Bottom meta row | 48px band | 0.06 | 0 | static (entrance on load) |

**Total page height: 866px = 1.00 viewport. The document does not scroll.** There is no scroll-linked motion, no pin, no stack. Do not add sections below the fold, and do not add a scroll cue, chevron or "scroll" label — the composition ends at the fold on purpose.

## Spacing

- Page padding: `48px` inline, `40px` top, `48px` bottom.
- Nav row: logo mark at x = 48; gap from logo to the link list is `~120px` (the list starts at the content edge, 184). Links separated by commas with a `6px` gap on either side of the comma. Gap between the two right-hand pills: `12px`. Pill padding: `0 24px`, height `40px`.
- Nav bottom (80) → headline block top (228): `148px`.
- Headline → CTA pill: `32px`.
- CTA pill: `170 × 56px`, label centred, horizontal padding `32px`.
- Bottom meta row sits `48px` above the bottom edge; left paragraph and right caption share one baseline grid, both two lines tall.
- Glyph cluster: `12px` between icons, `~97px` below the nav row's bottom.
- Vertical hairline rail at `x = 72px`, running y 140 → 620 (inferred, very faint).
- Rhythm: the page has exactly three horizontal bands — nav at the top, copy at 26–60% height, meta pinned to the bottom — with a large, deliberately empty middle-right where the photograph does the work. Do not fill that void.

## Type

Family class: **neo-grotesk** (Helvetica/Neue Haas lineage) — even widths, closed apertures, no quirks. Free stand-in: **Inter Tight** for the display line, **Inter** for UI and running text. One family throughout, no pairing, no mono.

Body anchor: **16px** running text at 1440. All other levels stated as a multiple of it.

| Level | Multiple | Size | Line-height | Tracking | Weight | Case | Colour | Max measure |
|---|---|---|---|---|---|---|---|---|
| Headline (3) | 4.0× | 64px | 1.05 (67px) | −0.02em | 400 | sentence | `#F6F1EB` | 560px, wraps to 3 lines (~16–20 chars/line) |
| Support paragraph (5, left) | 1.0× | 16px | 1.50 (24px) | 0 | 400 | sentence | `rgba(246,241,235,0.78)` | 480px (~60ch), exactly 2 lines |
| Caption (5, right) | 0.8× | 13px | 1.45 (19px) | 0 | 400 | sentence | `rgba(246,241,235,0.62)` | 240px (~34ch), exactly 2 lines |
| Nav link (2) | 0.875× | 14px | 1.2 | +0.06em | 500 | UPPERCASE | `rgba(246,241,235,0.72)` | — |
| Pill / CTA label (2, 3) | 0.875× | 14px | 1.0 | +0.06em | 500 | UPPERCASE | `#F6F1EB` | — |

Placeholder copy, by role and length:
- Headline: 6–8 words that break onto **three** lines, last line short (one word). Pattern: "[capability], redefined for the next generation."
- Nav: four links, 1–3 words each, comma-separated as a single sentence-like list.
- Pills: "LOG IN" (2 words max), "GET STARTED" (2 words).
- CTA: same 2-word label as the primary pill.
- Support paragraph (5): 18–22 words, chosen so it wraps to exactly two lines at 480px.
- Caption (5): 10–12 words, wrapping to exactly two lines at 240px.

The headline must stay at weight 400. At 64px a regular grotesk reads as the display face here; 600+ destroys it.

## Colour

| Hex | Role |
|---|---|
| `#0C0A0A` | Dominant surface. Page background and the crushed left ~45% of the photographic field. Covers roughly 60% of the pixels. |
| `#370C05` | Deep umber. The transition mid-tone where black meets the glow, and the shadowed side of the hand. Structural, never a UI fill. |
| `#671805` | Burnt amber. Outer falloff of the light column and the deep right-hand wash. Structural. |
| `#F89838` | **The single accent.** The lit body of the vertical shaft and the rim light on the fingers. |
| `#FDD469` | Accent highlight — only the hottest core of the shaft and the sharpest knuckle rims. Never a flat fill. |
| `#F6F1EB` | Warm off-white. All type and icon strokes, at 100% / 78% / 72% / 62% opacity by level. |

Accent rule, strictly: `#F89838` and `#FDD469` exist **only inside the photograph**. No orange button, no orange text, no orange border, no orange logo, no orange glow div behind the headline. The one permitted UI appearance is a `2px` `#F89838` focus ring on keyboard focus. Everything else is off-white on near-black.

Scrims (needed for legibility, part of the colour system):
- Left scrim: `linear-gradient(90deg, #0C0A0A 0%, rgba(12,10,10,0.92) 28%, rgba(12,10,10,0.35) 48%, transparent 62%)`.
- Bottom scrim: `linear-gradient(180deg, transparent 0%, rgba(12,10,10,0.75) 100%)` over the lowest 180px.
- Top scrim: `linear-gradient(180deg, rgba(12,10,10,0.55) 0%, transparent 100%)` over the top 140px.

## Surface

- Borders: `1px` only, colour `rgba(246,241,235,0.14)`. Used on the right-hand pill and the hero CTA. The hairline rail is `1px rgba(246,241,235,0.07)`.
- Radii: pills are fully rounded (`999px`) — the two nav pills (40px tall) and the hero CTA (56px tall). Nothing else has a radius. The page has square corners.
- Fills: left nav pill `rgba(246,241,235,0.20)`, no border. Right nav pill `rgba(246,241,235,0.08)` + hairline border. Hero CTA `rgba(12,10,10,0.72)` + hairline border, with `backdrop-filter: blur(12px)` on all three.
- **No shadows anywhere.** No `box-shadow`, no elevation, no glow behind text. All light in the composition comes from inside the photograph. A drop shadow on a pill immediately kills it.
- Optional film grain overlay at ≤3% opacity, `mix-blend-mode: overlay`. Anything heavier looks like a filter.

## Imagery

One photograph, and nothing else.

**Image 1 — the field (section 1).** A bare human hand and forearm entering from the right edge of the frame, palm down, fingers extended leftward and slightly downward, reaching toward a narrow vertical shaft of warm light. The shaft runs floor-to-ceiling at ~58% of the viewport width, roughly 30px wide at its hot core with a soft bloom either side — read it as light spilling through a door left ajar in a black room. The light rims the knuckles, the back of the hand and the top edges of the fingers in pale gold, falls off through amber into umber along the forearm, and dies completely before the right edge. No background detail at all: no walls, no props, no horizon. Aspect ratio as used: fills 1440 × 866 (≈16:10) with `object-fit: cover`, `object-position: 60% 45%`. Fingertips land at x ≈ 60%, y ≈ 42% of the viewport — just clear of the headline's right edge. Treatment: single warm key, extreme contrast, clean (not grainy), no colour in the shadows other than the umber the light itself makes.

Vector marks, not images: the logo (a compact 32 × 24 monogram, off-white, left gutter); the three-to-four glyphs in section 4 (16 × 16, `1.25px` strokes — a crosshair/plus, a circular refresh arrow, an X) ; the small 10px mark preceding the caption in section 5.

## Motion

### 1 — Background image field
- **kind** — static (one on-load settle; no scroll-linked behaviour, the page does not scroll)
- **what moves** — the photographic layer as a whole, and separately the light shaft's luminance
- **from → to** — layer: `scale(1.06)`, `opacity 0` → `scale(1.00)`, `opacity 1`. Shaft: an ambient loop between `opacity 0.92` and `1.00` (inferred) on the light-column layer only
- **range** — entrance, on page load, no trigger element. Duration 1600–2400ms (inferred, not measured); easing a long ease-out such as `cubic-bezier(0.16, 1, 0.3, 1)` (inferred). Ambient loop period 6–9s (inferred), `ease-in-out`, infinite alternate
- **reduced motion** — renders at `scale(1)`, `opacity 1` immediately; no ambient loop

### 2 — Top nav row
- **kind** — entrance (once, on load)
- **what moves** — logo, link list, two pills
- **from → to** — `opacity 0`, `translateY(-8px)` → `opacity 1`, `translateY(0)`
- **range** — triggered on load, starting 200–350ms after the image layer begins (inferred). Duration 400–600ms (inferred); easing ease-out; stagger 40–60ms in DOM order, left to right
- **reduced motion** — appears at final state, no transform

### 3 — Hero copy block
- **kind** — entrance (once, on load)
- **what moves** — the three headline lines individually, then the CTA pill
- **from → to** — each headline line: `opacity 0`, `translateY(16px)` → `opacity 1`, `translateY(0)`, clipped by a per-line `overflow: hidden` wrapper so the line rises out of its own box. CTA pill: `opacity 0`, `translateY(12px)` → `opacity 1`, `translateY(0)`
- **range** — on load, beginning 350–500ms in (inferred). Duration 600–800ms per line (inferred); easing `cubic-bezier(0.22, 1, 0.36, 1)` (inferred); stagger 80–110ms between lines; CTA follows the last line by 120–160ms
- **reduced motion** — all lines and the CTA fade only, 150ms, no translate and no clip

### 4 — Tool-glyph cluster
- **kind** — entrance (once, on load)
- **what moves** — the three/four icons
- **from → to** — `opacity 0` → `opacity 0.6`; no transform
- **range** — on load, after the nav, 700–900ms in (inferred). Duration 400–500ms (inferred); stagger 60–80ms right to left
- **reduced motion** — appears at `opacity 0.6` immediately

### 5 — Bottom meta row
- **kind** — entrance (once, on load)
- **what moves** — left paragraph block, right caption block (each as a whole, not per line)
- **from → to** — `opacity 0`, `translateY(10px)` → `opacity 1`, `translateY(0)`
- **range** — on load, last in sequence, 900–1100ms in (inferred). Duration 500–700ms (inferred); easing ease-out; 80ms stagger between the two blocks
- **reduced motion** — fade only, 150ms

The whole load sequence should resolve inside ~2s. Nothing on this page reacts to scroll: no parallax on the photograph, no fade on the nav, no progress bar.

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

- Nav link hover: colour `rgba(246,241,235,0.72)` → `#F6F1EB`, 160ms ease. No underline, no colour shift to orange.
- Nav link press: `opacity 0.7`, 80ms.
- Pill hover (left, filled): fill `rgba(246,241,235,0.20)` → `rgba(246,241,235,0.30)`, 180ms ease.
- Pill hover (right, outlined) and hero CTA hover: border `rgba(246,241,235,0.14)` → `rgba(246,241,235,0.30)`, fill lightens by 4% alpha, 180ms ease. No scale, no lift, no shadow.
- Pill press: `scale(0.985)`, 90ms.
- Glyph hover: `opacity 0.6` → `1`, 140ms.
- Focus-visible: `2px` `#F89838` ring, `3px` offset, no transition.
- Cursor: default arrow. No custom cursor, no magnetic buttons.

## Responsive (below 640px)

- Gutters drop from 48px to **20px**; the 184px content edge collapses to the gutter — everything left-aligns at 20px. The hairline rail is removed.
- Headline: 64px → **36px**, line-height 1.1, tracking −0.015em, still three lines, max-width 100%.
- Nav: link list is dropped entirely; keep logo left, the primary pill right, and a 20px hamburger. Pill height 40px stays, label stays 14px.
- Hero copy block moves up: top offset 148px → **96px** below the nav. CTA full-width-capped at 200px, height 52px.
- Photograph: `object-position` shifts to `72% 40%` so the light shaft and fingertips stay in frame; the left scrim becomes a vertical one — `linear-gradient(180deg, rgba(12,10,10,0.9) 0%, rgba(12,10,10,0.2) 55%, rgba(12,10,10,0.85) 100%)`.
- Section 4 (glyph cluster) is dropped.
- Section 5: right caption is dropped; the left paragraph stays at 16px, full width, three lines, still 32px above the bottom edge.
- Viewport height: `100svh`, min-height 640px. The composition must still end at the fold — no scroll.

## Don'ts

- **Don't render the mockup's black mat.** No inset page, no rounded page corners, no coloured sheet behind the design. The viewport is the design.
- **Don't put the accent on a button.** The single most likely failure: an orange `#F89838` "Get Started" pill. Both nav pills and the CTA are neutral glass on near-black. Orange stays inside the photograph.
- **Don't reach for the AI-product palette** — no violet/indigo gradient, no cyan, no gradient text, no aurora blob behind the headline, no animated mesh.
- **Don't centre the hero.** It is left-aligned at an offset rail with a deliberately empty right-of-centre void. Centring collapses the composition.
- **Don't bold the headline.** 400 weight. And don't tighten tracking past −0.025em or letter-space it positively.
- **Don't use a "techy" display face** — no Space Grotesk, no mono headline, no variable-width flexing. Plain neo-grotesk only.
- **Don't add glassmorphism cards, bento tiles, feature grids, logo clouds, or a mock editor UI.** There is one photograph and five text elements. Additions read as a different, worse page.
- **Don't add shadows or glows to text and buttons.** Legibility comes from the scrims.
- **Don't use `#000000` or `#FFFFFF`.** Background is `#0C0A0A`, type is warm off-white `#F6F1EB`.
- **Don't animate the headline word-by-word, character-by-character, or with a typewriter/scramble effect.** Three whole lines, masked, rising once.
- **Don't add scroll behaviour of any kind** — no parallax, no pinned hero, no "scroll to explore", no sticky nav shrink. The page is one viewport.
- **Don't let the photograph go `object-fit: contain`, letterbox, or sit in a rounded container.** It bleeds to all four edges under the type.
- **Don't drop nav or button labels below 14px**, and don't drop the caption below 13px, however small they look in the reference.
- **Don't set the nav links as evenly-spaced items.** They are a comma-separated list, read as one line of editorial text — that comma is the detail that makes the nav.