# Bootcamp Event Hero

Schema: Design Details SECTION.md v3.2
Website: Chandebootcamp
Source: https://www.chandebootcamp.com/
Source section IDs: 78c1479e-1757-4784-9ecf-5471cad82387
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: hero
- Layout: Asymmetric editorial layout with a sticky left sidebar and large central content.
- Styles: editorial, bold, playful, retro
- Confidence: 95%

## Purpose and structure

A striking editorial hero section with large typography, pixelated green graphics, and a sticky sidebar featuring video thumbnails.

Visual signature: Large bold text 'CHANDE BOOTCAMP BY. MINGG' with vibrant green pixel grids and sticky video thumbnails on the left.

## Components

- sticky sidebar
- large typography
- video thumbnails
- pixel grid
- scrolling marquee

## Typography

- Display: Phudu — 80px 700
- Heading: Phudu — 80px 700
- Body: Phudu — 14.4px 600
- Mono: Geist Mono — 12px 500

## Functional palette

- Primary-Action: primary action #68F12B
- Canvas: canvas #F4F3EB
- Text: text #000000
- Surface: surface #0F1513
- Muted-Text: muted text #838B89

## Motion evidence

- 0.0–5.0s — The page loads with a main section displaying the event's title and some images. (100% confidence)

## Section quality

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

- Typography: 68 — Large Phudu display type with tight negative letter-spacing and uppercase treatment creates a confident editorial headline; supplemented by a small mono caption system for metadata. Hierarchy between display, mono labels, and numbered badges is clear and deliberate. Next tier: Type is a single bold display style run once; no secondary typographic moments (varied scale, kinetic text, or expressive treatment) to push past strong/familiar polish.
- Composition: 74 — Asymmetric split between a dense photo/pixel-grid collage on the left and an open negative-space headline on the right is a genuinely distinctive editorial structure, reinforced by a sticky video/photo column and a cascading diagonal arrangement of portrait crops that breaks grid monotony. Next tier: The right-hand composition is mostly empty with a single headline block; without more layered content interplay this leans on scale/negative-space contrast rather than fully resolved spatial choreography across the whole canvas.
- Motion: inconclusive — Deterministic animation data shows staggered opacity reveals on nav words/badges and looping dot pulses, but Gemini's motion_moments only describe a generic 0-5s load with no scroll-driven behavior despite sticky/scroll cues in the layout. Next tier: Need timestamped evidence of the sticky sidebar's scroll behavior and whether the pixel-grid or portrait stack animates on scroll to assess motion quality.
- Content: 66 — Portrait photography integrates into a pixel-grid motif with named captions, number tags, and a looping video thumbnail, giving the hero a real sense of community/event specificity rather than generic stock imagery. Next tier: Photo crops are uniform rectangles simply stacked; no custom framing or interaction with the pixel-grid pattern beyond overlay, limiting content from feeling bespoke to the brand system.
- Originality: 70 — Combining a brutalist pixel/grid motif, diagonal cascading portrait crops, and a sticky catalog-style sidebar is an unusual hero pattern not reducible to a template; the green pixel density against flat cream canvas is a distinct visual signature. Next tier: The underlying structure (big headline right, media stack left) is still a recognizable editorial hero skeleton; the pixel-grid texture, while distinctive, is a surface treatment rather than a structurally novel interaction.
- Adaptability: 60 — Deterministic facts show clearly separable layers (canvas-based pixel grid, independent photo/video media elements with fixed rects, headline text block, staggered label animations) suggesting hierarchy and skin could be decoupled. Next tier: Canvas-rendered pixel grid (ld-13, ld-1175) is a bespoke WebGL/canvas effect tightly coupled to custom rendering, raising the bar for isolating the visual skin from behavior without reproducing proprietary shader logic.

Strengths:
- Asymmetric split between dense pixel-collage media column and open-space headline creates strong editorial contrast
- Diagonal cascading stack of portrait crops with captions breaks the expected grid and adds narrative texture
- Distinctive green pixel-grid canvas motif gives the section a memorable, non-generic visual signature

Weaknesses:
- Right side of the hero is mostly empty with only a single headline block, underusing the available canvas
- Motion evidence is too generic (0-5s load only) to confirm whether sticky/scroll interactions are well-crafted
- Photo crops are uniform cover-fit rectangles with no bespoke framing tying them to the pixel-grid system

Why it does not reach the next tier: The section shows a confident, unusual editorial structure and a distinctive surface motif, but without confirmed sophisticated scroll-driven motion and with content photography treated fairly plainly, it reads as strong/memorable rather than exceptional; achieving wow would need richer right-side composition and verified motion craft.

## Adaptation guidance

- Effort: Medium
- Guidance: Rebuild the sticky media column and staggered label reveal as a reusable component; the canvas pixel-grid effect must be re-implemented or swapped for a simpler CSS/SVG grid pattern since it is a bespoke rendering dependency.

What transfers:
- Asymmetric sticky-sidebar-plus-headline layout pattern
- Numbered/captioned media tile system
- Staggered word-by-word label reveal animation pattern

