# Scroll-linked 3x3 image grid

Schema: Design Details SECTION.md v3.2
Website: Pash
Source: https://www.pash.website/
Source section IDs: gap-5dc75a4c-1637-5038
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A tight, centred 3x3 of square images gives a clean repeating module, and the generous dark negative space around it keeps attention on the grid.
- A single blue duotone treatment unifies varied motifs (figures, motion, nature), so the grid reads as one coherent photographic set.
- Tying image swaps to scroll makes the page feel alive without any text, so the reader's own scrolling drives the change.

What a screenshot can't show:
- In the recording, scrolling swaps the images between roughly 13s and 21s, cycling through blue-tinted shots like a laptop user, a runner and a silhouette.
- Easing, staggering and transition timing weren't captured, and no type or spacing was measured.

Borrow: Hold the frame fixed and unify varied imagery with one colour treatment, then let scroll alone swap the contents.
Leave alone: Don't copy the blue duotone photo set, the laptop/runner/silhouette motifs or the grainy noise variants; use your own imagery and colour treatment.

## Classification

- Type: feature-grid
- Layout: A centrally aligned 3x3 grid of square images against a dark background.
- Styles: minimal, photographic, brutalist
- Confidence: 95%

## Purpose and structure

A dynamic 3x3 grid of images that change and update their contents as the user scrolls down the page.

Visual signature: A 3x3 layout of blue-monochrome photos that cycles through different motifs on scroll.

## Components

- image grid

## Typography

- Display: Base Neue Trial SuperCn — 360px 600
- Heading: Base Neue Trial SuperCn — 100px 600
- Body: Base Neue Trial — 16px 500

## Functional palette

- Primary-Action: primary action #004CFF
- Canvas: canvas #E3E4D8
- Text: text #000000
- Border: border #222222

## Motion evidence

- 13.0–21.0s — As the user scrolls, a rectangular image container changes its contents, cycling through different blue-tinted images including a laptop user, a runner, and a silhouette. (90% confidence)

## Section quality

Overall: 58.81/100 (Competent)
Scored coverage: 80%

- Typography: not_assessed — No typography is present in this crop; the section is purely an image grid. Next tier: Introduce or reveal accompanying text elements to assess typographic handling.
- Composition: 62 — A tight, centrally placed 3x3 grid of square images with consistent monochrome blue treatment creates a clean, repeated module against a dark field. The grid is simple and well-aligned but lacks internal hierarchy, varied scale, or asymmetry that would elevate it beyond a straightforward grid exercise; generous surrounding negative space is the main compositional device. Next tier: Needs more structural variation (scale shifts, offset cells, layered depth) beyond a uniform static grid to move past competent/polished.
- Motion: 58 — Gemini confirms scroll-linked image swapping within the grid cells (13–21s), cycling through different blue-tinted photos. This is a real, specific, timestamped behavior, but it is a single repeated content-swap effect without described easing, staggering, or transition choreography that would indicate more crafted motion design. Next tier: Evidence of staggered/sequenced cell transitions, directional reveals, or varied timing curves would be needed to score higher.
- Content: 58 — The imagery is thematically cohesive (figures, motion, nature motifs) all unified by a blue duotone treatment, giving the grid a consistent photographic identity. However, content is generic stock-like photography without captions, labels, or context that would integrate it meaningfully into a narrative. Next tier: Adding captions, context, or a clearer narrative link between images and surrounding content would support higher integration.
- Originality: 55 — Duotone blue treatment and scroll-cycling grids are a known pattern in portfolio/brutalist sites; the execution here is competent but not distinct enough to feel hard to substitute. The noise/grain variant images add some textural interest but the core device itself is familiar. Next tier: A more unexpected grid behavior, unconventional cropping, or unique visual treatment would be needed to feel original rather than familiar.
- Adaptability: 60 — The 3x3 grid structure and scroll-swap behavior are clearly separable from the specific photographic content and blue duotone skin; the pattern (grid + content cycling) could be reskinned with different images, colors, or grid dimensions without altering the underlying mechanism. Next tier: Lack of information on responsive grid behavior (e.g., mobile stacking) limits confidence in cross-breakpoint adaptability.

Strengths:
- Consistent blue duotone treatment unifies a changing set of images into one visual system
- Centered, symmetrical 3x3 grid gives a clear, calm focal point against the dark background
- Scroll-linked content cycling adds a dynamic layer without altering the static grid structure

Weaknesses:
- Grid lacks internal hierarchy or scale variation, reading as a flat, repeated module
- Imagery feels generic/stock-like without captions or narrative framing
- The cycling behavior, while present, lacks described variation in timing or transition style
- Originality is limited since duotone grids with scroll-swap are a known pattern in this design space

Why it does not reach the next tier: The section is executed cleanly but relies on a single, undifferentiated effect (image swap) and a static, non-hierarchical grid layout; to reach strong/memorable it would need either compositional variation, a distinctive narrative tie-in, or more sophisticated motion choreography.

## Adaptation guidance

- Effort: Medium
- Guidance: Keep the grid structure and scroll-triggered swap logic; the photographic content and color treatment can be swapped for different imagery or palette without changing the underlying behavior, provided the swap mechanism and square aspect ratio are preserved.

What transfers:
- 3x3 grid skeleton
- scroll-triggered content cycling mechanism
- monochrome duotone image treatment as a reusable skin

Dependencies:
- Specific photographic assets with consistent blue duotone processing
- Scroll-position logic driving image swaps

## 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%)
- No visible typography in this crop to assess
- Motion scoring relies solely on Gemini's single timestamped observation window
- No information on grid behavior at narrower viewports

