# Horizontal split-view gallery

Schema: Design Details SECTION.md v3.2
Website: Kelvin
Source: https://kelvin.8b.com/
Source section IDs: 4dc74997-2a58-4fa5-a035-d7648e8dea4e
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The thermal and visible-light versions of one scene sit on either side of a sharp vertical seam, so the concept reads instantly with no explanation.
- A large light-weight serif headline paired with small uppercase tracked labels and tiny timestamp captions gives a clear editorial hierarchy on a dark, cinematic canvas.
- Generous padding, consistent left alignment and alternating image placement give the wide horizontal run a steady rhythm.

What a screenshot can't show:
- Between about 18 and 27 seconds, vertical scrolling drives the gallery to translate right to left, with the divider travelling alongside the images.
- The headline measures about 52px at weight 200 with -1px letter spacing; body text is 17px at weight 550 with 26px line height. Section padding is about 158px top and bottom and 43px at the sides.

Borrow: Turn vertical scroll into a sideways pan, and let a single dividing line carry the comparison idea.
Leave alone: Don't copy the thermal-versus-light premise, the Kalnia and Hubot Sans pairing or the heat/light captions; a free high-contrast display serif with a clean grotesque would do.

## Classification

- Type: gallery
- Layout: Full-width horizontal scrolling container nested within a vertical scroll page, with left-aligned typographic headers.
- Styles: photographic, bold, editorial
- Confidence: 100%

## Purpose and structure

A dark section featuring large images that scroll horizontally, displaying contrasting versions of the same scene split by a vertical line.

Visual signature: A cinematic dark backdrop with wide images panning sideways, bisected by a sharp vertical divider contrasting color with monochrome.

## Components

- Section title
- Explanatory text
- Horizontally scrolling images
- Split-view comparison line

## Typography

- Display: Kalnia — 86.4px 200
- Heading: Hubot Sans — 34.6px 800
- Body: Hubot Sans — 17px 400

## Functional palette

- Canvas: canvas #F1EDE4
- Text: text #110D19
- Muted-Text: muted text #5B5664

## Motion evidence

- 18.0–27.0s — A gallery of images, split by a vertical line, translates horizontally from right to left in response to vertical scrolling. (98% confidence)

## Section quality

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

- Typography: 64 — The large Kalnia serif display headline against uppercase tracked sans labels ('HEAT'/'LIGHT') and small caption metadata creates a clear, elegant hierarchy. Contrast between the elegant serif and utilitarian caps is purposeful but not pushed further than a standard editorial pairing. Next tier: Needs a more distinctive type treatment on the captions/labels or a second display weight to escape a familiar editorial pattern.
- Composition: 68 — Repeating two-column grid (left text/label column, right/offset image column) with a crisp vertical divider that doubles as the split-view seam is a strong structural idea, and the alternating image placement (top-right then full-bleed) adds rhythm. Generous negative space and consistent left alignment reinforce an intentional editorial grid. Next tier: Repetition of the identical heading/subhead block before every image feels templated rather than composed as a single continuous scene; tighter integration between heading and image panels would push this further.
- Motion: 66 — Gemini confirms a horizontal translate-on-scroll of a gallery bisected by a vertical divider (18–27s), a legible, purposeful repurposing of vertical scroll into horizontal reveal tied to the thermal/visible-light conceit. Next tier: No evidence of easing nuance, parallax between the two halves, or scroll-linked transition at the divider itself beyond simple translation; without such detail it reads as a single-axis scroll-jack rather than a crafted motion idea.
- Content: 65 — The heat/light duality is a well-chosen conceptual device, pairing a thermal image with its visible-light counterpart, and the caption metadata ('Saturday, 01:14 · the front rows', '03:55 · still warm') adds narrative texture appropriate to the gallery's theme. Next tier: Content integration stays illustrative rather than interactive—no visible toggle or cursor-based reveal ties the copy's 'nothing is recorded in visible light' claim to an interaction, making the concept text heavier than the behavior.
- Originality: 66 — Combining a scroll-driven horizontal gallery with a thermal/visible split-view is a distinctive concept beyond a generic image carousel, giving the section a specific identity tied to its content premise. Next tier: The underlying mechanics (horizontal scroll gallery, vertical divider) are recognizable from other split-comparison sliders; without a unique interaction (e.g., cursor-driven wipe) it doesn't yet feel singular.
- Adaptability: 60 — Deterministic facts show a clear grid structure (header grid, flex list of cards, fixed image aspect ratios) that could be restyled with different imagery/copy while preserving behavior; tokens (sharp corners, dark canvas, thin borders) are explicit and portable. Next tier: No animation parameters captured, so the motion timing/easing isn't separable from behavior with certainty, limiting confidence in full adaptability.

