# Horizontal carousel of feature photos

Schema: Design Details SECTION.md v3.2
Website: Playfolly
Source: https://playfolly.com/
Source section IDs: 23789ac7-55c9-45db-9d2a-05fc5a77f907
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A left-aligned two-tier heading (large white line over a gray secondary line) with a small yellow eyebrow sets a clear entry point above the row.
- Mixed-width vertical photo cards (about 800px and 400px) on black create a varied rhythm, and the bright lifestyle shots stand out against the dark ground.
- Captions pair a bold short title with a benefit-led line (certification, anchoring, customization), so each photo proves one specific claim.

What a screenshot can't show:
- The recording only shows the carousel appearing as you scroll (about 8–12s); no easing, stagger or arrow behavior was captured.
- Type is Geograph at weight 500: 60px/60px for the heading and 18px/28px for links. Card titles are 16px/24px bold, all with normal letter spacing, and section padding is 0.

Borrow: Vary card widths in a single horizontal row against a dark ground so bright photos set the rhythm, and keep each caption to one claim.
Leave alone: Don't copy the yellow accent, the conical product photography or the Geograph typeface; a clean grotesque sans is a free alternative.

## Classification

- Type: features
- Layout: Left-aligned header text above a horizontally scrolling carousel of cards.
- Styles: bold, photographic
- Confidence: 95%

## Purpose and structure

A dark-themed section with a horizontal carousel of vertical feature photos and descriptive text below each.

Visual signature: A dark background highlighting vertical, brightly lit lifestyle photos in a horizontal sliding carousel.

## Components

- Section header
- Carousel controls
- Vertical photo cards
- Card descriptions

## Typography

- Display: Geograph — 234px 700
- Heading: Geograph — 60px 500
- Body: Geograph — 16px 400

## Functional palette

- Canvas: canvas #EDBF7A
- Text: text #000000
- Text: text #FFFFFF
- Primary-Action: primary action #F9EE16
- Surface: surface #F4D602
- Surface: surface #262626

## Motion evidence

- 8.0–12.0s — Scrolling down reveals a carousel featuring images accompanied by captions. (90% confidence)

## Section quality

Overall: 63.82/100 (Good)
Scored coverage: 85%

- Typography: 66 — Strong two-tier display heading (large bold white over gray secondary line) with a small yellow eyebrow label creates clear hierarchy; body captions are legible but generic weight/size pairing. Good but not exceptional type craft. Next tier: Would need more distinctive type pairing or scale/weight nuance beyond the single display+body combination to read as memorable rather than competent-polished.
- Composition: 68 — Asymmetric mixed-width vertical photo cards (800px center, 400px sides) against black create a confident, rhythm-varied carousel row, with left-aligned header anchoring the section. Generous negative space and consistent rounded-corner treatment give it a considered, editorial feel. Next tier: Layout is a fairly standard large-caption-below-image carousel pattern; lacks an unexpected compositional device (overlap, scale shift, asymmetric caption placement) that would push it into 'strong/memorable' territory.
- Motion: inconclusive — Gemini only notes a generic 'scrolling reveals carousel' moment without timestamped per-card transition specifics (easing, stagger, arrow behavior), so motion quality cannot be scored. Next tier: Need concrete timestamped evidence of slide transition behavior, arrow interaction, or stagger timing to assess craft.
- Content: 65 — Captions are specific and benefit-driven (ISO certification, ground anchors, customization), tightly paired with matching lifestyle photography that illustrates each claim directly. Next tier: Content integration is solid but conventional caption-under-image pairing; no distinctive layout interplay between text and image (e.g., overlay, dynamic reveal) to elevate further.
- Originality: 58 — The asymmetric width carousel and conical-form product photography feel specific to this brand, but the overall pattern (dark bg, horizontal photo carousel, caption below) is a common feature-section convention. Next tier: Lacks a genuinely novel interaction, framing device, or layout twist that couldn't be swapped for any other lifestyle-photo carousel.
- Adaptability: 60 — Structure (header + arrow nav + mixed-width image cards + caption) is clearly separable from the brand's specific photography and copy; deterministic radius/sizing values are supplied and reusable. Next tier: No animation/easing specs captured, and varied card widths depend on specific image aspect ratios, adding some rebuild ambiguity.

