# Full-bleed photo slideshow with controls

Schema: Design Details SECTION.md v3.2
Website: Playfolly
Source: https://playfolly.com/
Source section IDs: 2b690156-6f25-4a57-b22e-d9ed56504500
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The photograph fills the whole width with zero section padding, so the night scene carries the message with no text competing for attention.
- Strong leading lines (steps, deck, play structure) guide the eye to a clear focal subject, and the dark image makes the glowing product stand out.
- Dots and arrows sit small and centered at the bottom with a 20px gap, so they are easy to find without covering the picture.

What a screenshot can't show:
- The recording shows only a second media carousel revealing on scroll between 8 and 12 seconds; no slide transition, easing or arrow hover is visible.
- Nearby type is measured at 60px/60px weight 500 for the headline and 18px/28px for the button label, both with normal letter spacing.

Borrow: Let one strong, well-composed photograph fill the frame and keep the controls tiny and centered so the image does the talking.
Leave alone: Don't copy the warm sand and yellow palette, the Geograph typeface (use a clean neutral grotesque instead), or the specific backyard night photo.

## Classification

- Type: gallery
- Layout: Full-bleed media container with overlaid bottom-center navigation controls.
- Styles: photographic, minimal
- Confidence: 95%

## Purpose and structure

A full-width, full-bleed photo or video slideshow with pagination dots and navigation arrows at the bottom.

Visual signature: A large, immersive nighttime photograph of the product in a backyard setting, with simple slideshow controls.

## Components

- Full-bleed image
- Pagination dots
- Navigation arrows

## 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 — A second carousel containing videos or full-bleed media is revealed on scroll. (85% confidence)

## Section quality

Overall: 57.20/100 (Competent)
Scored coverage: 100%

- Typography: 55 — Only a small label 'Run' and minimal pagination text visible in this crop; no display or heading type present here, so typographic ambition can't be judged beyond a clean, legible sans label pill. Next tier: No meaningful typographic hierarchy or scale is present within this section crop to demonstrate craft beyond a small label.
- Composition: 66 — Full-bleed nighttime photograph is well composed with strong leading lines (steps, deck, play structure) and a clear focal subject; controls are minimally placed bottom-center with restraint, giving an immersive, uncluttered layout. Next tier: Control cluster is a fairly generic pill/dot pattern with no distinguishing layout choice beyond standard centered placement, keeping it short of a highly considered composition.
- Motion: 48 — Gemini notes a second carousel revealed on scroll at 8-12s, but no specific transition, easing, or interaction detail is given for the slideshow itself (e.g., crossfade, slide, arrow hover), making this inconclusive for genuine craft assessment. Next tier: Lack of described frame-level transition specifics for the slideshow (arrow/dot behavior, image change method) prevents scoring above baseline competence.
- Content: 62 — The photograph directly supports the product story (outdoor lighting fixture at night) and integrates cleanly with minimal UI chrome, letting the image carry the message without competing text. Next tier: No supporting copy, caption, or contextual label ties the image to a narrative beyond a single word ('Run'), limiting content depth.
- Originality: 52 — Full-bleed photo slideshow with bottom dots and arrows is an extremely common gallery pattern; the only distinguishing element is the quality of the photograph itself, not the interaction design. Next tier: No distinctive mechanic, layout twist, or interaction detail separates this from a stock carousel pattern.
- Adaptability: 58 — Structure (full-bleed media + overlay nav) is simple and portable; pill-shaped radius and dark overlay bar are specified tokens that could transfer, but reliance on one specific photographic asset ties visual impact to content. Next tier: Dependence on a specific high-quality photograph for visual impact limits separability of skin from the structural pattern.

Strengths:
- Strong, atmospheric nighttime photography that gives the section visual weight
- Minimal, unobtrusive navigation controls that don't compete with the image
- Clean full-bleed layout maximizing immersion

Weaknesses:
- Generic slideshow control pattern (dots + arrows) with no distinguishing design choice
- No described transition or interaction detail for slideshow motion
- No typographic or copy layer to add context beyond a one-word label
- Visual impact leans heavily on the photograph rather than compositional or interaction design

Why it does not reach the next tier: The section relies on a single strong photograph and a widely used full-bleed carousel pattern; without distinct typographic hierarchy, novel interaction behavior, or compositional ideas beyond centered dots and arrows, it reads as competent and polished rather than memorable or inventive.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the full-bleed container and overlay control bar structure, but swap in different photography while keeping dot/arrow placement and pill shape consistent for a quick reskin.

What transfers:
- Full-bleed media container pattern
- Bottom-center pill-shaped navigation control bar
- Minimal dot pagination with arrow controls

Dependencies:
- High-quality photographic or video assets to drive visual impact
- Overlay dark background pill for control legibility against varied imagery

## 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 timestamped detail on actual slide transition behavior
- Font and color details for this specific section are not confirmed to appear within this crop
- Single crop may not reflect full gallery image set

## 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: centered single-column
- Layout: Full-bleed media container with overlaid bottom-center navigation controls.
- Styles: photographic, minimal
- Components: Full-bleed image, Pagination dots, Navigation arrows
- Purpose: A full-width, full-bleed photo or video slideshow with pagination dots and navigation arrows at the bottom.
- Visual signature: A large, immersive nighttime photograph of the product in a backyard setting, with simple slideshow controls.
- Place on the page: 3 of 7, after Feature collection (`playfolly-com:features-horizontal-carousel`), before Feature collection (`playfolly-com:features-accessory-cards`)

