# 3D Helmet Sponsor Cloud

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

## Builder's note

What makes it work:
- Vertical logo columns flank a central 3D helmet, so the sponsor marks read as decoration on the object and give the cloud a clear structure.
- Light dividers and consistent logo alignment keep many mismatched brand marks orderly on a white surface.
- A single small, bold uppercase call-to-action button gives the section one obvious next step without competing copy.

What a screenshot can't show:
- In the recording the helmet turns a full 360° between about 12s and 17s as the logo columns drift upward with scroll.
- No font sizes, spacing values or easing were measured, so those details are unknown.

Borrow: Tie a scroll-driven spin of one central object to the drifting motion of the surrounding logos so a plain logo wall becomes a story.
Leave alone: Don't copy the racing helmet, the real sponsor marks, or the yellow-on-black accent pairing; use your own object and palette, and keep logo spacing more even than the original.

## Classification

- Type: logo-cloud
- Layout: Vertical columns of logos flanking a central 3D object on a white background.
- Styles: minimal, corporate
- Confidence: 98%

## Purpose and structure

A logo cloud arranged in vertical columns around a 3D rotating helmet model.

Visual signature: Multiple small logos framing a central 3D racing helmet that spins on scroll.

## Components

- 3D model
- sponsor logos
- call to action button

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

- 12.0–17.0s — A 3D model of a racing helmet rotates 360 degrees while the surrounding logos move upwards on scroll. (95% confidence)

## Section quality

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

- Typography: 56 — Logo marks vary in their own type styles (not site-controlled); the only true typographic element is the small bold uppercase CTA button label, which is clean but minimal. No real hierarchy or display type present in this section. Next tier: Introduce a deliberate section heading or caption treatment that demonstrates typographic intent beyond the button label.
- Composition: 62 — Vertical column grid flanking a centered 3D object is a clear, legible structure with consistent logo alignment and column dividers. However spacing between logos is uneven (large vertical gaps vary unpredictably) and the helmet overlaps awkwardly with a near-duplicate second helmet image, undermining precision. Next tier: Needs tighter, consistent vertical rhythm between logos and resolved handling of the duplicate/overlapping helmet imagery to feel intentional rather than a layout artifact.
- Motion: 58 — Gemini confirms a timestamped 360° helmet rotation paired with upward-scrolling logo columns, a specific and plausible scroll-driven motion pairing, but it is a single straightforward effect without additional choreography or easing detail. Next tier: Would need layered or sequenced motion (e.g., staggered logo reveals, parallax depth) rather than one rotation plus scroll-linked translation to read as more than a standard effect.
- Content: 55 — Logos are real sponsor marks integrated into a thematically relevant racing-helmet motif, giving some narrative tie-in, but the content is just a dense array of disparate logo styles with no supporting copy or context besides a CTA button. Next tier: Add contextual framing (heading, sponsor tiers, or copy) to clarify purpose beyond a raw logo wall.
- Originality: 64 — Framing a rotating 3D helmet with sponsor logos as if they decorate the helmet is a distinctive concept for a logo cloud, elevating it above a generic grid, though the column-grid logo layout itself is conventional. Next tier: The surrounding grid treatment is still a standard logo wall; a more integrated or dynamic presentation of the logos themselves (not just the centerpiece) would push originality further.
- Adaptability: 60 — The column-grid skeleton, central 3D object slot, and CTA button are clearly separable from the specific sponsor logo assets and helmet model, making structural reuse straightforward. Next tier: Dependency on a custom 3D model asset and rotation behavior limits how cleanly motion logic transfers without bespoke 3D integration work.

Strengths:
- Distinctive concept pairing a rotating 3D product/helmet with a sponsor logo wall
- Clear column-based grid gives legible structure to a large number of disparate logos
- Scroll-linked rotation plus logo movement ties motion to user interaction

Weaknesses:
- Uneven vertical spacing between logos breaks grid consistency
- Duplicate/overlapping helmet images appear unintentional
- No typographic hierarchy or supporting copy beyond button label
- Logo cloud styles are highly inconsistent in weight and size, undermining cohesion

Why it does not reach the next tier: The core idea is engaging but execution details—spacing inconsistency, unclear duplicate helmet rendering, lack of supporting type or content framing—keep it at a competent/good level rather than strong or memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: The grid skeleton and CTA can be reused directly with any logo set; the 3D centerpiece and its scroll-rotation require separate 3D asset production and animation binding.

What transfers:
- Vertical column grid for logo arrangement
- Central object placeholder flanked by logo columns
- CTA button pattern below the grid

Dependencies:
- Custom 3D helmet model and rotation rigging
- Scroll-triggered animation logic for rotation and logo translation

## 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 details beyond the single documented rotation/scroll pairing are unknown
- Exact spacing values and color specifics for logos not deterministically supplied
- Cannot confirm if duplicate helmet is intentional (e.g., a second scroll state) or a capture artifact

## 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: logo-cloud
- Source type: logo-cloud
- Structure: Vertical columns of logos flanking a central 3D object on a white background.
- Layout: Vertical columns of logos flanking a central 3D object on a white background.
- Styles: minimal, corporate
- Components: 3D model, sponsor logos, call to action button
- Purpose: A logo cloud arranged in vertical columns around a 3D rotating helmet model.
- Visual signature: Multiple small logos framing a central 3D racing helmet that spins on scroll.
- Place on the page: 3 of 11, after Testimonials (`nickho-motorsports-nl:C02`), before Process (`nickho-motorsports-nl:C03`)

### 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 3D model of a racing helmet rotates 360 degrees while the surrounding logos move upwards on scroll. (12s–17s; 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: 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: Vertical column grid for logo arrangement; Central object placeholder flanked by logo columns; CTA button pattern below the grid
- Dependencies: Custom 3D helmet model and rotation rigging; Scroll-triggered animation logic for rotation and logo translation
- Guidance: The grid skeleton and CTA can be reused directly with any logo set; the 3D centerpiece and its scroll-rotation require separate 3D asset production and animation binding.

### 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 logo-cloud section inspired by the design evidence titled “3D Helmet Sponsor Cloud”.

Purpose: A logo cloud arranged in vertical columns around a 3D rotating helmet model.

Structure: Vertical columns of logos flanking a central 3D object on a white background.. Source layout label: Vertical columns of logos flanking a central 3D object on a white background.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Multiple small logos framing a central 3D racing helmet that spins on scroll.

Components: 3D model, sponsor logos, call to action button.

Style direction: minimal, corporate.

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 3D model of a racing helmet rotates 360 degrees while the surrounding logos move upwards on scroll. (95% confidence)

Transfer these principles: Vertical column grid for logo arrangement; Central object placeholder flanked by logo columns; CTA button pattern below the grid.

Dependencies: Custom 3D helmet model and rotation rigging; Scroll-triggered animation logic for rotation and logo translation.

Adaptation guidance: The grid skeleton and CTA can be reused directly with any logo set; the 3D centerpiece and its scroll-rotation require separate 3D asset production and animation binding.

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