Strengths:
- Confident mixed-width image arrangement (800px center, 400px flanks) breaks monotony of a standard uniform carousel
- Clear two-tier typographic hierarchy (bold white headline + gray subhead + yellow eyebrow label) anchors the section
- Captions pair specific, credible product claims directly with supporting photography

Weaknesses:
- Caption-below-image pattern is a common carousel convention without a distinguishing twist
- No timestamped motion detail available to assess transition or arrow interaction quality
- Visual device (dark background + bright vertical photos) alone does not create a strongly differentiated identity

Why it does not reach the next tier: The section is well-executed and considered but relies on a familiar carousel/caption structure and lacks a distinctive interaction or layout invention that would make it feel irreplaceable; motion cannot be verified to add craft weight.

## Adaptation guidance

- Effort: Medium
- Guidance: Rebuild the header+eyebrow block and arrow-nav carousel shell generically, then swap in rounded vertical image cards sized to new photography aspect ratios and new caption copy; motion/transition behavior will need to be newly specified since no animation parameters were captured.

What transfers:
- Mixed-width vertical image carousel layout
- Left-aligned header-above-grid structure with eyebrow label
- Caption block below each image pattern
- Dark canvas with bright full-bleed imagery contrast

Dependencies:
- Specific photography aspect ratios driving card width variation
- Brand-specific product claims copy
- Carousel arrow/transition animation implementation not captured in evidence

## 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/transition behavior not scored due to lack of timestamped specifics
- Only one crop/viewport observed; responsive behavior unknown
- No animation parameters captured 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: features
- Structure: horizontal sequence
- Layout: Left-aligned header text above a horizontally scrolling carousel of cards.
- Styles: bold, photographic
- Components: Section header, Carousel controls, Vertical photo cards, Card descriptions
- Purpose: A dark-themed section with a horizontal carousel of vertical feature photos and descriptive text below each.
- Visual signature: A dark background highlighting vertical, brightly lit lifestyle photos in a horizontal sliding carousel.
- Place on the page: 2 of 7, after Hero (`playfolly-com:hero-oversized-wordmark-3d`), before Gallery (`playfolly-com:gallery-full-bleed-slideshow`)

### Crop and composition

- Crop: 1440×1190px; aspect ratio 1.21:1
- Page bounds: 2000–3190px of 8087px
- Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control.