Dependencies:
- Custom canvas/WebGL pixel-grid rendering (field__gl, cflyer)
- Phudu display typeface licensing
- Specific portrait photography set and video assets

## 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 assessment limited to a generic load-only timestamp from Gemini, no scroll-triggered detail
- Cannot verify exact canvas/WebGL rendering behavior from static facts alone
- Screenshot is a tall crop; full viewport interactions beyond 1173px are not evaluated

## 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: asymmetric two-column
- Layout: Asymmetric editorial layout with a sticky left sidebar and large central content.
- Styles: editorial, bold, playful, retro
- Components: sticky sidebar, large typography, video thumbnails, pixel grid, scrolling marquee
- Purpose: A striking editorial hero section with large typography, pixelated green graphics, and a sticky sidebar featuring video thumbnails.
- Visual signature: Large bold text 'CHANDE BOOTCAMP BY. MINGG' with vibrant green pixel grids and sticky video thumbnails on the left.

### Crop and composition

- Crop: 1440×1173px; aspect ratio 1.228:1
- Page bounds: 0–1173px of 14721px
- Guidance: Keep one region persistent or visually anchored while the main region carries the changing 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": "Phudu",
      "stack": "Phudu, ui-sans-serif, system-ui, sans-serif",
      "size": "80px",
      "weight": "700",
      "lineHeight": "57.6px",
      "letterSpacing": "-3.2px",
      "sample": "ChandeBootcampBy. Mingg",
      "element": "h1",
      "occurrences": 2,
      "sourceId": "font-2"
    },
    {
      "role": "body/supporting copy",
      "family": "Geist Mono",
      "stack": "\"Geist Mono\", ui-monospace, monospace",
      "size": "10.5px",
      "weight": "500",
      "lineHeight": "10.1px",
      "letterSpacing": "-0.2px",
      "sample": "Video recap",
      "element": "figcaption",
      "occurrences": 7,
      "sourceId": "font-4"
    },
    {
      "role": "body/supporting copy",
      "family": "Phudu",
      "stack": "Phudu, ui-sans-serif, system-ui, sans-serif",
      "size": "12px",
      "weight": "500",
      "lineHeight": "13.8px",
      "letterSpacing": "-0.2px",
      "sample": "2-4 OctoberKe Retreat - Hanoi, VN",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-5"
    },
    {
      "role": "UI/supporting text",
      "family": "Phudu",
      "stack": "Phudu, ui-sans-serif, system-ui, sans-serif",
      "size": "15px",
      "weight": "600",
      "lineHeight": "13.5px",
      "letterSpacing": "normal",
      "sample": "Become a partner",
      "element": "em",
      "occurrences": 16,
      "sourceId": "font-9"
    },
    {
      "role": "UI/supporting text",
      "family": "Phudu",
      "stack": "Phudu, ui-sans-serif, system-ui, sans-serif",
      "size": "10.5px",
      "weight": "500",
      "lineHeight": "10.3px",
      "letterSpacing": "-0.2px",
      "sample": "25",
      "element": "span",
      "occurrences": 16,
      "sourceId": "font-10"
    },
    {
      "role": "UI/supporting text",
      "family": "Phudu",
      "stack": "Phudu, ui-sans-serif, system-ui, sans-serif",
      "size": "12px",
      "weight": "500",
      "lineHeight": "11.8px",
      "letterSpacing": "-0.2px",
      "sample": "Scroll more",
      "element": "span",
      "occurrences": 6,
      "sourceId": "font-11"
    },
    {
      "role": "section heading",
      "family": "Google Sans Flex",
      "stack": "\"Google Sans Flex\", Phudu, sans-serif",
      "size": "51.6px",
      "weight": "700",
      "lineHeight": "37.2px",
      "letterSpacing": "normal",
      "sample": "©",
      "element": "span",
      "occurrences": 1,
      "sourceId": "font-14"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "80px",
      "family": "Phudu",
      "source": "computed",
      "traits": "uppercase",
      "weight": "700",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700. Used for major structural headings and high-impact visual text.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "57.6px",
      "letterSpacing": "-3.2px"
    },
    {
      "role": "heading",
      "size": "80px",
      "family": "Phudu",
      "source": "computed",
      "traits": "uppercase",
      "weight": "700",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700 (similar to font-2 but slightly different usage context). Used for scroll-triggered changing text.",
      "sampleId": "font-7",
      "confidence": 0.9,
      "lineHeight": "64px",
      "letterSpacing": "-3.2px"
    },
    {
      "role": "body",
      "size": "14.4px",
      "family": "Phudu",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Phudu, 14.4px, weight 600. Used for lists of names and smaller supplementary text.",
      "sampleId": "font-6",
      "confidence": 0.85,
      "lineHeight": "12.9px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "Geist Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Geist Mono, 12px, weight 500. Used for meta-information, links, and small captions.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "11.5px",
      "letterSpacing": "-0.2px"
    }
  ]
}
```

### 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": "#F4F3EB",
      "cssValue": "rgb(244, 243, 235)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 3,
      "sourceId": "color-3"
    },
    {
      "value": "#C3C4BD",
      "cssValue": "rgb(195, 196, 189)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "::after-background"
      ],
      "occurrences": 4,
      "sourceId": "color-4"
    },
    {
      "value": "#0E1313",
      "cssValue": "rgba(15, 21, 19, 0.21)",
      "alpha": 0.21176470588235294,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-5"
    },
    {
      "value": "#0F1513",
      "cssValue": "rgb(15, 21, 19)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-stroke"
      ],
      "occurrences": 43,
      "sourceId": "color-8"
    },
    {
      "value": "#182220",
      "cssValue": "rgb(24, 34, 32)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "::before-background"
      ],
      "occurrences": 3,
      "sourceId": "color-10"
    },
    {
      "value": "#68F12B",
      "cssValue": "rgb(104, 241, 43)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 44,
      "sourceId": "color-12"
    },
    {
      "value": "#343332",
      "cssValue": "rgb(52, 51, 50)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 9,
      "sourceId": "color-13"
    },
    {
      "value": "#131313",
      "cssValue": "rgb(19, 19, 19)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-18"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 17,
      "sourceId": "color-19"
    },
    {
      "value": "#F5F0E3",
      "cssValue": "rgb(245, 240, 227)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "::after-background",
        "::before-background"
      ],
      "occurrences": 38,
      "sourceId": "color-20"
    },
    {
      "value": "#1B2524",
      "cssValue": "rgb(27, 37, 36)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 4,
      "sourceId": "color-23"
    },
    {
      "value": "#0E1813",
      "cssValue": "rgb(14, 24, 19)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 19,
      "sourceId": "color-25"
    },
    {
      "value": "#236C3C",
      "cssValue": "rgb(35, 108, 60)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 5,
      "sourceId": "color-27"
    },
    {
      "value": "#1C2E22",
      "cssValue": "rgb(28, 46, 34)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "::before-background",
        "::after-background"
      ],
      "occurrences": 8,
      "sourceId": "color-28"
    },
    {
      "value": "#2C3A38",
      "cssValue": "rgb(44, 58, 56)",
      "alpha": 1,
      "appliedAs": [
        "control-background",
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-29"
    },
    {
      "value": "#E9E2C8",
      "cssValue": "rgb(233, 226, 200)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "::after-background",
        "::before-background"
      ],
      "occurrences": 12,
      "sourceId": "color-30"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#68F12B",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-12: computed rgb(104, 241, 43); AI role: #68F12B (vibrant green). Key brand and accent color, used in pixel blocks, buttons, and text highlights.",
      "sampleId": "color-12",
      "confidence": 0.95
    },
    {
      "hex": "#F4F3EB",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: #000000. Primary text color on light backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#0F1513",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-8: computed rgb(15, 21, 19); AI role: #0F1513 (dark charcoal/near black). Used for contrasting background sections, particularly in the timeline and footer.",
      "sampleId": "color-8",
      "confidence": 0.85
    },
    {
      "hex": "#838B89",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds.",
      "sampleId": "color-24",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Primarily 0px for layout elements, 999px for pill buttons.",
  "density": "Varies significantly. Starts dense with pixel grids, opens up to sparse typography, and becomes very dense in the collage/timeline sections.",
  "evidence": "Visual inspection of layout structure, CSS values for borders/radius on interactive elements, and overall composition.",
  "borderStyle": "Mostly borderless, relying on stark color contrasts or pixel patterns to define edges. Some usage of bracketed text for links.",
  "buttonStyle": "Pill-shaped, solid fill (vibrant green or dark green), uppercase monospace or sans-serif text, flat appearance.",
  "cornerStyle": "Mix of sharp, brutalist corners (for images and grid blocks) and fully rounded pill shapes for buttons/badges.",
  "contentWidth": "Fluid, edge-to-edge layouts relying heavily on scroll position rather than a fixed container width.",
  "spacingRhythm": "Highly variable and dramatic. Uses full-viewport height sections combined with tight clusters in collage areas."
}
```