## 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: grid
- Layout: A centrally aligned 3x3 grid of square images against a dark background.
- Styles: minimal, photographic, brutalist
- Components: image grid
- Purpose: A dynamic 3x3 grid of images that change and update their contents as the user scrolls down the page.
- Visual signature: A 3x3 layout of blue-monochrome photos that cycles through different motifs on scroll.
- Place on the page: 4 of 14, after Gallery (`2000b1a0-9cd4-4cf6-b701-a063f583fcf2`), before Other (`9ca132b3-3db8-42e6-bded-0c0ba9d85734`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

### 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": "360px",
      "family": "Base Neue Trial SuperCn",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 360px 'Base Neue Trial SuperCn' used for massive, screen-filling text.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "306px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "100px",
      "family": "Base Neue Trial SuperCn",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 100px 'Base Neue Trial SuperCn' used for primary section headings.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "80px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Base Neue Trial",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: 16px 'Base Neue Trial' used for standard paragraph reading text.",
      "sampleId": "font-9",
      "confidence": 0.9,
      "lineHeight": "20.8px",
      "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": "#004CFF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 76, 255); AI role: #004CFF (electric blue) used extensively for primary text, links, and active elements.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#E3E4D8",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(227, 228, 216); AI role: #E3E4D8 used as the primary light background color for main sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: #000000 used for text on light backgrounds and as a dark canvas in inverted sections.",
      "sampleId": "color-1",
      "confidence": 0.85
    },
    {
      "hex": "#222222",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-6: computed rgb(34, 34, 34); AI role: #222222 used for section borders and subtle dividers.",
      "sampleId": "color-6",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px",
  "density": "Very low density. The layout is expansive, giving the oversized typography and imagery room to breathe.",
  "evidence": "Observed via DOM/CSS facts for typography sizing (360px, 160px), flat color usage, and visual inspection of sharp image crops and bracketed button text.",
  "borderStyle": "Thin, solid 1px borders used sparingly as horizontal rules to divide content sections.",
  "buttonStyle": "Raw text links enclosed in square brackets (e.g., [ VIEW CASESTUDY ]), heavily relying on typographic indication rather than contained shapes.",
  "cornerStyle": "Sharp, 90-degree straight edges throughout; no rounded corners are visible on images or UI elements.",
  "contentWidth": "Edge-to-edge typography that utilizes the full viewport width, interspersed with centered, constrained text blocks.",
  "spacingRhythm": "Generous vertical spacing between massive typographic blocks, creating a distinct pacing as users scroll."
}
```

### 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. **scroll** — As the user scrolls, a rectangular image container changes its contents, cycling through different blue-tinted images including a laptop user, a runner, and a silhouette. (13s–21s; 90% 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: 3x3 grid skeleton; scroll-triggered content cycling mechanism; monochrome duotone image treatment as a reusable skin
- Dependencies: Specific photographic assets with consistent blue duotone processing; Scroll-position logic driving image swaps
- Guidance: Keep the grid structure and scroll-triggered swap logic; the photographic content and color treatment can be swapped for different imagery or palette without changing the underlying behavior, provided the swap mechanism and square aspect ratio are preserved.

### 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 “Scroll-linked 3x3 image grid”.

Purpose: A dynamic 3x3 grid of images that change and update their contents as the user scrolls down the page.

Structure: grid. Source layout label: A centrally aligned 3x3 grid of square images against a dark background.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

Visual signature to preserve at the pattern level: A 3x3 layout of blue-monochrome photos that cycles through different motifs on scroll.

Components: image grid.

Style direction: minimal, photographic, brutalist.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"360px","family":"Base Neue Trial SuperCn","source":"computed","traits":"uppercase","weight":"600","evidence":"font-4: computed CSS at 1440×1000; AI role: 360px 'Base Neue Trial SuperCn' used for massive, screen-filling text.","sampleId":"font-4","confidence":0.95,"lineHeight":"306px","letterSpacing":"normal"} {"role":"heading","size":"100px","family":"Base Neue Trial SuperCn","source":"computed","traits":"uppercase","weight":"600","evidence":"font-3: computed CSS at 1440×1000; AI role: 100px 'Base Neue Trial SuperCn' used for primary section headings.","sampleId":"font-3","confidence":0.9,"lineHeight":"80px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Base Neue Trial","source":"computed","traits":"Regular","weight":"500","evidence":"font-9: computed CSS at 1440×1000; AI role: 16px 'Base Neue Trial' used for standard paragraph reading text.","sampleId":"font-9","confidence":0.9,"lineHeight":"20.8px","letterSpacing":"normal"}

Color evidence: {"hex":"#004CFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(0, 76, 255); AI role: #004CFF (electric blue) used extensively for primary text, links, and active elements.","sampleId":"color-2","confidence":0.95} {"hex":"#E3E4D8","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(227, 228, 216); AI role: #E3E4D8 used as the primary light background color for main sections.","sampleId":"color-3","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: #000000 used for text on light backgrounds and as a dark canvas in inverted sections.","sampleId":"color-1","confidence":0.85} {"hex":"#222222","name":"border","role":"border","source":"computed","evidence":"color-6: computed rgb(34, 34, 34); AI role: #222222 used for section borders and subtle dividers.","sampleId":"color-6","confidence":0.8}

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: scroll: As the user scrolls, a rectangular image container changes its contents, cycling through different blue-tinted images including a laptop user, a runner, and a silhouette. (90% confidence)

Transfer these principles: 3x3 grid skeleton; scroll-triggered content cycling mechanism; monochrome duotone image treatment as a reusable skin.

Dependencies: Specific photographic assets with consistent blue duotone processing; Scroll-position logic driving image swaps.

Adaptation guidance: Keep the grid structure and scroll-triggered swap logic; the photographic content and color treatment can be swapped for different imagery or palette without changing the underlying behavior, provided the swap mechanism and square aspect ratio are preserved.

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