### 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": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "60px",
      "weight": "500",
      "lineHeight": "60px",
      "letterSpacing": "normal",
      "sample": "A new way to play.",
      "element": "h1",
      "occurrences": 7,
      "sourceId": "font-1"
    },
    {
      "role": "action label",
      "family": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "18px",
      "weight": "500",
      "lineHeight": "28px",
      "letterSpacing": "normal",
      "sample": "Get updates",
      "element": "button",
      "occurrences": 3,
      "sourceId": "font-2"
    },
    {
      "role": "UI/supporting text",
      "family": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "16px",
      "weight": "700",
      "lineHeight": "24px",
      "letterSpacing": "normal",
      "sample": "A treehouse, without a tree.",
      "element": "strong",
      "occurrences": 13,
      "sourceId": "font-8"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "234px",
      "family": "Geograph",
      "source": "computed",
      "traits": "Regular",
      "weight": "700",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 234px font size with negative letter spacing used for large impactful text 'Play beautiful'.",
      "sampleId": "font-4",
      "confidence": 1,
      "lineHeight": "234px",
      "letterSpacing": "-11.7px"
    },
    {
      "role": "heading",
      "size": "60px",
      "family": "Geograph",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 60px font used for primary section headings like 'A new way to play.'.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "60px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geograph",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 16px regular weight font used for general body copy and descriptive text.",
      "sampleId": "font-6",
      "confidence": 0.9,
      "lineHeight": "24px",
      "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": "#F9EE16",
      "cssValue": "rgb(249, 238, 22)",
      "alpha": 1,
      "appliedAs": [
        "control-background",
        "text"
      ],
      "occurrences": 5,
      "sourceId": "color-7"
    },
    {
      "value": "#333335",
      "cssValue": "rgb(51, 51, 53)",
      "alpha": 1,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 6,
      "sourceId": "color-9"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#EDBF7A",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(237, 191, 122); AI role: Used extensively as a background color for the body and major sections.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black used for primary text and button text.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White used for large display text, secondary text on dark backgrounds, and icons.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#F9EE16",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-7: computed rgb(249, 238, 22); AI role: Bright yellow used for the 'Get updates' call to action button.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#F4D602",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(244, 214, 2); AI role: Used as the background color for the 'Want one?' section.",
      "sampleId": "color-4",
      "confidence": 0.85
    },
    {
      "hex": "#262626",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(38, 38, 38); AI role: Dark gray used as background for adapter feature cards.",
      "sampleId": "color-5",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Pill-shaped (fully rounded) for buttons and inputs; large border radii for feature cards.",
  "density": "Low density with ample whitespace focusing attention on the large typography and 3D visuals.",
  "evidence": "Visual inspection of the desktop screenshots reveals rounded forms, pill buttons, wide sections, and large spacing.",
  "borderStyle": "Mostly borderless with solid background colors; some cards have subtle dark borders.",
  "buttonStyle": "Solid fill with pill shape and bold text.",
  "cornerStyle": "Rounded corners heavily utilized on buttons, feature cards, and input fields.",
  "contentWidth": "Wide layout utilizing full viewport width for backgrounds, with content centered within a max-width container.",
  "spacingRhythm": "Generous spacing with large paddings between major sections to isolate content."
}
```

### Reconstruction specification

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

- Root: 1440×1190px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(0, 0, 0); radius 0px.
- Representative content widths: 1296, 1216, 800, 400, 302px.
- Layout containers: 0; cards/surfaces: 3; media elements: 5; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 2000,
      "bottom": 3190,
      "pageHeight": 8087
    }
  },
  "container": {
    "size": "1440×1190px",
    "position": "x 0px, y 1973px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(0, 0, 0)",
    "radius": "0px",
    "border": "0px solid rgb(255, 255, 255)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      1296,
      1216,
      800,
      400,
      302
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "img · block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "size": "800×600px",
      "position": "x 454px, y 2373px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "18px",
      "border": "0px solid rgb(255, 255, 255)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "size": "400×600px",
      "position": "x 36px, y 2373px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "18px",
      "border": "0px solid rgb(255, 255, 255)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "size": "400×600px",
      "position": "x 1272px, y 2373px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "18px",
      "border": "0px solid rgb(255, 255, 255)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "18px",
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
    "size": "800×600px",
    "position": "x 454px, y 2373px",
    "aspectRatio": 1.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "18px",
    "overflow": "hidden",
    "source": "https://playfolly.com/cdn/shop/files/Playfolly_026.jpg?v=1772247798&width=1600"
  },
  {
    "element": "img · block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
    "size": "400×600px",
    "position": "x 36px, y 2373px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "18px",
    "overflow": "hidden",
    "source": "https://playfolly.com/cdn/shop/files/Playfolly_000_Close.jpg?v=1772264630&width=1600"
  },
  {
    "element": "img · block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
    "size": "400×600px",
    "position": "x 1272px, y 2373px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "18px",
    "overflow": "hidden",
    "source": "https://playfolly.com/cdn/shop/files/Playfolly_021_Close.jpg?v=1772264365&width=1600"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1294px, y 2279px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 1338px, y 2279px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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-452",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 1973,
      "width": 1440,
      "height": 1190
    },
    "role": null,
    "label": "A treehouse, without a tree. Lifted off the ground to create the feeling of climbing high, with a ta",
    "border": "0px solid rgb(255, 255, 255)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(0, 0, 0)"
  },
  "cards": [
    {
      "id": "ld-463",
      "tag": "img",
      "rect": {
        "x": 454,
        "y": 2373,
        "width": 800,
        "height": 600
      },
      "role": null,
      "label": "block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "border": "0px solid rgb(255, 255, 255)",
      "radius": "18px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-457",
      "tag": "img",
      "rect": {
        "x": 36,
        "y": 2373,
        "width": 400,
        "height": 600
      },
      "role": null,
      "label": "block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "border": "0px solid rgb(255, 255, 255)",
      "radius": "18px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-469",
      "tag": "img",
      "rect": {
        "x": 1272,
        "y": 2373,
        "width": 400,
        "height": 600
      },
      "role": null,
      "label": "block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "border": "0px solid rgb(255, 255, 255)",
      "radius": "18px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-463",
      "tag": "img",
      "rect": {
        "x": 454,
        "y": 2373,
        "width": 800,
        "height": 600
      },
      "role": null,
      "label": "block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "media": {
        "alt": "Dangerously safe.An inherently stable conical form and broad stance resist toppling by design, with ground anchors for added assurance — designed to ISO 8124:4, with New Zealand certification pending.",
        "src": "https://playfolly.com/cdn/shop/files/Playfolly_026.jpg?v=1772247798&width=1600",
        "naturalWidth": 1024,
        "naturalHeight": 683
      },
      "radius": "18px",
      "overflow": "hidden",
      "objectFit": "cover",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-457",
      "tag": "img",
      "rect": {
        "x": 36,
        "y": 2373,
        "width": 400,
        "height": 600
      },
      "role": null,
      "label": "block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "media": {
        "alt": "A treehouse, without a tree. Lifted off the ground to create the feeling of climbing high, with a tall, slender form that fits neatly into real gardens.",
        "src": "https://playfolly.com/cdn/shop/files/Playfolly_000_Close.jpg?v=1772264630&width=1600",
        "naturalWidth": 960,
        "naturalHeight": 1280
      },
      "radius": "18px",
      "overflow": "hidden",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-469",
      "tag": "img",
      "rect": {
        "x": 1272,
        "y": 2373,
        "width": 400,
        "height": 600
      },
      "role": null,
      "label": "block h-[60vh]! w-auto object-cover rounded-pf overflow-hidden",
      "media": {
        "alt": "Match your mood. Or your moodboard.Choose almost any colour to complement your home or express your child’s personality — then configure your layout and swap accessories as you go.",
        "src": "https://playfolly.com/cdn/shop/files/Playfolly_021_Close.jpg?v=1772264365&width=1600",
        "naturalWidth": 960,
        "naturalHeight": 1280
      },
      "radius": "18px",
      "overflow": "hidden",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-512",
      "tag": "svg",
      "rect": {
        "x": 1294,
        "y": 2279,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-515",
      "tag": "svg",
      "rect": {
        "x": 1338,
        "y": 2279,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 2000,
    "bottom": 3190,
    "pageHeight": 8087
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      1296,
      1216,
      800,
      400,
      302
    ]
  },
  "coverage": {
    "cards": 3,
    "media": 5,
    "animations": 0,
    "elementsInSection": 20
  },
  "surfaces": {
    "radii": [
      "18px",
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-30T21:55:03.099Z",
  "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** — Scrolling down reveals a carousel featuring images accompanied by captions. (8s–12s; 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: 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: Mixed-width vertical image carousel layout; Left-aligned header-above-grid structure with eyebrow label; Caption block below each image pattern; Dark canvas with bright full-bleed imagery contrast
- Dependencies: Specific photography aspect ratios driving card width variation; Brand-specific product claims copy; Carousel arrow/transition animation implementation not captured in evidence
- Guidance: Rebuild the header+eyebrow block and arrow-nav carousel shell generically, then swap in rounded vertical image cards sized to new photography aspect ratios and new caption copy; motion/transition behavior will need to be newly specified since no animation parameters were captured.

### Evidence readiness

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


### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Horizontal carousel of feature photos”.

Purpose: A dark-themed section with a horizontal carousel of vertical feature photos and descriptive text below each.

Structure: horizontal sequence. Source layout label: Left-aligned header text above a horizontally scrolling carousel of cards.. Preserve the sense of continuation with a visible next item, progress cue, or directional control.

Visual signature to preserve at the pattern level: A dark background highlighting vertical, brightly lit lifestyle photos in a horizontal sliding carousel.

Components: Section header, Carousel controls, Vertical photo cards, Card descriptions.

Style direction: bold, photographic.

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

Typography evidence: {"role":"display","size":"234px","family":"Geograph","source":"computed","traits":"Regular","weight":"700","evidence":"font-4: computed CSS at 1440×1000; AI role: 234px font size with negative letter spacing used for large impactful text 'Play beautiful'.","sampleId":"font-4","confidence":1,"lineHeight":"234px","letterSpacing":"-11.7px"} {"role":"heading","size":"60px","family":"Geograph","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 60px font used for primary section headings like 'A new way to play.'.","sampleId":"font-1","confidence":0.95,"lineHeight":"60px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Geograph","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 16px regular weight font used for general body copy and descriptive text.","sampleId":"font-6","confidence":0.9,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#EDBF7A","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(237, 191, 122); AI role: Used extensively as a background color for the body and major sections.","sampleId":"color-1","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black used for primary text and button text.","sampleId":"color-2","confidence":0.9} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White used for large display text, secondary text on dark backgrounds, and icons.","sampleId":"color-3","confidence":0.9} {"hex":"#F9EE16","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(249, 238, 22); AI role: Bright yellow used for the 'Get updates' call to action button.","sampleId":"color-7","confidence":0.9} {"hex":"#F4D602","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(244, 214, 2); AI role: Used as the background color for the 'Want one?' section.","sampleId":"color-4","confidence":0.85} {"hex":"#262626","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(38, 38, 38); AI role: Dark gray used as background for adapter feature cards.","sampleId":"color-5","confidence":0.8}

Typography measured inside this section: {"id":"font-1","size":"60px","count":7,"family":"Geograph","traits":"Regular","weight":"500","contexts":[{"tag":"h1","top":2129,"text":"A new way to play.","property":"font"},{"tag":"h2","top":2189,"text":"Designed for imagination. Built for real life.","property":"font"},{"tag":"h2","top":3999,"text":"Take a look around.","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"60px","letterSpacing":"normal"} {"id":"font-2","size":"18px","count":3,"family":"Geograph","traits":"Regular","weight":"500","contexts":[{"tag":"button","top":-80,"text":"Get updates","property":"font"},{"tag":"h4","top":2101,"text":"Features","property":"font"},{"tag":"button","top":4091,"text":"Run","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"28px","letterSpacing":"normal"} {"id":"font-8","size":"16px","count":13,"family":"Geograph","traits":"Regular","weight":"700","contexts":[{"tag":"strong","top":2989,"text":"A treehouse, without a tree.","property":"font"},{"tag":"strong","top":2989,"text":"Dangerously safe.","property":"font"},{"tag":"strong","top":2989,"text":"Match your mood. Or your moodboard.","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"24px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-7","hex":"#F9EE16","alpha":1,"count":5,"contexts":[{"tag":"button","top":-80,"text":"Get updates","property":"control-background"},{"tag":"h4","top":2101,"text":"Features","property":"text"}],"cssValue":"rgb(249, 238, 22)"} {"id":"color-9","hex":"#333335","alpha":1,"count":6,"contexts":[{"tag":"button","top":2273,"text":"","property":"control-background"}],"cssValue":"rgb(51, 51, 53)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":1973,"width":1440,"height":1190},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[1296,1216,800,400,302]}; surfaces {"radii":["18px","3.35544e+07px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":454,"y":2373,"width":800,"height":600},"aspectRatio":1.3,"objectFit":"cover","objectPosition":"50% 50%","radius":"18px"},{"tag":"img","rect":{"x":36,"y":2373,"width":400,"height":600},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"18px"},{"tag":"img","rect":{"x":1272,"y":2373,"width":400,"height":600},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"18px"},{"tag":"svg","rect":{"x":1294,"y":2279,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: Scrolling down reveals a carousel featuring images accompanied by captions. (90% confidence)

Transfer these principles: Mixed-width vertical image carousel layout; Left-aligned header-above-grid structure with eyebrow label; Caption block below each image pattern; Dark canvas with bright full-bleed imagery contrast.

Dependencies: Specific photography aspect ratios driving card width variation; Brand-specific product claims copy; Carousel arrow/transition animation implementation not captured in evidence.

Adaptation guidance: Rebuild the header+eyebrow block and arrow-nav carousel shell generically, then swap in rounded vertical image cards sized to new photography aspect ratios and new caption copy; motion/transition behavior will need to be newly specified since no animation parameters were captured.

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