### Reconstruction specification

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

- Root: 1440×1088px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(244, 243, 235); radius 0px.
- Observed gaps: 3, 6, 8px.
- Representative content widths: 672, 384, 369px.
- Layout containers: 0; cards/surfaces: 0; media elements: 12; browser animations: 13.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 1173,
      "pageHeight": 14721
    }
  },
  "container": {
    "size": "1440×1088px",
    "position": "x 0px, y 60px",
    "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(244, 243, 235)",
    "radius": "0px",
    "border": "0px none rgb(36, 85, 53)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      3,
      6,
      8
    ],
    "representativeContentWidthsPx": [
      672,
      384,
      369
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "canvas · field__gl",
    "size": "1440×1088px",
    "position": "x 0px, y 60px",
    "aspectRatio": 1.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "canvas · cflyer",
    "size": "384×384px",
    "position": "x 960px, y 96px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "canvas · canvas",
    "size": "177×251px",
    "position": "x 720px, y 809px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "canvas · canvas",
    "size": "176×250px",
    "position": "x 194px, y 60px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "canvas · canvas",
    "size": "176×250px",
    "position": "x 369px, y 310px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "canvas · canvas",
    "size": "176×250px",
    "position": "x 545px, y 560px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "source not captured"
  },
  {
    "element": "video · video",
    "size": "176×105px",
    "position": "x 18px, y 877px",
    "aspectRatio": 1.7,
    "objectFit": "cover",
    "objectPosition": "50% 33%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://www.chandebootcamp.com/assets/video/preview-1013b.mp4"
  },
  {
    "element": "img · hero__mark",
    "size": "78×54px",
    "position": "x 744px, y 90px",
    "aspectRatio": 1.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://www.chandebootcamp.com/assets/img/home/logo-mark.svg"
  },
  {
    "element": "svg · svg",
    "size": "35×24px",
    "position": "x 19px, y 19px",
    "aspectRatio": 1.5,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "15×15px",
    "position": "x 1403px, y 23px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "img · img",
    "size": "3×3px",
    "position": "x 627px, y 976px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://www.chandebootcamp.com/assets/img/home/dot.svg"
  },
  {
    "element": "img · img",
    "size": "3×3px",
    "position": "x 636px, y 976px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://www.chandebootcamp.com/assets/img/home/dot.svg"
  }
]
```

#### Browser-exposed animation parameters

```json
[
  {
    "target": "img",
    "delayMs": 0,
    "durationMs": 1600,
    "easing": "linear",
    "iterations": null,
    "direction": "normal",
    "fill": "none",
    "keyframes": [
      {
        "easing": "ease-in-out",
        "offset": 0,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "ease-in-out",
        "offset": 0.3,
        "opacity": "0.25",
        "composite": "auto",
        "computedOffset": 0.3
      },
      {
        "easing": "ease-in-out",
        "offset": 0.6,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.6
      },
      {
        "easing": "ease-in-out",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "img",
    "delayMs": 200,
    "durationMs": 1600,
    "easing": "linear",
    "iterations": null,
    "direction": "normal",
    "fill": "none",
    "keyframes": [
      {
        "easing": "ease-in-out",
        "offset": 0,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "ease-in-out",
        "offset": 0.3,
        "opacity": "0.25",
        "composite": "auto",
        "computedOffset": 0.3
      },
      {
        "easing": "ease-in-out",
        "offset": 0.6,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.6
      },
      {
        "easing": "ease-in-out",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "img",
    "delayMs": 400,
    "durationMs": 1600,
    "easing": "linear",
    "iterations": null,
    "direction": "normal",
    "fill": "none",
    "keyframes": [
      {
        "easing": "ease-in-out",
        "offset": 0,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "ease-in-out",
        "offset": 0.3,
        "opacity": "0.25",
        "composite": "auto",
        "computedOffset": 0.3
      },
      {
        "easing": "ease-in-out",
        "offset": 0.6,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.6
      },
      {
        "easing": "ease-in-out",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "cl__menu",
    "delayMs": 4345,
    "durationMs": 540,
    "easing": "cubic-bezier(0.76, 0, 0.24, 1)",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": null,
        "clipPath": "inset(0px 0px 0px 100%)",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": null,
        "clipPath": "inset(0px)",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "CHANDE",
    "delayMs": 800,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "BOOTCAMP",
    "delayMs": 855,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "100%",
    "delayMs": 965,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "01",
    "delayMs": 1020,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "WORKJAM",
    "delayMs": 1075,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "02",
    "delayMs": 1130,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "CHILL",
    "delayMs": 1185,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "&",
    "delayMs": 1240,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "FUN",
    "delayMs": 1295,
    "durationMs": 790,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 0.4050632911392405,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0.4050632911392405
      },
      {
        "easing": "linear",
        "offset": 0.4051632911392405,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 0.4051632911392405
      },
      {
        "easing": "linear",
        "offset": 1,
        "opacity": "1",
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  }
]
```

### 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-11",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 60,
      "width": 1440,
      "height": 1088
    },
    "role": null,
    "label": "Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized byMi",
    "border": "0px none rgb(36, 85, 53)",
    "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(244, 243, 235)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-13",
      "tag": "canvas",
      "rect": {
        "x": 0,
        "y": 60,
        "width": 1440,
        "height": 1088
      },
      "role": null,
      "label": "field__gl",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1175",
      "tag": "canvas",
      "rect": {
        "x": 960,
        "y": 96,
        "width": 384,
        "height": 384
      },
      "role": null,
      "label": "cflyer",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-70",
      "tag": "canvas",
      "rect": {
        "x": 720,
        "y": 809,
        "width": 177,
        "height": 251
      },
      "role": null,
      "label": "canvas",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-49",
      "tag": "canvas",
      "rect": {
        "x": 194,
        "y": 60,
        "width": 176,
        "height": 250
      },
      "role": null,
      "label": "canvas",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-56",
      "tag": "canvas",
      "rect": {
        "x": 369,
        "y": 310,
        "width": 176,
        "height": 250
      },
      "role": null,
      "label": "canvas",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-63",
      "tag": "canvas",
      "rect": {
        "x": 545,
        "y": 560,
        "width": 176,
        "height": 250
      },
      "role": null,
      "label": "canvas",
      "media": null,
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-103",
      "tag": "video",
      "rect": {
        "x": 18,
        "y": 877,
        "width": 176,
        "height": 105
      },
      "role": null,
      "label": "video",
      "media": {
        "src": "https://www.chandebootcamp.com/assets/video/preview-1013b.mp4",
        "poster": "https://www.chandebootcamp.com/assets/video/preview-1013b-poster.webp",
        "duration": 41.541667
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.7,
      "objectPosition": "50% 33%"
    },
    {
      "id": "ld-75",
      "tag": "img",
      "rect": {
        "x": 744,
        "y": 90,
        "width": 78,
        "height": 54
      },
      "role": null,
      "label": "hero__mark",
      "media": {
        "alt": "",
        "src": "https://www.chandebootcamp.com/assets/img/home/logo-mark.svg",
        "naturalWidth": 104,
        "naturalHeight": 72
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-774",
      "tag": "svg",
      "rect": {
        "x": 19,
        "y": 19,
        "width": 35,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-855",
      "tag": "svg",
      "rect": {
        "x": 1403,
        "y": 23,
        "width": 15,
        "height": 15
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-43",
      "tag": "img",
      "rect": {
        "x": 627,
        "y": 976,
        "width": 3,
        "height": 3
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://www.chandebootcamp.com/assets/img/home/dot.svg",
        "naturalWidth": 4,
        "naturalHeight": 4
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-44",
      "tag": "img",
      "rect": {
        "x": 636,
        "y": 976,
        "width": 3,
        "height": 3
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://www.chandebootcamp.com/assets/img/home/dot.svg",
        "naturalWidth": 4,
        "naturalHeight": 4
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 0,
    "bottom": 1173,
    "pageHeight": 14721
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [
      3,
      6,
      8
    ],
    "representativeContentWidthsPx": [
      672,
      384,
      369
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 12,
    "animations": 13,
    "elementsInSection": 55
  },
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  },
  "animations": [
    {
      "id": "animation-2",
      "fill": "none",
      "easing": "linear",
      "target": {
        "id": "ld-43",
        "tag": "img",
        "rect": {
          "x": 627,
          "y": 976,
          "width": 3,
          "height": 3
        },
        "role": null,
        "label": "img"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "ease-in-out",
          "offset": 0,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "ease-in-out",
          "offset": 0.3,
          "opacity": "0.25",
          "composite": "auto",
          "computedOffset": 0.3
        },
        {
          "easing": "ease-in-out",
          "offset": 0.6,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.6
        },
        {
          "easing": "ease-in-out",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 1600,
      "iterations": null,
      "playbackRate": 1
    },
    {
      "id": "animation-3",
      "fill": "none",
      "easing": "linear",
      "target": {
        "id": "ld-44",
        "tag": "img",
        "rect": {
          "x": 636,
          "y": 976,
          "width": 3,
          "height": 3
        },
        "role": null,
        "label": "img"
      },
      "delayMs": 200,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "ease-in-out",
          "offset": 0,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "ease-in-out",
          "offset": 0.3,
          "opacity": "0.25",
          "composite": "auto",
          "computedOffset": 0.3
        },
        {
          "easing": "ease-in-out",
          "offset": 0.6,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.6
        },
        {
          "easing": "ease-in-out",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 1600,
      "iterations": null,
      "playbackRate": 1
    },
    {
      "id": "animation-4",
      "fill": "none",
      "easing": "linear",
      "target": {
        "id": "ld-45",
        "tag": "img",
        "rect": {
          "x": 645,
          "y": 976,
          "width": 3,
          "height": 3
        },
        "role": null,
        "label": "img"
      },
      "delayMs": 400,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "ease-in-out",
          "offset": 0,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "ease-in-out",
          "offset": 0.3,
          "opacity": "0.25",
          "composite": "auto",
          "computedOffset": 0.3
        },
        {
          "easing": "ease-in-out",
          "offset": 0.6,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.6
        },
        {
          "easing": "ease-in-out",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 1600,
      "iterations": null,
      "playbackRate": 1
    },
    {
      "id": "animation-21",
      "fill": "both",
      "easing": "cubic-bezier(0.76, 0, 0.24, 1)",
      "target": {
        "id": "ld-854",
        "tag": "button",
        "rect": {
          "x": 1380,
          "y": 0,
          "width": 60,
          "height": 60
        },
        "role": null,
        "label": "cl__menu"
      },
      "delayMs": 4345,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": null,
          "clipPath": "inset(0px 0px 0px 100%)",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": null,
          "clipPath": "inset(0px)",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 540,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-24",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-779",
        "tag": "span",
        "rect": {
          "x": 62,
          "y": 17,
          "width": 48,
          "height": 14
        },
        "role": null,
        "label": "CHANDE"
      },
      "delayMs": 800,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-26",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-783",
        "tag": "span",
        "rect": {
          "x": 62,
          "y": 30,
          "width": 67,
          "height": 14
        },
        "role": null,
        "label": "BOOTCAMP"
      },
      "delayMs": 855,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-30",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-795",
        "tag": "span",
        "rect": {
          "x": 321,
          "y": 3,
          "width": 30,
          "height": 14
        },
        "role": null,
        "label": "100%"
      },
      "delayMs": 965,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-32",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-817",
        "tag": "span",
        "rect": {
          "x": 745,
          "y": 17,
          "width": 7,
          "height": 14
        },
        "role": null,
        "label": "01"
      },
      "delayMs": 1020,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-34",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-825",
        "tag": "span",
        "rect": {
          "x": 745,
          "y": 17,
          "width": 61,
          "height": 14
        },
        "role": null,
        "label": "WORKJAM"
      },
      "delayMs": 1075,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-36",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-835",
        "tag": "span",
        "rect": {
          "x": 1102,
          "y": 17,
          "width": 8,
          "height": 14
        },
        "role": null,
        "label": "02"
      },
      "delayMs": 1130,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-38",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-843",
        "tag": "span",
        "rect": {
          "x": 1102,
          "y": 17,
          "width": 32,
          "height": 14
        },
        "role": null,
        "label": "CHILL"
      },
      "delayMs": 1185,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-40",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-846",
        "tag": "span",
        "rect": {
          "x": 1137,
          "y": 17,
          "width": 9,
          "height": 14
        },
        "role": null,
        "label": "&"
      },
      "delayMs": 1240,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-42",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-849",
        "tag": "span",
        "rect": {
          "x": 1150,
          "y": 17,
          "width": 23,
          "height": 14
        },
        "role": null,
        "label": "FUN"
      },
      "delayMs": 1295,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 0.4050632911392405,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0.4050632911392405
        },
        {
          "easing": "linear",
          "offset": 0.4051632911392405,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 0.4051632911392405
        },
        {
          "easing": "linear",
          "offset": 1,
          "opacity": "1",
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 790,
      "iterations": 1,
      "playbackRate": 1
    }
  ],
  "capturedAt": "2026-10-21T18:08:16.518Z",
  "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. **entrance** — The page loads with a main section displaying the event's title and some images. (0s–5s; 100% 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: Asymmetric sticky-sidebar-plus-headline layout pattern; Numbered/captioned media tile system; Staggered word-by-word label reveal animation pattern
- Dependencies: Custom canvas/WebGL pixel-grid rendering (field__gl, cflyer); Phudu display typeface licensing; Specific portrait photography set and video assets
- Guidance: Rebuild the sticky media column and staggered label reveal as a reusable component; the canvas pixel-grid effect must be re-implemented or swapped for a simpler CSS/SVG grid pattern since it is a bespoke rendering dependency.

### 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 “Bootcamp Event Hero”.

Purpose: A striking editorial hero section with large typography, pixelated green graphics, and a sticky sidebar featuring video thumbnails.

Structure: asymmetric two-column. Source layout label: Asymmetric editorial layout with a sticky left sidebar and large central content.. Keep one region persistent or visually anchored while the main region carries the changing content.

Visual signature to preserve at the pattern level: Large bold text 'CHANDE BOOTCAMP BY. MINGG' with vibrant green pixel grids and sticky video thumbnails on the left.

Components: sticky sidebar, large typography, video thumbnails, pixel grid, scrolling marquee.

Style direction: editorial, bold, playful, retro.

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

Typography evidence: {"role":"display","size":"80px","family":"Phudu","source":"computed","traits":"uppercase","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700. Used for major structural headings and high-impact visual text.","sampleId":"font-2","confidence":0.95,"lineHeight":"57.6px","letterSpacing":"-3.2px"} {"role":"heading","size":"80px","family":"Phudu","source":"computed","traits":"uppercase","weight":"700","evidence":"font-7: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700 (similar to font-2 but slightly different usage context). Used for scroll-triggered changing text.","sampleId":"font-7","confidence":0.9,"lineHeight":"64px","letterSpacing":"-3.2px"} {"role":"body","size":"14.4px","family":"Phudu","source":"computed","traits":"uppercase","weight":"600","evidence":"font-6: computed CSS at 1440×1000; AI role: Phudu, 14.4px, weight 600. Used for lists of names and smaller supplementary text.","sampleId":"font-6","confidence":0.85,"lineHeight":"12.9px","letterSpacing":"-0.3px"} {"role":"mono","size":"12px","family":"Geist Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Geist Mono, 12px, weight 500. Used for meta-information, links, and small captions.","sampleId":"font-3","confidence":0.9,"lineHeight":"11.5px","letterSpacing":"-0.2px"}

Color evidence: {"hex":"#68F12B","name":"primary action","role":"primary-action","source":"computed","evidence":"color-12: computed rgb(104, 241, 43); AI role: #68F12B (vibrant green). Key brand and accent color, used in pixel blocks, buttons, and text highlights.","sampleId":"color-12","confidence":0.95} {"hex":"#F4F3EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site.","sampleId":"color-3","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: #000000. Primary text color on light backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#0F1513","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(15, 21, 19); AI role: #0F1513 (dark charcoal/near black). Used for contrasting background sections, particularly in the timeline and footer.","sampleId":"color-8","confidence":0.85} {"hex":"#838B89","name":"muted text","role":"muted-text","source":"computed","evidence":"color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds.","sampleId":"color-24","confidence":0.85}

Typography measured inside this section: {"id":"font-2","size":"80px","count":2,"family":"Phudu","traits":"uppercase","weight":"700","contexts":[{"tag":"h1","top":560,"text":"ChandeBootcampBy. Mingg","property":"font"},{"tag":"p","top":730,"text":"(©26)","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"57.6px","letterSpacing":"-3.2px"} {"id":"font-4","size":"10.5px","count":7,"family":"Geist Mono","traits":"uppercase","weight":"500","contexts":[{"tag":"figcaption","top":963,"text":"Video recap","property":"font"},{"tag":"p","top":21039,"text":"[ Social ]","property":"font"},{"tag":"p","top":21039,"text":"[ Site index ]","property":"font"}],"fontStack":"\"Geist Mono\", ui-monospace, monospace","lineHeight":"10.1px","letterSpacing":"-0.2px"} {"id":"font-5","size":"12px","count":4,"family":"Phudu","traits":"uppercase","weight":"500","contexts":[{"tag":"p","top":762,"text":"2-4 OctoberKe Retreat - Hanoi, VN","property":"font"},{"tag":"p","top":802,"text":"A community connecting eventfor Vietnamese designers.In the most peaceful way.","property":"font"},{"tag":"p","top":762,"text":"2-4 OctoberKe Retreat - Hanoi, VN","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"13.8px","letterSpacing":"-0.2px"} {"id":"font-9","size":"15px","count":16,"family":"Phudu","traits":"uppercase","weight":"600","contexts":[{"tag":"em","top":20973,"text":"Become a partner","property":"font"},{"tag":"em","top":20973,"text":"Register for the next event","property":"font"},{"tag":"span","top":17,"text":"CHANDE","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"13.5px","letterSpacing":"normal"} {"id":"font-10","size":"10.5px","count":16,"family":"Phudu","traits":"uppercase","weight":"500","contexts":[{"tag":"span","top":326,"text":"25","property":"font"},{"tag":"span","top":326,"text":"Hoangz","property":"font"},{"tag":"span","top":576,"text":"26","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"10.3px","letterSpacing":"-0.2px"} {"id":"font-11","size":"12px","count":6,"family":"Phudu","traits":"uppercase","weight":"500","contexts":[{"tag":"span","top":974,"text":"Scroll more","property":"font"},{"tag":"span","top":8128,"text":"We don't say who will","property":"font"},{"tag":"span","top":8139,"text":"be replaced (by AI).","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"11.8px","letterSpacing":"-0.2px"} {"id":"font-14","size":"51.6px","count":1,"family":"Google Sans Flex","traits":"uppercase","weight":"700","contexts":[{"tag":"span","top":714,"text":"©","property":"font"}],"fontStack":"\"Google Sans Flex\", Phudu, sans-serif","lineHeight":"37.2px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-3","hex":"#F4F3EB","alpha":1,"count":3,"contexts":[{"tag":"body","top":0,"text":"PAGE Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized","property":"background"},{"tag":"span","top":974,"text":"Scroll more","property":"text"},{"tag":"section","top":7421,"text":"Amid the relentless (rise of AI). we long for a space rooted in nature, a place of deep (stillness).","property":"background"}],"cssValue":"rgb(244, 243, 235)"} {"id":"color-4","hex":"#C3C4BD","alpha":1,"count":4,"contexts":[{"tag":"section","top":60,"text":"Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized byMi","property":"background"},{"tag":"span","top":1581,"text":"","property":"::after-background"}],"cssValue":"rgb(195, 196, 189)"} {"id":"color-5","hex":"#0E1313","alpha":0.21176470588235294,"count":1,"contexts":[{"tag":"div","top":60,"text":"Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized byMi","property":"background"}],"cssValue":"rgba(15, 21, 19, 0.21)"} {"id":"color-8","hex":"#0F1513","alpha":1,"count":43,"contexts":[{"tag":"figcaption","top":963,"text":"Video recap","property":"text"},{"tag":"g","top":1608,"text":"","property":"svg-stroke"},{"tag":"path","top":1608,"text":"","property":"svg-stroke"}],"cssValue":"rgb(15, 21, 19)"} {"id":"color-10","hex":"#182220","alpha":1,"count":3,"contexts":[{"tag":"div","top":560,"text":"","property":"background"},{"tag":"figcaption","top":310,"text":"25Hoangz","property":"background"},{"tag":"div","top":1654,"text":"","property":"::before-background"}],"cssValue":"rgb(24, 34, 32)"} {"id":"color-12","hex":"#68F12B","alpha":1,"count":44,"contexts":[{"tag":"i","top":1104,"text":"","property":"background"},{"tag":"figcaption","top":810,"text":"27Yen","property":"background"},{"tag":"span","top":1581,"text":"","property":"background"}],"cssValue":"rgb(104, 241, 43)"} {"id":"color-13","hex":"#343332","alpha":1,"count":9,"contexts":[{"tag":"h1","top":560,"text":"ChandeBootcampBy. Mingg","property":"text"},{"tag":"p","top":730,"text":"(©26)","property":"text"},{"tag":"span","top":714,"text":"©","property":"text"}],"cssValue":"rgb(52, 51, 50)"} {"id":"color-18","hex":"#131313","alpha":1,"count":1,"contexts":[{"tag":"div","top":560,"text":"","property":"background"}],"cssValue":"rgb(19, 19, 19)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":60,"width":1440,"height":1088},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[3,6,8],"representativeContentWidthsPx":[672,384,369]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"canvas","rect":{"x":0,"y":60,"width":1440,"height":1088},"aspectRatio":1.3,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"canvas","rect":{"x":960,"y":96,"width":384,"height":384},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"canvas","rect":{"x":720,"y":809,"width":177,"height":251},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"canvas","rect":{"x":194,"y":60,"width":176,"height":250},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-43","tag":"img","rect":{"x":627,"y":976,"width":3,"height":3},"role":null,"label":"img"},"delayMs":0,"durationMs":1600,"easing":"linear","keyframes":[{"easing":"ease-in-out","offset":0,"opacity":"1","composite":"auto","computedOffset":0},{"easing":"ease-in-out","offset":0.3,"opacity":"0.25","composite":"auto","computedOffset":0.3},{"easing":"ease-in-out","offset":0.6,"opacity":"1","composite":"auto","computedOffset":0.6},{"easing":"ease-in-out","offset":1,"opacity":"1","composite":"auto","computedOffset":1}]},{"target":{"id":"ld-44","tag":"img","rect":{"x":636,"y":976,"width":3,"height":3},"role":null,"label":"img"},"delayMs":200,"durationMs":1600,"easing":"linear","keyframes":[{"easing":"ease-in-out","offset":0,"opacity":"1","composite":"auto","computedOffset":0},{"easing":"ease-in-out","offset":0.3,"opacity":"0.25","composite":"auto","computedOffset":0.3},{"easing":"ease-in-out","offset":0.6,"opacity":"1","composite":"auto","computedOffset":0.6},{"easing":"ease-in-out","offset":1,"opacity":"1","composite":"auto","computedOffset":1}]},{"target":{"id":"ld-45","tag":"img","rect":{"x":645,"y":976,"width":3,"height":3},"role":null,"label":"img"},"delayMs":400,"durationMs":1600,"easing":"linear","keyframes":[{"easing":"ease-in-out","offset":0,"opacity":"1","composite":"auto","computedOffset":0},{"easing":"ease-in-out","offset":0.3,"opacity":"0.25","composite":"auto","computedOffset":0.3},{"easing":"ease-in-out","offset":0.6,"opacity":"1","composite":"auto","computedOffset":0.6},{"easing":"ease-in-out","offset":1,"opacity":"1","composite":"auto","computedOffset":1}]},{"target":{"id":"ld-854","tag":"button","rect":{"x":1380,"y":0,"width":60,"height":60},"role":null,"label":"cl__menu"},"delayMs":4345,"durationMs":540,"easing":"cubic-bezier(0.76, 0, 0.24, 1)","keyframes":[{"easing":"linear","offset":null,"clipPath":"inset(0px 0px 0px 100%)","composite":"auto","computedOffset":0},{"easing":"linear","offset":null,"clipPath":"inset(0px)","composite":"auto","computedOffset":1}]},{"target":{"id":"ld-779","tag":"span","rect":{"x":62,"y":17,"width":48,"height":14},"role":null,"label":"CHANDE"},"delayMs":800,"durationMs":790,"easing":"linear","keyframes":[{"easing":"linear","offset":0,"opacity":"0","composite":"auto","computedOffset":0},{"easing":"linear","offset":0.4050632911392405,"opacity":"0","composite":"auto","computedOffset":0.4050632911392405},{"easing":"linear","offset":0.4051632911392405,"opacity":"1","composite":"auto","computedOffset":0.4051632911392405},{"easing":"linear","offset":1,"opacity":"1","composite":"auto","computedOffset":1}]},{"target":{"id":"ld-783","tag":"span","rect":{"x":62,"y":30,"width":67,"height":14},"role":null,"label":"BOOTCAMP"},"delayMs":855,"durationMs":790,"easing":"linear","keyframes":[{"easing":"linear","offset":0,"opacity":"0","composite":"auto","computedOffset":0},{"easing":"linear","offset":0.4050632911392405,"opacity":"0","composite":"auto","computedOffset":0.4050632911392405},{"easing":"linear","offset":0.4051632911392405,"opacity":"1","composite":"auto","computedOffset":0.4051632911392405},{"easing":"linear","offset":1,"opacity":"1","composite":"auto","computedOffset":1}]}]

Motion evidence: entrance: The page loads with a main section displaying the event's title and some images. (100% confidence)

Transfer these principles: Asymmetric sticky-sidebar-plus-headline layout pattern; Numbered/captioned media tile system; Staggered word-by-word label reveal animation pattern.

Dependencies: Custom canvas/WebGL pixel-grid rendering (field__gl, cflyer); Phudu display typeface licensing; Specific portrait photography set and video assets.

Adaptation guidance: Rebuild the sticky media column and staggered label reveal as a reusable component; the canvas pixel-grid effect must be re-implemented or swapped for a simpler CSS/SVG grid pattern since it is a bespoke rendering dependency.

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