Voyager2 — Dark post carousel

# Dark 3D coverflow post carousel — rebuild prompt

A single-screen, full-bleed dark landing page: a thin nav, a centred high-contrast serif headline, and a five-card 3D "coverflow" carousel of abstract fluid-art images that bleeds off both edges and runs to the bottom of the viewport. The page does **not** scroll vertically. All motion is horizontal, driven by wheel/drag/keys, and restrained.

There is one capture and it is one viewport of a live page. No motion report was supplied, so **every motion number below is (inferred)** from the still, and durations/easings are given as ranges where they cannot be derived from the frame. Layout, type and colour numbers are derived from the capture's proportions against a 17px body anchor.

---

## 1. Structure

Reference viewport: **1440 × 1080** (the capture's aspect, ~1.33:1). `html, body { height: 100%; overflow: hidden; }`.

- **No max-width container.** The page is edge-to-edge. Nav uses a 40px left/right gutter; the carousel uses none and is deliberately clipped by the viewport edges.
- Single column, three stacked horizontal bands, all horizontally centred on the viewport (not on a grid).

Sections, top to bottom:

1. **Nav bar** — 88px tall, transparent, overlaying the page. Left: wordmark + short rule. Right: five text links.
2. **Headline block** — centred serif headline, 3 lines, 640px max width.
3. **Post carousel** — 3D perspective track, 5 cards visible, centre card upright, neighbours rotated away in Y, outermost pair cut by the viewport edges.

Vertical placement at 1440 × 1080:

| Element | y |
|---|---|
| Nav items, optical centre | 44 |
| Headline line 1, cap top | 250 |
| Headline block bottom | 459 |
| Centre card top edge | 536 |
| Card row centre axis (all cards) | 802 |
| Centre card bottom edge | 1068 (12px above the viewport bottom) |

---

## 2. Scroll map

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Nav bar | 88px (fixed overlay) | 0.08 | 0 | static (plays one entrance on load) |
| 2 | Headline block | 211px | 0.20 | 0 | static (plays one entrance on load) |
| 3 | Post carousel | 532px band, bleeds to the bottom edge | 0.49 | 0 vertical; input-linked horizontally | scroll-linked (horizontal axis only) |

**Total page height: 1080px = 1.00 viewport. The document does not scroll vertically.** Wheel delta, horizontal drag and ←/→ are all mapped onto the carousel's horizontal index. There is no second section, no footer, no "scroll" cue.

---

## 3. Spacing

- Nav: `height: 88px; padding: 0 40px;` items vertically centred.
- Wordmark → rule gap: **24px**. Rule: 48 × 2px.
- Nav link gap: **40px** (measured 42; use 40).
- Nav bar bottom → headline cap top: **160px**.
- Headline: 3 lines at `line-height: 0.88` (70px per line), block 211px tall, `max-width: 640px`, margin-inline auto.
- Headline block bottom → centre card top: **80px**.
- Carousel centre-to-centre offsets: **±408px** (centre → first neighbour), **±662px** (centre → outer pair). The rendered gap between the centre card and a neighbour lands at ~68px because of the foreshortening.
- Card internals: `padding: 0 32px 64px;` — the title block sits 64px above the card's bottom edge.
- Centre card bottom → viewport bottom: **12px**.

Rhythm: three bands at roughly 8% / 20% / 49% of viewport height, separated by 15% and 7% of pure black air. There is no other vertical rhythm — the page is one screen and every spacing decision above is a one-off, not a scale.

---

## 4. Type

Two families only.

- **Display serif** — high-contrast transitional/didone, sharp bracketed serifs, thin hairlines, generous ball terminals. Free stand-in: **Playfair Display** (400–500). Alternates: Instrument Serif, Bodoni Moda. Used for the headline and every card title.
- **UI grotesk** — neutral, slightly tight, no personality. Free stand-in: **Inter**. Alternates: Archivo, Space Grotesk. Used for the wordmark and nav only.

Body anchor: **17px** at 1440. Every other level is a ratio of it.

| Level | Ratio | Size | Line-height | Letter-spacing | Weight | Family | Max line length |
|---|---|---|---|---|---|---|---|
| Headline | 4.7× | **80px** | 0.88 (70px) | −0.015em | 400 | display serif | 640px ≈ 26 ch, forced to 3 lines |
| Card title | 1.76× | **30px** | 1.15 | −0.005em | 400 | display serif | 300px ≈ 22 ch, 2 lines, centred |
| Wordmark | 1.18× | **20px** | 1.0 | −0.01em | 700 | grotesk | one word |
| Nav link | 1.06× | **18px** | 1.0 | 0 | 400 | grotesk | one word |
| Body / utility | 1.0× | **17px** | 1.5 | 0 | 400 | grotesk | 68 ch |
| Meta / caption (if needed) | 0.76× | **13px** | 1.4 | 0.01em | 400 | grotesk | 40 ch |

Sentence case everywhere. **No uppercase, no letterspaced labels, no eyebrow.**

Placeholder copy by role:
- Wordmark: one word, 7–9 characters.
- Nav: five single-word links, 5–9 characters each.
- Headline: 8–10 words breaking onto exactly three lines, each line 18–22 characters, a declarative statement about a collection of posts.
- Card titles: 4–6 words each, breaking onto exactly two lines.

---

## 5. Colour

| Hex | Role |
|---|---|
| **#010000** | Page background. Covers ~70% of the surface — everything that is not a card image. Near-black with a hair of red in it; it is **not** `#000000` and **not** `#0A0A0A`. |
| **#FFFFFF** | Wordmark, rule, headline, card titles. The only foreground colour on the page chrome. |
| **#A6A8A8** | Nav links at rest, and any secondary/meta text. |
| **#292827** | Card placeholder fill before an image loads, and the only permissible hairline colour if a divider is ever needed. |
| **#E71709** | The **single accent**. Allowed in exactly three places: the 1px underline that grows under a hovered nav link, the focus ring, and the active-index marker if one is added. Never as a fill, never as text, never behind the nav. |
| **#96690A** | Not a UI colour. It is the ochre pigment inside the centre card's photograph. Sample it for image selection; never paint anything with it. |

The saturated colour on this page — red, gold, teal, magenta — lives **entirely inside the photographs**. The interface itself is black, white and one grey.

---

## 6. Surface

- **No borders, no strokes, no outlines** on cards or nav. The only drawn line on the page is the 48 × 2px white rule beside the wordmark.
- Corner radius: **cards 20px**. The page itself has no radius — it is the viewport.
- **No shadows and no glows.** A drop shadow on `#010000` reads as a grey smudge. Depth is conveyed by the 3D transform plus a black dim overlay, nothing else.
- Dim overlay: a `#010000` layer inside each card, above the image, below the title, with opacity as a function of distance from the active index — 0% at centre, ~35% at ±1, ~62% at ±2, ~80% at ±3.
- No blur, no glass, no backdrop-filter, no noise or grain texture.

---

## 7. Imagery

Six to eight images in the deck (five visible at a time). All **3:4 portrait**, `object-fit: cover`, full-bleed inside the card's 20px radius.

All of them are **macro photography of fluid media** — ink in water, poured paint, oil on stone, pigment on a wet surface — shot close enough that scale is unreadable and the result looks planetary. Shared treatment: deep black fields, one or two saturated pigments, hard specular highlights, no visible brush or hand, no human subject, no product. Crucially, each frame's **darkest region sits at its outer edges**, so the card's corners dissolve into `#010000` and only the bright core of the image reads as a rectangle.

The deck as seen, left to right:

1. **Filament black** — near-black field with thin looping neon wire-trails in acid green and orange, like a light-painting exposure. Almost no luminance; at ±2 it is barely more than a shape.
2. **Red fissure** — crimson and scarlet ink bloom torn across a dark brown ground, reading as a molten crack. This is where `#E71709` comes from.
3. **Gold marble** — the centre card. White and cold-grey marbled fluid veined with thick ochre-gold, the most planet-like of the set and the brightest. This is where `#96690A` comes from.
4. **Teal nebula** — cyan and copper-bronze fluid radiating from a dark centre, flecked with small white specks like stars.
5. **Magenta crater** — pink and magenta pitted surface with dark pocking, low contrast, soft.
6–8. Continue the rule: one dominant pigment each, black edges, no repeats of the dominant hue in adjacent positions.

---

## 8. Motion

Every value in this section is **(inferred)** from the single still. Where a value cannot be read from a still at all, it is marked *not measured* and given a range. No library parameters are specified because none were measured.

### Section 1 — Nav bar
- **kind** — entrance (once, on load). Static for the rest of the session; it does not hide, shrink or gain a background, because the page does not scroll.
- **what moves** — wordmark, the 48px rule, the five nav links.
- **from → to** — `opacity: 0 → 1`, `translateY: 8px → 0`. The rule additionally `scaleX: 0 → 1` from its left edge.
- **range** — trigger: on load, ~120ms after first paint. Duration *not measured*, use 400–600ms. Easing: an ease-out with a long tail, e.g. `cubic-bezier(0.22, 1, 0.36, 1)`. Stagger 40ms, left to right, wordmark first.
- **reduced motion** — rendered at the final state, no transform, no fade.

### Section 2 — Headline block
- **kind** — entrance (once, on load). Static afterwards. It is **not** scroll-linked and **not** parallaxed — nothing about it can move again.
- **what moves** — each of the three headline lines, independently, inside its own `overflow: hidden` mask.
- **from → to** — per line: `translateY: 100% → 0` within the mask (i.e. 70px of travel), `opacity: 0 → 1`.
- **range** — trigger: on load, ~220ms after first paint, overlapping the tail of the nav entrance. Duration *not measured*, use 700–900ms. Easing: strong ease-out, e.g. `cubic-bezier(0.16, 1, 0.3, 1)`. Stagger 90ms per line, top to bottom.
- **reduced motion** — opacity 0 → 1 only, 200ms, all three lines together, no mask and no translate.

### Section 3 — Post carousel
This section has an entrance and a continuous input-linked behaviour. They are separate.

- **kind** — entrance on load, then **scroll-linked** on the horizontal axis. Scroll-linked here means the transform of every card is a pure function of the carousel's current fractional position and **reverses exactly** when the input reverses; nothing plays once.
- **what moves** — the five card shells (transform + dim), and the `<img>` inside each shell (counter-drift).

**Entrance**
- **from → to** — per card: `opacity: 0 → 1`, `scale: 0.94 → its slot scale`, `translateY: 16px → 0`. The rotateY is already at its slot value from the first frame; do not animate it in.
- **range** — trigger: on load, ~380ms after first paint. Duration *not measured*, use 800–1000ms. Easing `cubic-bezier(0.16, 1, 0.3, 1)`. Stagger 70ms, radiating outward from the centre card (order: 0, ±1, ±2).
- **reduced motion** — opacity only, 200ms, no stagger.

**Scroll-linked (the carousel itself)**
- **what moves** — all cards, simultaneously. Track container: `perspective: 1600px; perspective-origin: 50% 802px;` cards `transform-style: preserve-3d`, `transform-origin: 50% 50%`, absolutely positioned and centred on the axis at y = 802.
- **from → to** — each card's signed fractional distance `d` from the active index drives this slot table; interpolate linearly between adjacent rows for fractional `d`:

| d | translateX | rotateY | scale | translateZ | dim overlay |
|---|---|---|---|---|---|
| 0 | 0 | 0° | 1.00 | 0 | 0% |
| ±1 | ±408px | ∓34° | 0.92 | −120px | 35% |
| ±2 | ±662px | ∓58° | 0.80 | −300px | 62% |
| ±3 | ±840px | ∓70° | 0.70 | −480px | 80% |

  Base card box (before scale): **400 × 532px**, 3:4. Cards beyond ±3 are unmounted. The ±2 pair lands half-off the viewport and is clipped by it — that clipping is the composition, not an accident.
- **range** — from the first wheel/drag event until input ends; there is no scroll position because the document does not scroll. One full slot advance corresponds to roughly **320–420px of accumulated wheel delta**, or a drag of about one centre-card width (*not measured*). After input ends the track settles to the nearest whole slot; settle duration *not measured*, use 600–800ms with a strong ease-out. Reverses exactly on reverse input.
- **inner counter-drift** — each card's `<img>` is `width: 112%` and translates `X: −6% × d` (clamped to ±6%), scroll-linked and reversing. Keep it this small; it is a texture, not a parallax effect.
- **reduced motion** — drop the 3D entirely: `perspective: none`, no `rotateY`, no `scale`, no `translateZ`. Lay the cards out as a flat horizontal strip at their base size with `scroll-snap-type: x mandatory`, native snapping, no tween. The dim overlays stay. The counter-drift is removed.

### Interaction transitions
Separate from the scroll choreography above.

- **Nav link hover** — colour `#A6A8A8 → #FFFFFF`, 180ms ease-out; simultaneously a 1px `#E71709` underline at the text baseline `scaleX: 0 → 1` from the left, 240ms `cubic-bezier(0.22, 1, 0.36, 1)`. On leave the underline collapses to the right, same duration.
- **Nav link press** — `opacity: 1 → 0.7`, 80ms linear.
- **Card hover, non-centre** — dim overlay lightens by 12 percentage points (e.g. 35% → 23%), 260ms ease-out. No scale, no lift.
- **Card hover, centre** — inner image `scale: 1 → 1.03`, 600ms `cubic-bezier(0.22, 1, 0.36, 1)`; title `translateY: 0 → −4px`, same timing. The card shell itself does not move.
- **Card press / drag** — cursor `grabbing`; whole track `scale: 1 → 0.985`, 200ms ease-out, released on pointer-up.
- **Card click, non-centre** — sets the active index; the same slot interpolation runs as a 700ms tween with a strong ease-out. It is the identical transform path as dragging, just tweened.
- **Focus-visible** — 2px `#E71709` outline, 3px offset, matching the element's radius (20px on cards).

---

## 9. Responsive (below 640px)

- Nav: wordmark + a two-line hamburger; the 48px rule is **dropped**. Gutter 20px, height 64px. Links move into a full-screen overlay panel (`#010000`, links at 24px, 24px gap, left-aligned, 20px gutter).
- Headline: 40px (2.35× body), `line-height: 0.95`, `max-width: 92vw`, breaks to 4 lines. Top offset 96px below the nav.
- Carousel: `perspective: 900px`. Base card **68vw × (4/3)**. Only `d = 0` and `d = ±1` are rendered; **the ±2 pair is dropped entirely.** Neighbour slot becomes `translateX ±0.82 × card width`, `rotateY ∓28°`, `scale 0.88`, `translateZ −80px`, dim 40%.
- Card title: 22px, `line-height: 1.2`, padding `0 20px 40px`.
- Input: native horizontal swipe with scroll-snap; **do not hijack the wheel or the vertical touch axis on mobile.**
- The page stays exactly 100svh with no vertical scroll.

---

## 10. Don'ts

- **Do not reproduce the presentation mat.** The design is full-bleed to all four viewport edges: no outer margin, no black border, no rounded corners on the page, no colour behind it. The page itself *is* the black.
- **Do not use `#000000` or `#0A0A0A`.** The background is `#010000`. No gradient, no radial vignette, no noise/grain overlay, no starfield.
- **Do not tint the UI with the neon colours.** `#E71709` appears only as a 1px hover underline, the focus ring and an optional index marker. `#96690A` never appears in the UI at all. The colour belongs to the photographs.
- **Do not add drop shadows or glows to the cards.** On black they read as grey mud. Depth comes from rotateY + scale + the black dim overlay, full stop.
- **Do not add vertical scroll.** No second section, no footer, no "scroll to explore" cue, no scroll indicator, no progress bar down the side. If you find yourself writing a scroll-triggered reveal for anything below the fold, there is no below the fold.
- **Do not arc the card row.** All five cards share one dead-flat horizontal centre axis at y = 802. No vertical offset on the neighbours, no `rotateZ`, no wave, no fan.
- **Do not set the headline in a grotesk, and do not bold it.** It is a 400-weight high-contrast serif with hairline strokes. A geometric sans headline destroys the entire register of this page.
- **Do not let the headline run wide.** Cap it at 640px so it breaks to exactly three lines. A two-line or one-line headline is wrong.
- **Do not left-align the card titles.** They are centred, two lines, 64px up from the card's bottom edge.
- **Do not add a meta row to the cards** — no dates, categories, read-times, author names, index numbers or arrows. Title only.
- **Do not add carousel chrome.** No prev/next arrows, no dot pagination, no counter, no "drag me" label. The cut-off outer cards are the affordance.
- **Do not auto-advance or loop the carousel on a timer.** Motion is restrained: it responds to input and is otherwise perfectly still.
- **Do not give the cards borders, strokes, inner glows or glassmorphism.** No `backdrop-filter` anywhere on the page.
- **Do not put a background or blur bar behind the nav.** It sits directly on the black.
- **Do not constrain the carousel to a max-width container with gutters.** It bleeds past both viewport edges and the ±2 cards must be clipped mid-card.
- **Do not crop the card images to landscape or square.** 3:4 portrait, cover.
- **Do not uppercase or letterspace anything** — no `LATEST POSTS` eyebrow, no tracked-out nav.
- **Do not parallax the headline or the nav.** They enter once on load and then never move again.
- **Do not read sizes off a mockup.** Body is 17px at 1440 and every level above derives from the ratio table in §4.