# Oversized wordmark over 3D product render

Schema: Design Details SECTION.md v3.2
Website: Playfolly
Source: https://playfolly.com/
Source section IDs: 25130933-3b4f-4ec5-85a0-ec96c9611411
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The giant white wordmark sits behind the yellow 3D structure, so the product overlaps the type and the page gets real depth and a clear focal point.
- A warm tan canvas with one saturated yellow object and black and white text keeps the colour roles simple and lets the product stand out.
- The small swatch picker sits mid-canvas next to short 16px labels and a 30px intro line, so the customization idea reads instantly without clutter.

What a screenshot can't show:
- Over the first 8 seconds the camera angle on the 3D model shifts as you scroll, and clicking a swatch recolours the model live.
- The measured type is Geograph: 30px/36px medium for the intro line and 16px/24px regular for labels, with a 6px gap between small items.

Borrow: Let a product object overlap oversized type and respond to user input, so one hero shows depth and function together.
Leave alone: Don't copy the yellow play-structure render, the tan and yellow palette, or the Geograph typeface; use a free grotesque like Inter or Work Sans with your own object and colours.

## Classification

- Type: hero
- Layout: Full-bleed background with a central 3D element and top-aligned oversized typography.
- Styles: bold, colourful, typographic, playful
- Confidence: 95%

## Purpose and structure

A hero section featuring a large 3D product render with an oversized wordmark that goes behind the product. Includes a color selection palette.

Visual signature: A bright yellow 3D play structure layered in front of a massive white wordmark, with color toggle buttons.

## Components

- Oversized wordmark
- 3D product render
- Color picker palette
- Descriptive text overlay

## 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

- 0.0–8.0s — The camera angle on the 3D model changes on scroll, and the user interacts with the color palette to alter the color of the 3D model. (95% confidence)

## Section quality

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

- Typography: 68 — The 234px wordmark with tight negative letter-spacing creates a confident, oversized display treatment layered behind the 3D render, paired with restrained 16px body copy. Strong scale contrast and a single family used consistently gives polish, but the wordmark itself is a fairly common oversized-logo hero trope. Next tier: Needs a more distinctive type cut, custom ligatures, or kinetic typographic behavior beyond static scale contrast to feel truly singular.
- Composition: 72 — The vertical stacking of giant wordmark behind the product, centered 3D object, and color/mode picker sitting mid-canvas creates clear depth and a confident focal hierarchy; generous warm canvas color isolates the product without clutter. The asymmetric placement of descriptive text to the right balances the dense left-weighted structure. Next tier: Grid relationships feel intuitive rather than engineered; a more deliberate alignment between the picker, text blocks, and wordmark baseline would push it into the strong/memorable range.
- Motion: 58 — Gemini confirms a 0-8s window where camera angle on the 3D model changes on scroll and color palette toggles swap the product's material color — concrete, visible interaction tied to user input and scroll, which is more than decorative. Next tier: No easing, duration, or choreography detail provided to confirm the motion feels crafted rather than a default scroll-linked rotation; need evidence of transition quality to score higher.
- Content: 65 — Product imagery, color variants, and copy work together to explain a real customization feature (day/night, color swatches) rather than being purely decorative; repeated duplicate text blocks suggest this crop spans a loop or redundant layout. Next tier: The duplicated descriptive paragraph visible twice in the crop suggests either a scroll-pinned repeat or layout inefficiency, which undercuts how tightly content and layout are integrated.
- Originality: 62 — Oversized wordmark-behind-hero-object with a color picker is a recognizable contemporary pattern seen across many product sites; the playful yellow treehouse subject gives it some distinct personality but the structural idea is not new. Next tier: Would need a formal device unique to this brand (e.g., unconventional wordmark cropping, unexpected interaction model) rather than the familiar big-type-behind-product formula to reach strong/memorable.
- Adaptability: 60 — Deterministic tokens (pill radii, specific font sizes/weights, color roles) are cleanly separable from structure — the layout (wordmark/product/picker/copy) could be reskinned with different imagery and palette fairly directly given documented spacing and surface rules. Next tier: Lack of documented animation parameters for the scroll-triggered camera/color change limits certainty about how separable the motion layer is from the skin.

Strengths:
- Oversized wordmark layered behind a 3D render creates strong depth and scale hierarchy
- Interactive color palette tied to visible product color changes adds functional delight
- Consistent warm monochrome canvas isolates the product without visual noise

