# Sticky 3D Car Calendar

Schema: Design Details SECTION.md v3.2
Website: Nick Ho
Source: https://nickho-motorsports.nl/
Source section IDs: gap-a29c63eb-7021-8250
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A top-down car sits pinned in the centre while race rows scroll past on both sides, so one clear focal point anchors a long list.
- Bold uppercase condensed race names over small regular subtext, with right-aligned dates, give the list a clean, scannable table rhythm.
- A near-black canvas with a single yellow accent on the active row and the car ties the content state to the visual and keeps the palette disciplined.

What a screenshot can't show:
- In the recording (about 31–49s) the car stays fixed while calendar text scrolls upward past it; no other motion or hover states were seen.
- Measured type sizes, spacing and padding were not captured, so exact scale is unknown.

Borrow: Pin one strong visual in the centre and let a structured data list scroll around it, using a single accent colour to mark the active item.
Leave alone: Don't copy the yellow race car, the black-and-yellow palette or the Anton-style condensed headline face; use your own subject and a free condensed sans like Oswald or Bebas Neue if needed.

## Classification

- Type: other
- Layout: Fixed central 3D graphic with left and right columns of text scrolling vertically.
- Styles: bold, corporate, minimal
- Confidence: 98%

## Purpose and structure

A sticky 3D race car model surrounded by a scrolling race calendar.

Visual signature: A top-down view of a bright yellow race car that stays locked in place while calendar dates scroll past it.

## Components

- sticky 3D model
- scrolling text list
- calendar dates

## Typography

- Display: Anton — 50px 600
- Heading: Anton — 64px 400
- Body: Helvetica — 14px 400

## Functional palette

- Canvas: canvas #000000
- Primary-Action: primary action #FED60A
- Surface: surface #FFFFFF

## Motion evidence

- 31.0–49.0s — A top-down view of a 3D race car model appears and stays fixed in the center while race calendar details scroll upwards. (98% confidence)

## Section quality

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

- Typography: 61 — Consistent use of bold uppercase Anton headlines for race names against smaller regular subtext, with right-aligned dates creating a clean tabular rhythm. Hierarchy is clear but the pairing is a standard list treatment without distinctive type pairing or rhythm beyond the site's existing tokens. Next tier: No unique typographic treatment beyond consistent scale application; lacks a distinguishing detail (unusual tracking, numeral treatment, kerning) that would set it apart from a generic schedule list.
- Composition: 66 — Strong layered composition: a fixed top-down 3D car anchors the center while calendar rows flow around it in two implied columns, with one row highlighted in yellow breaking the monochrome rhythm. The negative space and symmetry around the car create a clear focal structure. Next tier: The scrolling list columns are visually generic (plain dividers, repetitive rows); the composition relies heavily on the car asset itself rather than a fully resolved grid/typographic system to reach memorable status.
- Motion: 56 — Gemini confirms a specific, timestamped behavior (31–49s): the 3D car stays fixed centrally while calendar text scrolls past it, a competent sticky-pin motion pattern. Next tier: Single observed motion state (static pin) without described secondary motion, such as rotation, parallax, or state transition on the car itself, limiting it to a familiar sticky-scroll technique.
- Content: 60 — The 3D car and calendar data are integrated in a single visual frame, and the active/highlighted race row (yellow) ties content state to visual emphasis, giving the calendar a sense of ongoing season context. Next tier: Content integration doesn't extend beyond this one highlighted state; no other contextual data (e.g., countdown, location imagery, result links) ties the list to the car visually.
- Originality: 64 — Combining a fixed top-down car render as a literal centerpiece within a scrolling race calendar is a reasonably distinctive concept for a motorsport site, avoiding the common hero-banner-plus-list pattern. Next tier: The core mechanic (sticky object + scrolling list) is a known scroll-spy pattern; without more invented interaction (e.g., car reacting to track selection) it stays in the strong-but-familiar range rather than landmark territory.
- Adaptability: 62 — The structure cleanly separates into a sticky visual asset layer and an independently scrolling data list layer, which is a reusable interaction pattern regardless of skin. Next tier: Behavior is tightly coupled to a proprietary 3D car livery asset, and no documented interaction states (hover/selection) are given beyond the single highlighted row, limiting confirmed portability.

Strengths:
- Clear focal anchor (centered 3D race car) against a scrolling, well-organized calendar list
- Effective single-color accent (yellow) used to mark the current/active race entry
- Clean uppercase type hierarchy distinguishing race titles, series subtext, and dates

Weaknesses:
- Calendar list rows are visually generic beyond the highlighted state
- Scrolling-sticky-object pattern is a known scroll-spy technique rather than a novel interaction
- Relies heavily on the car render as the main visual interest point

Why it does not reach the next tier: The section's wow factor is carried almost entirely by the car asset and the pinned-scroll trick; the surrounding calendar list lacks additional typographic or layout invention, and no secondary motion or interaction state was described to push the craft into the 'strong/memorable' range.

## Adaptation guidance

- Effort: Medium
- Guidance: Keep the sticky-center/scrolling-list skeleton and the single accent-color highlight mechanic; swap the 3D car for any other centerpiece visual (product render, map, photo) and restyle the list rows and typography to match a new brand while preserving the pin-and-scroll choreography.

What transfers:
- Sticky centered visual element with flanking/adjacent scrolling content list
- Highlighted-row accent pattern to denote active or current item
- Uppercase display headline over data list layout

Dependencies:
- Custom 3D car livery render asset
- Scroll-triggered sticky positioning behavior

## 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 scored from a single described timestamp range only; no detail on car's own animation or list transition easing
- No visible evidence of responsive/mobile behavior for this layout
- Cannot verify exact spacing, border, or font-weight values beyond supplied tokens