Strengths:
- Clear conceptual pairing of thermal and visible-light imagery tied to the copy
- Strong grid consistency with large serif headline anchoring a left column and imagery breaking right
- Scroll-driven horizontal translation that repurposes vertical scroll meaningfully for a gallery format

Weaknesses:
- Heading/subhead block repeats identically before each image, reading templated rather than composed
- No visible interactive toggle or wipe control despite a 'split view' premise
- Motion evidence limited to simple horizontal translation without detail on easing, divider interaction, or layering

Why it does not reach the next tier: The section has a legible concept and clean grid, but the repeated identical text blocks, lack of interaction-driven split reveal, and absence of a truly bespoke type or motion treatment keep it at a polished-but-familiar level rather than one that feels irreplaceable.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the horizontal-scroll grid and divider motif with any paired-image concept (before/after, day/night), but the caption copy and thematic image pairing need rewriting to fit a new narrative, and interaction depth (e.g., a real split-view drag) should be added to differentiate from a plain scroll gallery.

What transfers:
- Two-column grid with left text column and offset image panel
- Horizontal scroll-driven gallery mechanic
- Vertical divider motif as a structural/compositional device
- Dark canvas with sharp-cornered, high-contrast imagery

Dependencies:
- Specific heat/visible-light image pairs driving the content concept
- Caption metadata content (timestamps, location tags)
- Kalnia serif display font for headline tone

## 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 animation easing or interaction parameters supplied, so finer motion quality is unconfirmed
- Only two image examples observed; full gallery rhythm and variation across all six cameras is unknown
- Caption and heading repetition pattern inferred from only two visible instances

## 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: gallery
- Source type: gallery
- Structure: full-bleed
- Layout: Full-width horizontal scrolling container nested within a vertical scroll page, with left-aligned typographic headers.
- Styles: photographic, bold, editorial
- Components: Section title, Explanatory text, Horizontally scrolling images, Split-view comparison line
- Purpose: A dark section featuring large images that scroll horizontally, displaying contrasting versions of the same scene split by a vertical line.
- Visual signature: A cinematic dark backdrop with wide images panning sideways, bisected by a sharp vertical divider contrasting color with monochrome.
- Place on the page: 6 of 11, after Process (`kelvin-8b-com:C05`), before Testimonials (`kelvin-8b-com:C07`)

### Crop and composition

- Crop: 1440×2000px; aspect ratio 0.72:1
- Page bounds: 6105–8105px of 13551px
- Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays.