### Crop and composition

- Crop: 1440×1000px; aspect ratio 1.44:1
- Page bounds: 3190–4190px of 8087px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### Exact typography evidence

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

```json
{
  "sectionScale": [
    {
      "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"
    }
  ],
  "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": "#EDBF7A",
      "cssValue": "rgb(237, 191, 122)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 5,
      "sourceId": "color-1"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "svg-fill",
        "text"
      ],
      "occurrences": 10,
      "sourceId": "color-13"
    }
  ],
  "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×1000px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(0, 0, 0); radius 0px.
- Observed gaps: 20px.
- Representative content widths: 1408px.
- Layout containers: 0; cards/surfaces: 0; media elements: 3; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 3190,
      "bottom": 4190,
      "pageHeight": 8087
    }
  },
  "container": {
    "size": "1440×1000px",
    "position": "x 0px, y 3163px",
    "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": [
      20
    ],
    "representativeContentWidthsPx": [
      1408
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · block w-full md:h-full object-contain rounded-pf md:rounded-none md:object-cover transition-opacity",
    "size": "1408×1000px",
    "position": "x 16px, y 3163px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://playfolly.com/cdn/shop/files/Playfolly_048.jpg?v=1772247800&width=1600"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 858px, y 4103px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 902px, y 4103px",
    "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-517",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 3163,
      "width": 1440,
      "height": 1000
    },
    "role": null,
    "label": "Take a look around.Run",
    "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": [],
  "media": [
    {
      "id": "ld-592",
      "tag": "img",
      "rect": {
        "x": 16,
        "y": 3163,
        "width": 1408,
        "height": 1000
      },
      "role": null,
      "label": "block w-full md:h-full object-contain rounded-pf md:rounded-none md:object-cover transition-opacity ",
      "media": {
        "alt": "",
        "src": "https://playfolly.com/cdn/shop/files/Playfolly_048.jpg?v=1772247800&width=1600",
        "naturalWidth": 1024,
        "naturalHeight": 683
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-622",
      "tag": "svg",
      "rect": {
        "x": 858,
        "y": 4103,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-625",
      "tag": "svg",
      "rect": {
        "x": 902,
        "y": 4103,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 3190,
    "bottom": 4190,
    "pageHeight": 8087
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [
      20
    ],
    "representativeContentWidthsPx": [
      1408
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 3,
    "animations": 0,
    "elementsInSection": 14
  },
  "surfaces": {
    "radii": [
      "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** — A second carousel containing videos or full-bleed media is revealed on scroll. (8s–12s; 85% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

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

### Responsive contract

- Measured viewport: 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: low
- What transfers: Full-bleed media container pattern; Bottom-center pill-shaped navigation control bar; Minimal dot pagination with arrow controls
- Dependencies: High-quality photographic or video assets to drive visual impact; Overlay dark background pill for control legibility against varied imagery
- Guidance: Reuse the full-bleed container and overlay control bar structure, but swap in different photography while keeping dot/arrow placement and pill shape consistent for a quick reskin.

### 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 “Full-bleed photo slideshow with controls”.

Purpose: A full-width, full-bleed photo or video slideshow with pagination dots and navigation arrows at the bottom.

Structure: centered single-column. Source layout label: Full-bleed media container with overlaid bottom-center navigation controls.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: A large, immersive nighttime photograph of the product in a backyard setting, with simple slideshow controls.

Components: Full-bleed image, Pagination dots, Navigation arrows.

Style direction: photographic, minimal.

Observed crop: 1440×1000px (1.44: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"}

Colors measured inside this section: {"id":"color-1","hex":"#EDBF7A","alpha":1,"count":5,"contexts":[{"tag":"body","top":0,"text":"Get updatesYellowBlueGreenSandPlayfolly is what happens when architecture meets a treehouse. Modular","property":"background"},{"tag":"div","top":0,"text":"Get updatesYellowBlueGreenSandPlayfolly is what happens when architecture meets a treehouse. Modular","property":"background"},{"tag":"section","top":4163,"text":"The Playfolly System.One adapter, endless ways to play.Available now, with more to come — built to k","property":"background"}],"cssValue":"rgb(237, 191, 122)"} {"id":"color-13","hex":"#FFFFFF","alpha":0.8,"count":10,"contexts":[{"tag":"path","top":878,"text":"","property":"svg-fill"},{"tag":"span","top":890,"text":"Yellow","property":"text"},{"tag":"button","top":4091,"text":"Run","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.8)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":3163,"width":1440,"height":1000},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[20],"representativeContentWidthsPx":[1408]}; surfaces {"radii":["3.35544e+07px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":16,"y":3163,"width":1408,"height":1000},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":858,"y":4103,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":902,"y":4103,"width":24,"height":24},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: A second carousel containing videos or full-bleed media is revealed on scroll. (85% confidence)

Transfer these principles: Full-bleed media container pattern; Bottom-center pill-shaped navigation control bar; Minimal dot pagination with arrow controls.

Dependencies: High-quality photographic or video assets to drive visual impact; Overlay dark background pill for control legibility against varied imagery.

Adaptation guidance: Reuse the full-bleed container and overlay control bar structure, but swap in different photography while keeping dot/arrow placement and pill shape consistent for a quick reskin.

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