# Editorial scroll narrative to preview grid

Schema: Design Details SECTION.md v3.2
Website: Hyperiux Vault
Source: https://vault.hyperiux.com/
Source section IDs: gap-00271143-2514-6493
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Isolated sentences with generous negative space set up the problem before the grid arrives, so the copy and structure feel purposeful.
- The sparse-to-dense shift, from single centered lines to a precise 2x3 grid of cards, gives the long scroll a clear rhythm.
- A near-black canvas with white text and a single orange accent on key words keeps emphasis strong, and each card repeats the same title, icon tag and arrow link.

What a screenshot can't show:
- The recording shows sentences fading in one after another from about 8 to 12 seconds, then cards revealing in a stagger from about 13 to 15 seconds.
- No measured font sizes, spacing or easing were captured, so those values would need to be chosen by eye.

Borrow: Build tension with sparse, one-at-a-time statements, then release it into a dense, orderly grid that delivers what the copy promised.
Leave alone: Don't copy the black and orange palette, the Neue Haas Unica typeface (use a clean neo-grotesque alternative instead), or the exact effect-category card content.

## Classification

- Type: feature-grid
- Layout: Centered sequential text scrolling down to a multi-column thumbnail grid.
- Styles: editorial, minimal
- Confidence: 88%

## Purpose and structure

An editorial storytelling section where text sentences fade in sequentially on scroll, resolving into a staggered grid of preview thumbnails.

Visual signature: Sequential fading text phrases leading into a dark grid of UI preview cards.

## Components

- text-block
- heading
- image-grid
- card

## Typography

- Display: neueHaasUnica — 72px 400
- Heading: neueHaasUnica — 46.1px 400
- Body: neueHaasUnica — 16.6px 400
- Mono: None — 13.7px 400

## Functional palette

- Canvas: canvas #050505
- Text: text #FFFFFF
- Primary-Action: primary action #FF5F00
- Border: border #272727
- Muted-Text: muted text #939393

## Motion evidence

- 8.0–12.0s — Sequential Text Fade-In (90% confidence)
- 13.0–15.0s — Preview Cards Staggered Reveal (85% confidence)

## Section quality

Overall: 60.15/100 (Good)
Scored coverage: 100%

- Typography: 62 — Clean, consistent use of Neue Haas Unica across display headlines and body copy with clear hierarchy (large bold headline, mid-weight editorial sentences, small labels). Orange accent word highlights add emphasis without overdoing it. Nothing structurally inventive beyond solid editorial sizing and spacing. Next tier: Needs more typographic variation (weight, scale modulation, or kinetic typographic treatment) to move beyond competent centered-sentence staging.
- Composition: 64 — Long vertical scroll builds a deliberate rhythm: isolated sentences with generous negative space resolve into a dense 2x3 grid of preview cards with consistent labeling (title, icon tag, arrow link). The transition from sparse to dense is a legible structural idea and grid alignment is precise. Next tier: Grid cards are fairly conventional (thumbnail + label + arrow); layout lacks a distinguishing compositional twist beyond the scale shift from text to grid to feel strong/memorable.
- Motion: 58 — Gemini confirms two timestamped behaviors: sequential text fade-in (8-12s) and staggered card reveal (13-15s), both common scroll-triggered patterns that create a readable pacing device but are not distinctive choreography. Next tier: No evidence of parallax, easing nuance, or hover/interaction detail beyond basic fade/stagger reveals needed for a higher motion score.
- Content: 60 — Text content directly sets up the problem (forgettable interfaces) before delivering the grid of effect categories, so copy and structure are well integrated and purposeful, not decorative filler. Next tier: Preview thumbnails are low-fidelity stand-ins (plain colored/image blocks) rather than fully realized content, limiting perceived craft of the integration.
- Originality: 55 — The fade-in sentence into grid-reveal pattern is a widely used editorial scroll trope; the dark canvas, orange accent, and grid-of-cards layout are common in dev-tool marketing sites. Next tier: Lacks a differentiating mechanic (e.g. unique transition logic, unexpected grid behavior, or custom visual motif) that would make it feel hard to substitute.
- Adaptability: 60 — Structure (sequential text block, then grid of cards with label+icon+link) is clearly separable from the dark/orange skin; tokens for color, radius, spacing, and typography are deterministically supplied, making a reskin straightforward. Next tier: Dependence on specific custom preview thumbnails (WebGL renders, cursor trail demo, etc.) ties content closer to this product than a fully generic reusable template.