Weaknesses:
- Duplicate descriptive text blocks visible in the crop suggest layout redundancy or an awkward scroll loop
- Oversized wordmark-behind-object pattern is a common contemporary hero trope
- No documented motion easing/duration evidence to confirm crafted transitions versus default scroll-linked behavior

Why it does not reach the next tier: The section demonstrates confident scale and color hierarchy but relies on a familiar structural formula (giant wordmark + centered product + swatch picker) without a distinguishing formal twist, and the duplicated text content suggests some execution looseness that keeps it short of strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Swap in a brand wordmark at large scale and matching product renders per color option; replicate the swap mechanism between variant images rather than re-rendering 3D live, and recreate the scroll-linked camera shift using CSS/JS transform interpolation.

What transfers:
- Oversized display wordmark positioned behind a centered hero object
- Color/variant picker paired with product imagery
- Warm flat-color canvas background isolating product silhouette

Dependencies:
- Custom 3D product renders per color variant
- Specific Geograph font family and negative letter-spacing values
- Scroll-triggered camera angle change script

## 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 timing/easing data available to assess motion craft quality
- Crop shows duplicate text blocks that may be artifacts of capture rather than actual design intent
- Cannot verify exact 3D rendering technique or interaction smoothness without live video

## 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: hero
- Source type: hero
- Structure: full-bleed
- Layout: Full-bleed background with a central 3D element and top-aligned oversized typography.
- Styles: bold, colourful, typographic, playful
- Components: Oversized wordmark, 3D product render, Color picker palette, Descriptive text overlay
- Purpose: A hero section featuring a large 3D product render with an oversized wordmark that goes behind the product. Includes a color selection palette.
- Visual signature: A bright yellow 3D play structure layered in front of a massive white wordmark, with color toggle buttons.
- Place on the page: 1 of 7, before Feature collection (`playfolly-com:features-horizontal-carousel`)

### Crop and composition

- Crop: 1440×2000px; aspect ratio 0.72:1
- Page bounds: 0–2000px of 8087px
- 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": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "30px",
      "weight": "500",
      "lineHeight": "36px",
      "letterSpacing": "normal",
      "sample": "Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l",
      "element": "p",
      "occurrences": 2,
      "sourceId": "font-3"
    },
    {
      "role": "UI/supporting text",
      "family": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "16px",
      "weight": "400",
      "lineHeight": "24px",
      "letterSpacing": "normal",
      "sample": "Yellow",
      "element": "span",
      "occurrences": 29,
      "sourceId": "font-6"
    }
  ],
  "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": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 21,
      "sourceId": "color-2"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "border",
        "text"
      ],
      "occurrences": 82,
      "sourceId": "color-3"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.05)",
      "alpha": 0.050980392156862744,
      "appliedAs": [
        "background"
      ],
      "occurrences": 4,
      "sourceId": "color-8"
    },
    {
      "value": "#45528A",
      "cssValue": "rgb(69, 82, 138)",
      "alpha": 1,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 2,
      "sourceId": "color-10"
    },
    {
      "value": "#888048",
      "cssValue": "rgb(136, 128, 72)",
      "alpha": 1,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 2,
      "sourceId": "color-11"
    },
    {
      "value": "#FAECC2",
      "cssValue": "rgb(250, 236, 194)",
      "alpha": 1,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 2,
      "sourceId": "color-12"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "svg-fill",
        "text"
      ],
      "occurrences": 10,
      "sourceId": "color-13"
    },
    {
      "value": "#FFBB00",
      "cssValue": "rgb(255, 187, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 4,
      "sourceId": "color-14"
    },
    {
      "value": "#FFBF00",
      "cssValue": "rgb(255, 191, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-15"
    },
    {
      "value": "#0040FF",
      "cssValue": "rgb(0, 64, 255)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-16"
    },
    {
      "value": "#00FF40",
      "cssValue": "rgb(0, 255, 64)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-17"
    },
    {
      "value": "#FF00BF",
      "cssValue": "rgb(255, 0, 191)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-18"
    },
    {
      "value": "#00FF3C",
      "cssValue": "rgb(0, 255, 60)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-19"
    },
    {
      "value": "#FF00C4",
      "cssValue": "rgb(255, 0, 196)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-20"
    },
    {
      "value": "#0044FF",
      "cssValue": "rgb(0, 68, 255)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-21"
    }
  ],
  "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 container was not deterministically isolated.