### 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": [
    {
      "role": "section heading",
      "family": "Kalnia",
      "stack": "Kalnia, Georgia, serif",
      "size": "51.8px",
      "weight": "200",
      "lineHeight": "52.9px",
      "letterSpacing": "-1px",
      "sample": "Last July, seen in heat",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-10"
    },
    {
      "role": "UI/supporting text",
      "family": "Hubot Sans",
      "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
      "size": "17px",
      "weight": "550",
      "lineHeight": "26.4px",
      "letterSpacing": "normal",
      "sample": "Doors and camera room",
      "element": "dd",
      "occurrences": 15,
      "sourceId": "font-21"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "86.4px",
      "family": "Kalnia",
      "source": "computed",
      "traits": "Regular",
      "weight": "200",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "88.1px",
      "letterSpacing": "-1.7px"
    },
    {
      "role": "heading",
      "size": "34.6px",
      "family": "Hubot Sans",
      "source": "computed",
      "traits": "uppercase",
      "weight": "800",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "31.8px",
      "letterSpacing": "0.2px"
    },
    {
      "role": "body",
      "size": "17px",
      "family": "Hubot Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.",
      "sampleId": "font-12",
      "confidence": 0.95,
      "lineHeight": "26.4px",
      "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": [
    {
      "value": "#110E1A",
      "cssValue": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.35)",
      "alpha": 0.34901960784313724,
      "appliedAs": [
        "border"
      ],
      "occurrences": 10,
      "sourceId": "color-9"
    },
    {
      "value": "#F1EEE5",
      "cssValue": "color(srgb 0.945098 0.929412 0.894118 / 0.35)",
      "alpha": 0.34901960784313724,
      "appliedAs": [
        "border"
      ],
      "occurrences": 5,
      "sourceId": "color-10"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#F1EDE4",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#110D19",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#5B5664",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.",
      "sampleId": "color-4",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px, no border-radius visible.",
  "density": "Low density; ample negative space emphasizes the scale of the typography and vibrancy of the images.",
  "evidence": "Visual inspection of stat blocks (fine lines), button shapes (sharp), and section pacing confirms these tokens.",
  "borderStyle": "Thin (1px), solid borders used extensively as structural dividers in lists, stats, and tables.",
  "buttonStyle": "Solid, sharp-edged rectangles (often black on light, or white on dark) containing bold, uppercase, highly-tracked sans-serif text.",
  "cornerStyle": "Strictly sharp corners across all buttons, images, and layout containers.",
  "contentWidth": "Wide max-width with elements often breaking the grid or spanning full viewport width, but maintaining alignment down central columns.",
  "spacingRhythm": "Generous spacing with large macro-margins between sections, allowing the large typography and imagery to breathe."
}
```

### Reconstruction specification

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

- Root: 1440×1491px; block; padding {"top":"158.4px","left":"43.2px","right":"43.2px","bottom":"158.4px"}; gap normal; background rgb(241, 237, 228); radius 0px.
- Observed gaps: 11.2, 16, 17.6, 48, 57.6px.
- Representative content widths: 1354, 794, 718, 502, 498, 462, 451, 383px.
- Layout containers: 7; cards/surfaces: 4; media elements: 8; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 6105,
      "bottom": 8105,
      "pageHeight": 13551
    }
  },
  "container": {
    "size": "1440×1491px",
    "position": "x 0px, y 5314px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "158.4px",
      "left": "43.2px",
      "right": "43.2px",
      "bottom": "158.4px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(241, 237, 228)",
    "radius": "0px",
    "border": "not captured",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      11.2,
      16,
      17.6,
      48,
      57.6
    ],
    "representativeContentWidthsPx": [
      1354,
      794,
      718,
      502,
      498,
      462,
      451,
      383
    ]
  },
  "columns": [
    {
      "element": "ol · Night one · Friday 23 July Infrared Slow heat. Live sets with long builds, the hall warming one degr",
      "size": "1354×909px",
      "position": "x 43px, y 5738px",
      "display": "grid",
      "template": "451.203px 451.203px 451.219px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "li · Night one · Friday 23 July Infrared Slow heat. Live sets with long builds, the hall warming one degr",
      "size": "451×795px",
      "position": "x 43px, y 5818px",
      "display": "grid",
      "template": "383.203px",
      "direction": "row",
      "gap": "17.6px"
    },
    {
      "element": "li · Night two · Saturday 24 July Visible The full spectrum. The long night, both floors open until four.",
      "size": "502×828px",
      "position": "x 469px, y 5738px",
      "display": "grid",
      "template": "462.391px",
      "direction": "row",
      "gap": "17.6px"
    },
    {
      "element": "li · Night three · Sunday 25 July Ultraviolet The cool-down. Voices, strings and a dance piece made for t",
      "size": "451×773px",
      "position": "x 946px, y 5874px",
      "display": "grid",
      "template": "383.219px",
      "direction": "row",
      "gap": "17.6px"
    },
    {
      "element": "header · Last July, seen in heat What the six cameras kept from 2026. Every frame on the wall was made by the",
      "size": "1440×106px",
      "position": "x 0px, y 6901px",
      "display": "grid",
      "template": "718.094px 587.531px",
      "direction": "row",
      "gap": "16px 48px"
    },
    {
      "element": "li · Saturday, 01:14 · the front rows",
      "size": "794×556px",
      "position": "x 806px, y 7127px",
      "display": "grid",
      "template": "794.203px",
      "direction": "row",
      "gap": "11.2px"
    },
    {
      "element": "ul · Saturday, 01:14 · the front rows Friday, 23:50 · the first wave Sunday, 22:45 · last song Saturday,",
      "size": "6435×700px",
      "position": "x 0px, y 7055px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "57.6px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "li · Saturday, 01:14 · the front rows",
      "size": "794×556px",
      "position": "x 806px, y 7127px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px none rgb(241, 237, 228)",
      "shadow": "none",
      "background": "rgb(17, 13, 25)"
    },
    {
      "element": "li · Night two · Saturday 24 July Visible The full spectrum. The long night, both floors open until four.",
      "size": "502×828px",
      "position": "x 469px, y 5738px",
      "padding": [
        "19.2px",
        "20px",
        "25.6px",
        "20px"
      ],
      "radius": "0px",
      "border": "0px none rgb(17, 13, 25)",
      "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "li · Night one · Friday 23 July Infrared Slow heat. Live sets with long builds, the hall warming one degr",
      "size": "451×795px",
      "position": "x 43px, y 5818px",
      "padding": [
        "19.2px",
        "48px",
        "25.6px",
        "20px"
      ],
      "radius": "0px",
      "border": "0px none rgb(17, 13, 25)",
      "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "li · Night three · Sunday 25 July Ultraviolet The cool-down. Voices, strings and a dance piece made for t",
      "size": "451×773px",
      "position": "x 946px, y 5874px",
      "padding": [
        "19.2px",
        "20px",
        "25.6px",
        "48px"
      ],
      "radius": "0px",
      "border": "0px none rgb(241, 237, 228)",
      "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": [
      "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · archive__heat",
    "size": "794×529px",
    "position": "x 806px, y 7127px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NHx8Y29uY2VydCUyMGNyb3dkJTIwaGFuZHMlMjB1cHxlbnwxfDB8fHwxNzkxMDYzMDM5fDA&ixlib=rb-4.1.0&auto=format&fit=crop&w=900&q=60"
  },
  {
    "element": "img · img",
    "size": "794×529px",
    "position": "x 806px, y 7127px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NHx8Y29uY2VydCUyMGNyb3dkJTIwaGFuZHMlMjB1cHxlbnwxfDB8fHwxNzkxMDYzMDM5fDA&ixlib=rb-4.1.0&auto=format&fit=crop&w=900&q=60"
  },
  {
    "element": "img · m-photo-heat__img",
    "size": "462×347px",
    "position": "x 489px, y 5947px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 82%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60"
  },
  {
    "element": "img · m-photo-heat__visible",
    "size": "462×347px",
    "position": "x 489px, y 5947px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 82%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60"
  },
  {
    "element": "img · m-photo-heat__img",
    "size": "383×287px",
    "position": "x 63px, y 6053px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1526218626217-dc65a29bb444?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60"
  },
  {
    "element": "img · m-photo-heat__visible",
    "size": "383×287px",
    "position": "x 63px, y 6053px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1526218626217-dc65a29bb444?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60"
  },
  {
    "element": "img · m-photo-heat__img",
    "size": "383×287px",
    "position": "x 994px, y 6087px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1608319917470-9d9179430f8d?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60"
  },
  {
    "element": "img · m-photo-heat__visible",
    "size": "383×287px",
    "position": "x 994px, y 6087px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://images.unsplash.com/photo-1608319917470-9d9179430f8d?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60"
  }
]
```

#### 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
{
  "root": {
    "id": "ld-167",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 5314,
      "width": 1440,
      "height": 1491
    },
    "role": null,
    "label": "Three nights, three wavelengths Each night is tuned to a part of the spectrum the cameras can read, ",
    "border": "",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "158.4px",
      "left": "43.2px",
      "right": "43.2px",
      "bottom": "158.4px"
    },
    "overflow": "visible",
    "position": "relative",
    "background": "rgb(241, 237, 228)"
  },
  "cards": [
    {
      "id": "ld-258",
      "tag": "li",
      "rect": {
        "x": 806,
        "y": 7127,
        "width": 794,
        "height": 556
      },
      "role": null,
      "label": "Saturday, 01:14 · the front rows",
      "border": "0px none rgb(241, 237, 228)",
      "radius": "0px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgb(17, 13, 25)"
    },
    {
      "id": "ld-197",
      "tag": "li",
      "rect": {
        "x": 469,
        "y": 5738,
        "width": 502,
        "height": 828
      },
      "role": null,
      "label": "Night two · Saturday 24 July Visible The full spectrum. The long night, both floors open until four.",
      "border": "0px none rgb(17, 13, 25)",
      "radius": "0px",
      "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px",
      "padding": [
        "19.2px",
        "20px",
        "25.6px",
        "20px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-172",
      "tag": "li",
      "rect": {
        "x": 43,
        "y": 5818,
        "width": 451,
        "height": 795
      },
      "role": null,
      "label": "Night one · Friday 23 July Infrared Slow heat. Live sets with long builds, the hall warming one degr",
      "border": "0px none rgb(17, 13, 25)",
      "radius": "0px",
      "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px",
      "padding": [
        "19.2px",
        "48px",
        "25.6px",
        "20px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-222",
      "tag": "li",
      "rect": {
        "x": 946,
        "y": 5874,
        "width": 451,
        "height": 773
      },
      "role": null,
      "label": "Night three · Sunday 25 July Ultraviolet The cool-down. Voices, strings and a dance piece made for t",
      "border": "0px none rgb(241, 237, 228)",
      "radius": "0px",
      "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px",
      "padding": [
        "19.2px",
        "20px",
        "25.6px",
        "48px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-260",
      "tag": "img",
      "rect": {
        "x": 806,
        "y": 7127,
        "width": 794,
        "height": 529
      },
      "role": null,
      "label": "archive__heat",
      "media": {
        "alt": "A crowd cheering with raised hands, in heat colours",
        "src": "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NHx8Y29uY2VydCUyMGNyb3dkJTIwaGFuZHMlMjB1cHxlbnwxfDB8fHwxNzkxMDYzMDM5fDA&ixlib=rb-4.1.0&auto=format&fit=crop&w=900&q=60",
        "naturalWidth": 900,
        "naturalHeight": 600
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-262",
      "tag": "img",
      "rect": {
        "x": 806,
        "y": 7127,
        "width": 794,
        "height": 529
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NHx8Y29uY2VydCUyMGNyb3dkJTIwaGFuZHMlMjB1cHxlbnwxfDB8fHwxNzkxMDYzMDM5fDA&ixlib=rb-4.1.0&auto=format&fit=crop&w=900&q=60",
        "naturalWidth": 900,
        "naturalHeight": 600
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-202",
      "tag": "img",
      "rect": {
        "x": 489,
        "y": 5947,
        "width": 462,
        "height": 347
      },
      "role": null,
      "label": "m-photo-heat__img",
      "media": {
        "alt": "A DJ in headphones and sunglasses behind the decks, in heat colours",
        "src": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60",
        "naturalWidth": 700,
        "naturalHeight": 1050
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 82%"
    },
    {
      "id": "ld-204",
      "tag": "img",
      "rect": {
        "x": 489,
        "y": 5947,
        "width": 462,
        "height": 347
      },
      "role": null,
      "label": "m-photo-heat__visible",
      "media": {
        "alt": "",
        "src": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60",
        "naturalWidth": 700,
        "naturalHeight": 1050
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 82%"
    },
    {
      "id": "ld-177",
      "tag": "img",
      "rect": {
        "x": 63,
        "y": 6053,
        "width": 383,
        "height": 287
      },
      "role": null,
      "label": "m-photo-heat__img",
      "media": {
        "alt": "A singer with a raised microphone under stage lights, in heat colours",
        "src": "https://images.unsplash.com/photo-1526218626217-dc65a29bb444?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60",
        "naturalWidth": 700,
        "naturalHeight": 1050
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-179",
      "tag": "img",
      "rect": {
        "x": 63,
        "y": 6053,
        "width": 383,
        "height": 287
      },
      "role": null,
      "label": "m-photo-heat__visible",
      "media": {
        "alt": "",
        "src": "https://images.unsplash.com/photo-1526218626217-dc65a29bb444?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60",
        "naturalWidth": 700,
        "naturalHeight": 1050
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-227",
      "tag": "img",
      "rect": {
        "x": 994,
        "y": 6087,
        "width": 383,
        "height": 287
      },
      "role": null,
      "label": "m-photo-heat__img",
      "media": {
        "alt": "A woman singing into a microphone in violet light, in heat colours",
        "src": "https://images.unsplash.com/photo-1608319917470-9d9179430f8d?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60",
        "naturalWidth": 700,
        "naturalHeight": 1050
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-229",
      "tag": "img",
      "rect": {
        "x": 994,
        "y": 6087,
        "width": 383,
        "height": 287
      },
      "role": null,
      "label": "m-photo-heat__visible",
      "media": {
        "alt": "",
        "src": "https://images.unsplash.com/photo-1608319917470-9d9179430f8d?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8c2luZ2VyJTIwbWljcm9waG9uZSUyMHN0YWdlfGVufDF8MXx8fDE3OTEwNjMwNDB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60",
        "naturalWidth": 700,
        "naturalHeight": 1050
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 6105,
    "bottom": 8105,
    "pageHeight": 13551
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-171",
      "gap": "normal",
      "tag": "ol",
      "rect": {
        "x": 43,
        "y": 5738,
        "width": 1354,
        "height": 909
      },
      "role": null,
      "label": "Night one · Friday 23 July Infrared Slow heat. Live sets with long builds, the hall warming one degr",
      "columns": "451.203px 451.203px 451.219px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-172",
      "gap": "17.6px",
      "tag": "li",
      "rect": {
        "x": 43,
        "y": 5818,
        "width": 451,
        "height": 795
      },
      "role": null,
      "label": "Night one · Friday 23 July Infrared Slow heat. Live sets with long builds, the hall warming one degr",
      "columns": "383.203px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-197",
      "gap": "17.6px",
      "tag": "li",
      "rect": {
        "x": 469,
        "y": 5738,
        "width": 502,
        "height": 828
      },
      "role": null,
      "label": "Night two · Saturday 24 July Visible The full spectrum. The long night, both floors open until four.",
      "columns": "462.391px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-222",
      "gap": "17.6px",
      "tag": "li",
      "rect": {
        "x": 946,
        "y": 5874,
        "width": 451,
        "height": 773
      },
      "role": null,
      "label": "Night three · Sunday 25 July Ultraviolet The cool-down. Voices, strings and a dance piece made for t",
      "columns": "383.219px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-250",
      "gap": "16px 48px",
      "tag": "header",
      "rect": {
        "x": 0,
        "y": 6901,
        "width": 1440,
        "height": 106
      },
      "role": null,
      "label": "Last July, seen in heat What the six cameras kept from 2026. Every frame on the wall was made by the",
      "columns": "718.094px 587.531px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-258",
      "gap": "11.2px",
      "tag": "li",
      "rect": {
        "x": 806,
        "y": 7127,
        "width": 794,
        "height": 556
      },
      "role": null,
      "label": "Saturday, 01:14 · the front rows",
      "columns": "794.203px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-257",
      "gap": "57.6px",
      "tag": "ul",
      "rect": {
        "x": 0,
        "y": 7055,
        "width": 6435,
        "height": 700
      },
      "role": null,
      "label": "Saturday, 01:14 · the front rows Friday, 23:50 · the first wave Sunday, 22:45 · last song Saturday, ",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      11.2,
      16,
      17.6,
      48,
      57.6
    ],
    "representativeContentWidthsPx": [
      1354,
      794,
      718,
      502,
      498,
      462,
      451,
      383
    ]
  },
  "coverage": {
    "cards": 4,
    "media": 8,
    "animations": 0,
    "elementsInSection": 51
  },
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": [
      "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px"
    ]
  },
  "animations": [],
  "capturedAt": "2026-11-01T08:13:50.678Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **scroll** — A gallery of images, split by a vertical line, translates horizontally from right to left in response to vertical scrolling. (18s–27s; 98% 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: 1440px 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: Two-column grid with left text column and offset image panel; Horizontal scroll-driven gallery mechanic; Vertical divider motif as a structural/compositional device; Dark canvas with sharp-cornered, high-contrast imagery
- Dependencies: Specific heat/visible-light image pairs driving the content concept; Caption metadata content (timestamps, location tags); Kalnia serif display font for headline tone
- Guidance: Reuse the horizontal-scroll grid and divider motif with any paired-image concept (before/after, day/night), but the caption copy and thematic image pairing need rewriting to fit a new narrative, and interaction depth (e.g., a real split-view drag) should be added to differentiate from a plain scroll gallery.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original gallery section inspired by the design evidence titled “Horizontal split-view gallery”.

Purpose: A dark section featuring large images that scroll horizontally, displaying contrasting versions of the same scene split by a vertical line.

Structure: full-bleed. Source layout label: Full-width horizontal scrolling container nested within a vertical scroll page, with left-aligned typographic headers.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: A cinematic dark backdrop with wide images panning sideways, bisected by a sharp vertical divider contrasting color with monochrome.

Components: Section title, Explanatory text, Horizontally scrolling images, Split-view comparison line.

Style direction: photographic, bold, editorial.

Observed crop: 1440×2000px (0.72:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"86.4px","family":"Kalnia","source":"computed","traits":"Regular","weight":"200","evidence":"font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'","sampleId":"font-5","confidence":0.95,"lineHeight":"88.1px","letterSpacing":"-1.7px"} {"role":"heading","size":"34.6px","family":"Hubot Sans","source":"computed","traits":"uppercase","weight":"800","evidence":"font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.","sampleId":"font-2","confidence":0.9,"lineHeight":"31.8px","letterSpacing":"0.2px"} {"role":"body","size":"17px","family":"Hubot Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.","sampleId":"font-12","confidence":0.95,"lineHeight":"26.4px","letterSpacing":"normal"}

Color evidence: {"hex":"#F1EDE4","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#110D19","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.","sampleId":"color-2","confidence":0.9} {"hex":"#5B5664","name":"muted text","role":"muted-text","source":"computed","evidence":"color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.","sampleId":"color-4","confidence":0.8}

Typography measured inside this section: {"id":"font-10","size":"51.8px","count":1,"family":"Kalnia","traits":"Regular","weight":"200","contexts":[{"tag":"h2","top":6901,"text":"Last July, seen in heat","property":"font"}],"fontStack":"Kalnia, Georgia, serif","lineHeight":"52.9px","letterSpacing":"-1px"} {"id":"font-21","size":"17px","count":15,"family":"Hubot Sans","traits":"Regular","weight":"550","contexts":[{"tag":"dd","top":6371,"text":"Doors and camera room","property":"font"},{"tag":"dd","top":6416,"text":"Leo Marchetti","property":"font"},{"tag":"dd","top":6461,"text":"Ines Aalto","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"26.4px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-9","hex":"#110E1A","alpha":0.34901960784313724,"count":10,"contexts":[{"tag":"div","top":6363,"text":"19:00Doors and camera room","property":"border"}],"cssValue":"color(srgb 0.0666667 0.0509804 0.0980392 / 0.35)"} {"id":"color-10","hex":"#F1EEE5","alpha":0.34901960784313724,"count":5,"contexts":[{"tag":"div","top":6397,"text":"16:00Doors","property":"border"}],"cssValue":"color(srgb 0.945098 0.929412 0.894118 / 0.35)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5314,"width":1440,"height":1491},"padding":{"top":"158.4px","left":"43.2px","right":"43.2px","bottom":"158.4px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[11.2,16,17.6,48,57.6],"representativeContentWidthsPx":[1354,794,718,502,498,462,451,383]}; surfaces {"radii":[],"borders":[],"shadows":["color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px"]}; media [{"tag":"img","rect":{"x":806,"y":7127,"width":794,"height":529},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":806,"y":7127,"width":794,"height":529},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":489,"y":5947,"width":462,"height":347},"aspectRatio":1.3,"objectFit":"cover","objectPosition":"50% 82%","radius":"0px"},{"tag":"img","rect":{"x":489,"y":5947,"width":462,"height":347},"aspectRatio":1.3,"objectFit":"cover","objectPosition":"50% 82%","radius":"0px"}]

Motion evidence: scroll: A gallery of images, split by a vertical line, translates horizontally from right to left in response to vertical scrolling. (98% confidence)

Transfer these principles: Two-column grid with left text column and offset image panel; Horizontal scroll-driven gallery mechanic; Vertical divider motif as a structural/compositional device; Dark canvas with sharp-cornered, high-contrast imagery.

Dependencies: Specific heat/visible-light image pairs driving the content concept; Caption metadata content (timestamps, location tags); Kalnia serif display font for headline tone.

Adaptation guidance: Reuse the horizontal-scroll grid and divider motif with any paired-image concept (before/after, day/night), but the caption copy and thematic image pairing need rewriting to fit a new narrative, and interaction depth (e.g., a real split-view drag) should be added to differentiate from a plain scroll gallery.

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