## 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: other
- Source type: other
- Structure: Fixed central 3D graphic with left and right columns of text scrolling vertically.
- Layout: Fixed central 3D graphic with left and right columns of text scrolling vertically.
- Styles: bold, corporate, minimal
- Components: sticky 3D model, scrolling text list, calendar dates
- Purpose: A sticky 3D race car model surrounded by a scrolling race calendar.
- Visual signature: A top-down view of a bright yellow race car that stays locked in place while calendar dates scroll past it.
- Place on the page: 6 of 11, after Editorial (`nickho-motorsports-nl:C04`), before Call to action (`nickho-motorsports-nl:C05`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

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

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "50px",
      "family": "Anton",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Anton, 50px, weight 600. Used for major bold headlines and hero text.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "55px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "64px",
      "family": "Anton",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Anton, 64px, weight 400. Used for section headers and large background text.",
      "sampleId": "font-9",
      "confidence": 0.9,
      "lineHeight": "64px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Helvetica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Helvetica, 14px, weight 400. Used for standard body copy, labels, and small descriptions.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "19.6px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [],
  "functionalPalette": [
    {
      "hex": "#000000",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 0, 0); AI role: #000000 (Black). Serves as the primary background color for large sections of the site, including the hero, timeline, and calendar.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FED60A",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-4: computed rgb(254, 214, 10); AI role: #FED60A (Yellow). Used consistently for primary buttons and call-to-action text.",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: #FFFFFF (White). Used as the background for the partner logo grid, media articles, and the contact form card.",
      "sampleId": "color-1",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px corner radius applied consistently to UI elements.",
  "density": "Relatively spacious. The use of large typography and distinct section blocks creates an airy, dramatic feel despite the dark palette.",
  "evidence": "Measured via visual observation of button shapes, layout grids in the logo section, list dividers in the calendar, and the overall spacing rhythm in the provided desktop screenshots.",
  "borderStyle": "Thin, subtle 1px borders are used as structural dividers in lists (like the calendar) and grid layouts.",
  "buttonStyle": "Solid fill with sharp rectangular geometry, typically featuring a vibrant accent color (yellow) housing bold, uppercase typography.",
  "cornerStyle": "Strictly sharp, non-rounded corners are used universally across buttons, image containers, and form fields.",
  "contentWidth": "A mix of full-bleed imagery (hero) and centrally constrained content columns for text-heavy sections to maintain readability.",
  "spacingRhythm": "Generous vertical padding distinguishes distinct page sections. Content is often centered with wide margins on large screens. Grids for logos use tight, uniform spacing."
}
```

### Reconstruction specification

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

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
null
```

### Observed motion

1. **scroll** — A top-down view of a 3D race car model appears and stays fixed in the center while race calendar details scroll upwards. (31s–49s; 98% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

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

### Responsive contract

- Measured viewport: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Sticky centered visual element with flanking/adjacent scrolling content list; Highlighted-row accent pattern to denote active or current item; Uppercase display headline over data list layout
- Dependencies: Custom 3D car livery render asset; Scroll-triggered sticky positioning behavior
- Guidance: Keep the sticky-center/scrolling-list skeleton and the single accent-color highlight mechanic; swap the 3D car for any other centerpiece visual (product render, map, photo) and restyle the list rows and typography to match a new brand while preserving the pin-and-scroll choreography.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original other section inspired by the design evidence titled “Sticky 3D Car Calendar”.

Purpose: A sticky 3D race car model surrounded by a scrolling race calendar.

Structure: Fixed central 3D graphic with left and right columns of text scrolling vertically.. Source layout label: Fixed central 3D graphic with left and right columns of text scrolling vertically.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: A top-down view of a bright yellow race car that stays locked in place while calendar dates scroll past it.

Components: sticky 3D model, scrolling text list, calendar dates.

Style direction: bold, corporate, minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"50px","family":"Anton","source":"computed","traits":"uppercase","weight":"600","evidence":"font-1: computed CSS at 1440×1000; AI role: Anton, 50px, weight 600. Used for major bold headlines and hero text.","sampleId":"font-1","confidence":0.95,"lineHeight":"55px","letterSpacing":"normal"} {"role":"heading","size":"64px","family":"Anton","source":"computed","traits":"uppercase","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Anton, 64px, weight 400. Used for section headers and large background text.","sampleId":"font-9","confidence":0.9,"lineHeight":"64px","letterSpacing":"normal"} {"role":"body","size":"14px","family":"Helvetica","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Helvetica, 14px, weight 400. Used for standard body copy, labels, and small descriptions.","sampleId":"font-2","confidence":0.9,"lineHeight":"19.6px","letterSpacing":"normal"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: #000000 (Black). Serves as the primary background color for large sections of the site, including the hero, timeline, and calendar.","sampleId":"color-2","confidence":0.95} {"hex":"#FED60A","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(254, 214, 10); AI role: #FED60A (Yellow). Used consistently for primary buttons and call-to-action text.","sampleId":"color-4","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: #FFFFFF (White). Used as the background for the partner logo grid, media articles, and the contact form card.","sampleId":"color-1","confidence":0.9}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: scroll: A top-down view of a 3D race car model appears and stays fixed in the center while race calendar details scroll upwards. (98% confidence)

Transfer these principles: Sticky centered visual element with flanking/adjacent scrolling content list; Highlighted-row accent pattern to denote active or current item; Uppercase display headline over data list layout.

Dependencies: Custom 3D car livery render asset; Scroll-triggered sticky positioning behavior.

Adaptation guidance: Keep the sticky-center/scrolling-list skeleton and the single accent-color highlight mechanic; swap the 3D car for any other centerpiece visual (product render, map, photo) and restyle the list rows and typography to match a new brand while preserving the pin-and-scroll choreography.

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