Strengths:
- Clear narrative pacing from isolated sentences to a resolved grid
- Consistent typographic hierarchy and restrained accent color use
- Grid labeling pattern (title, tag chip, arrow) is clean and systematic

Weaknesses:
- Preview card visuals are generic placeholder-like thumbnails
- Transition pattern (fade-in text to staggered grid) is a common scroll trope
- No distinguishing compositional or motion mechanic beyond reveal timing
- Text block pacing spans very large vertical distance which may feel padded rather than purposeful

Why it does not reach the next tier: The section demonstrates competent pacing and layout discipline but relies on familiar scroll-reveal conventions and conventional card-grid structure without a distinctive mechanic, preventing it from reaching strong/memorable territory.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the text-to-grid narrative scaffold and card labeling pattern; replace preview thumbnails with new content assets and reapply token-driven typography/color/spacing to retheme without altering the sequence structure.

What transfers:
- Sequential sentence-to-grid narrative structure
- Card layout with label, tag, and arrow link pattern
- Dark canvas with single accent color system

Dependencies:
- Custom preview thumbnail assets (WebGL, cursor, transition demos)
- Specific scroll-triggered fade/stagger animation logic

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion scoring relies only on two Gemini-confirmed timestamped behaviors; finer easing/parallax details are unknown
- Exact spacing and gap values for the grid are not in deterministic data

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: feature-grid
- Structure: centered single-column
- Layout: Centered sequential text scrolling down to a multi-column thumbnail grid.
- Styles: editorial, minimal
- Components: text-block, heading, image-grid, card
- Purpose: An editorial storytelling section where text sentences fade in sequentially on scroll, resolving into a staggered grid of preview thumbnails.
- Visual signature: Sequential fading text phrases leading into a dark grid of UI preview cards.
- Place on the page: 5 of 18, after Other (`da76f974-8caf-49e1-a80d-3d69984d09da`), before Gallery (`d14dad08-af86-45b6-b716-fef2cc419667`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "72px",
      "family": "neueHaasUnica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Neue Haas Unica at 72px, used for the main hero headline 'The Interaction Layer Your Website is Missing.'",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "87.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "46.1px",
      "family": "neueHaasUnica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Neue Haas Unica at 46.1px, used for secondary section headings.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "55.3px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16.6px",
      "family": "neueHaasUnica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: Neue Haas Unica at 16.6px, used for descriptive paragraphs and body copy.",
      "sampleId": "font-7",
      "confidence": 0.9,
      "lineHeight": "24.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "13.7px",
      "family": null,
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Monospace font at 13.7px, used extensively in code snippet blocks and file paths.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "20.5px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [],
  "functionalPalette": [
    {
      "hex": "#050505",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(5, 5, 5); AI role: Deep black (#050505) applied to the body and main containers.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for primary headings and body text to ensure high contrast against the dark canvas.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FF5F00",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-6: computed rgb(255, 95, 0); AI role: Vibrant orange (#FF5F00) used for primary buttons ('Sign In', 'Browse All Effects') and accented text.",
      "sampleId": "color-6",
      "confidence": 0.95
    },
    {
      "hex": "#272727",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-5: computed rgb(39, 39, 39); AI role: Dark gray (#272727) used for structural borders around cards and sections.",
      "sampleId": "color-5",
      "confidence": 0.85
    },
    {
      "hex": "#939393",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-7: computed rgb(147, 147, 147); AI role: Gray (#939393) used for secondary text, labels, and less prominent information.",
      "sampleId": "color-7",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Minimal to zero border-radius is observed on core components like feature cards and buttons.",
  "density": "Low density overall. The design relies on significant negative space (macro white space) to draw focus to typography and key interactions, though code blocks and feature grids present localized areas of moderate density.",
  "evidence": "Visual inspection of the overall layout, the sharp corners on the 'Read Docs' and 'Browse All Effects' buttons, the thin grid lines in the 'Preview. Install. Tune. Ship.' section, and the structured spacing in the footer and pricing sections.",
  "borderStyle": "Thin, solid 1px borders in dark grays (e.g., #272727) are used extensively to define grids, separate sections, and outline buttons, creating a wireframe-like structure.",
  "buttonStyle": "Buttons are blocky and rectangular. Primary buttons are solid vibrant orange with dark text, while secondary buttons use outlines with transparent or dark backgrounds.",
  "cornerStyle": "Sharp, 90-degree corners are predominant across cards, buttons, and structural borders, reinforcing a technical and precise aesthetic.",
  "contentWidth": "Content is generally center-aligned within a max-width container, with some grid layouts extending wider but maintaining significant left/right margins.",
  "spacingRhythm": "Generous vertical spacing between sections, employing large margins and padding to create a rhythmic, uncrowded scrolling experience. Components within sections (like grids and tables) use tighter, structured gaps."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
null
```

### Observed motion

1. **observed sequence** — Sequential Text Fade-In (8s–12s; 90% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.
2. **observed sequence** — Preview Cards Staggered Reveal (13s–15s; 85% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Sequential sentence-to-grid narrative structure; Card layout with label, tag, and arrow link pattern; Dark canvas with single accent color system
- Dependencies: Custom preview thumbnail assets (WebGL, cursor, transition demos); Specific scroll-triggered fade/stagger animation logic
- Guidance: Reuse the text-to-grid narrative scaffold and card labeling pattern; replace preview thumbnails with new content assets and reapply token-driven typography/color/spacing to retheme without altering the sequence structure.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Editorial scroll narrative to preview grid”.

Purpose: An editorial storytelling section where text sentences fade in sequentially on scroll, resolving into a staggered grid of preview thumbnails.

Structure: centered single-column. Source layout label: Centered sequential text scrolling down to a multi-column thumbnail grid.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Sequential fading text phrases leading into a dark grid of UI preview cards.

Components: text-block, heading, image-grid, card.

Style direction: editorial, minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"72px","family":"neueHaasUnica","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Neue Haas Unica at 72px, used for the main hero headline 'The Interaction Layer Your Website is Missing.'","sampleId":"font-1","confidence":0.95,"lineHeight":"87.8px","letterSpacing":"normal"} {"role":"heading","size":"46.1px","family":"neueHaasUnica","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Neue Haas Unica at 46.1px, used for secondary section headings.","sampleId":"font-2","confidence":0.9,"lineHeight":"55.3px","letterSpacing":"normal"} {"role":"body","size":"16.6px","family":"neueHaasUnica","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Neue Haas Unica at 16.6px, used for descriptive paragraphs and body copy.","sampleId":"font-7","confidence":0.9,"lineHeight":"24.8px","letterSpacing":"normal"} {"role":"mono","size":"13.7px","family":null,"source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Monospace font at 13.7px, used extensively in code snippet blocks and file paths.","sampleId":"font-6","confidence":0.95,"lineHeight":"20.5px","letterSpacing":"normal"}

Color evidence: {"hex":"#050505","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(5, 5, 5); AI role: Deep black (#050505) applied to the body and main containers.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for primary headings and body text to ensure high contrast against the dark canvas.","sampleId":"color-2","confidence":0.95} {"hex":"#FF5F00","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(255, 95, 0); AI role: Vibrant orange (#FF5F00) used for primary buttons ('Sign In', 'Browse All Effects') and accented text.","sampleId":"color-6","confidence":0.95} {"hex":"#272727","name":"border","role":"border","source":"computed","evidence":"color-5: computed rgb(39, 39, 39); AI role: Dark gray (#272727) used for structural borders around cards and sections.","sampleId":"color-5","confidence":0.85} {"hex":"#939393","name":"muted text","role":"muted-text","source":"computed","evidence":"color-7: computed rgb(147, 147, 147); AI role: Gray (#939393) used for secondary text, labels, and less prominent information.","sampleId":"color-7","confidence":0.85}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: observed sequence: Sequential Text Fade-In (90% confidence) observed sequence: Preview Cards Staggered Reveal (85% confidence)

Transfer these principles: Sequential sentence-to-grid narrative structure; Card layout with label, tag, and arrow link pattern; Dark canvas with single accent color system.

Dependencies: Custom preview thumbnail assets (WebGL, cursor, transition demos); Specific scroll-triggered fade/stagger animation logic.

Adaptation guidance: Reuse the text-to-grid narrative scaffold and card labeling pattern; replace preview thumbnails with new content assets and reapply token-driven typography/color/spacing to retheme without altering the sequence structure.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.