- Observed gaps: 6px.
- Representative content widths: 1221, 371, 289px.
- Layout containers: 1; cards/surfaces: 0; media elements: 8; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 2000,
      "pageHeight": 8087
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [
      6
    ],
    "representativeContentWidthsPx": [
      1221,
      371,
      289
    ]
  },
  "columns": [
    {
      "element": "ul · YellowBlueGreenSand",
      "size": "289×53px",
      "position": "x 647px, y 864px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "6px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "3.35544e+07px"
    ],
    "borders": [
      "3px solid rgb(255, 255, 255)",
      "3px solid rgba(0, 0, 0, 0)"
    ],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · block w-auto h-full object-contain md:object-cover",
    "size": "1221×1829px",
    "position": "x 109px, y 171px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://playfolly.com/cdn/shop/files/yellow-day.png?v=1772094355&width=1600"
  },
  {
    "element": "img · block w-auto h-full object-contain md:object-cover",
    "size": "1221×1829px",
    "position": "x 109px, y 171px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://playfolly.com/cdn/shop/files/blue-day.png?v=1772094356&width=1600"
  },
  {
    "element": "img · block w-auto h-full object-contain md:object-cover",
    "size": "1221×1829px",
    "position": "x 109px, y 171px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://playfolly.com/cdn/shop/files/green-day.png?v=1772094356&width=1600"
  },
  {
    "element": "img · block w-auto h-full object-contain md:object-cover",
    "size": "1221×1829px",
    "position": "x 109px, y 171px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://playfolly.com/cdn/shop/files/sand-day.png?v=1772094356&width=1600"
  },
  {
    "element": "svg · svg",
    "size": "1440×365px",
    "position": "x 0px, y 0px",
    "aspectRatio": 3.9,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "53×53px",
    "position": "x 883px, y 864px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "27×27px",
    "position": "x 518px, y 877px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "25×25px",
    "position": "x 578px, y 878px",
    "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": null,
  "cards": [],
  "media": [
    {
      "id": "ld-46",
      "tag": "img",
      "rect": {
        "x": 109,
        "y": 171,
        "width": 1221,
        "height": 1829
      },
      "role": null,
      "label": "block w-auto h-full object-contain md:object-cover",
      "media": {
        "alt": "Yellow",
        "src": "https://playfolly.com/cdn/shop/files/yellow-day.png?v=1772094355&width=1600",
        "naturalWidth": 1446,
        "naturalHeight": 2166
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-48",
      "tag": "img",
      "rect": {
        "x": 109,
        "y": 171,
        "width": 1221,
        "height": 1829
      },
      "role": null,
      "label": "block w-auto h-full object-contain md:object-cover",
      "media": {
        "alt": "Blue",
        "src": "https://playfolly.com/cdn/shop/files/blue-day.png?v=1772094356&width=1600",
        "naturalWidth": 1446,
        "naturalHeight": 2166
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-50",
      "tag": "img",
      "rect": {
        "x": 109,
        "y": 171,
        "width": 1221,
        "height": 1829
      },
      "role": null,
      "label": "block w-auto h-full object-contain md:object-cover",
      "media": {
        "alt": "Green",
        "src": "https://playfolly.com/cdn/shop/files/green-day.png?v=1772094356&width=1600",
        "naturalWidth": 1446,
        "naturalHeight": 2166
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-52",
      "tag": "img",
      "rect": {
        "x": 109,
        "y": 171,
        "width": 1221,
        "height": 1829
      },
      "role": null,
      "label": "block w-auto h-full object-contain md:object-cover",
      "media": {
        "alt": "Sand",
        "src": "https://playfolly.com/cdn/shop/files/sand-day.png?v=1772094356&width=1600",
        "naturalWidth": 1446,
        "naturalHeight": 2166
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-23",
      "tag": "svg",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 365
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 3.9,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-78",
      "tag": "svg",
      "rect": {
        "x": 883,
        "y": 864,
        "width": 53,
        "height": 53
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-57",
      "tag": "svg",
      "rect": {
        "x": 518,
        "y": 877,
        "width": 27,
        "height": 27
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-60",
      "tag": "svg",
      "rect": {
        "x": 578,
        "y": 878,
        "width": 25,
        "height": 25
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 0,
    "bottom": 2000,
    "pageHeight": 8087
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-63",
      "gap": "6px",
      "tag": "ul",
      "rect": {
        "x": 647,
        "y": 864,
        "width": 289,
        "height": 53
      },
      "role": null,
      "label": "YellowBlueGreenSand",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6
    ],
    "representativeContentWidthsPx": [
      1221,
      371,
      289
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 8,
    "animations": 0,
    "elementsInSection": 26
  },
  "surfaces": {
    "radii": [
      "3.35544e+07px"
    ],
    "borders": [
      "3px solid rgb(255, 255, 255)",
      "3px solid rgba(0, 0, 0, 0)"
    ],
    "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** — The camera angle on the 3D model changes on scroll, and the user interacts with the color palette to alter the color of the 3D model. (0s–8s; 95% 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: Oversized display wordmark positioned behind a centered hero object; Color/variant picker paired with product imagery; Warm flat-color canvas background isolating product silhouette
- Dependencies: Custom 3D product renders per color variant; Specific Geograph font family and negative letter-spacing values; Scroll-triggered camera angle change script
- Guidance: Swap in a brand wordmark at large scale and matching product renders per color option; replicate the swap mechanism between variant images rather than re-rendering 3D live, and recreate the scroll-linked camera shift using CSS/JS transform interpolation.

### Evidence readiness

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


### Agent implementation prompt

Create an original hero section inspired by the design evidence titled “Oversized wordmark over 3D product render”.

Purpose: A hero section featuring a large 3D product render with an oversized wordmark that goes behind the product. Includes a color selection palette.

Structure: full-bleed. Source layout label: Full-bleed background with a central 3D element and top-aligned oversized typography.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: A bright yellow 3D play structure layered in front of a massive white wordmark, with color toggle buttons.

Components: Oversized wordmark, 3D product render, Color picker palette, Descriptive text overlay.

Style direction: bold, colourful, typographic, playful.

Observed crop: 1440×2000px (0.72: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-3","size":"30px","count":2,"family":"Geograph","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":690,"text":"Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l","property":"font"},{"tag":"h2","top":6640,"text":"Want one?","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"36px","letterSpacing":"normal"} {"id":"font-6","size":"16px","count":29,"family":"Geograph","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":890,"text":"Yellow","property":"font"},{"tag":"span","top":890,"text":"Blue","property":"font"},{"tag":"span","top":890,"text":"Green","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"24px","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-2","hex":"#000000","alpha":1,"count":21,"contexts":[{"tag":"button","top":-80,"text":"Get updates","property":"text"},{"tag":"path","top":877,"text":"","property":"svg-fill"},{"tag":"svg","top":864,"text":"","property":"svg-fill"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-3","hex":"#FFFFFF","alpha":1,"count":82,"contexts":[{"tag":"path","top":-77,"text":"","property":"svg-fill"},{"tag":"button","top":864,"text":"Yellow","property":"border"},{"tag":"p","top":690,"text":"Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l","property":"text"}],"cssValue":"rgb(255, 255, 255)"} {"id":"color-8","hex":"#FFFFFF","alpha":0.050980392156862744,"count":4,"contexts":[{"tag":"div","top":859,"text":"","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.05)"} {"id":"color-10","hex":"#45528A","alpha":1,"count":2,"contexts":[{"tag":"button","top":864,"text":"Blue","property":"control-background"}],"cssValue":"rgb(69, 82, 138)"} {"id":"color-11","hex":"#888048","alpha":1,"count":2,"contexts":[{"tag":"button","top":864,"text":"Green","property":"control-background"}],"cssValue":"rgb(136, 128, 72)"} {"id":"color-12","hex":"#FAECC2","alpha":1,"count":2,"contexts":[{"tag":"button","top":864,"text":"Sand","property":"control-background"}],"cssValue":"rgb(250, 236, 194)"} {"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: spacing {"gapsPx":[6],"representativeContentWidthsPx":[1221,371,289]}; surfaces {"radii":["3.35544e+07px"],"borders":["3px solid rgb(255, 255, 255)","3px solid rgba(0, 0, 0, 0)"],"shadows":[]}; media [{"tag":"img","rect":{"x":109,"y":171,"width":1221,"height":1829},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":109,"y":171,"width":1221,"height":1829},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":109,"y":171,"width":1221,"height":1829},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":109,"y":171,"width":1221,"height":1829},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: The camera angle on the 3D model changes on scroll, and the user interacts with the color palette to alter the color of the 3D model. (95% confidence)

Transfer these principles: Oversized display wordmark positioned behind a centered hero object; Color/variant picker paired with product imagery; Warm flat-color canvas background isolating product silhouette.

Dependencies: Custom 3D product renders per color variant; Specific Geograph font family and negative letter-spacing values; Scroll-triggered camera angle change script.

Adaptation guidance: Swap in a brand wordmark at large scale and matching product renders per color option; replicate the swap mechanism between variant images rather than re-rendering 3D live, and recreate the scroll-linked camera shift using CSS/JS transform interpolation.

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