# Scattering card gallery Schema: Design Details SECTION.md v3.2 Website: Kelvin Source: https://kelvin.8b.com/ Source section IDs: f19e7da0-451e-4091-b0b5-99f2b8ba1898 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A fixed left text column holds a light serif headline and short body copy while the portrait cards on the right do the moving, so the message stays readable throughout. - Card sizes vary and overlap, with a consistent shadow, so the grid feels scattered but still controlled, and the eye follows a diagonal path. - Each card has a bold uppercase name label over the image, and the cream canvas with dark text keeps the saturated thermal colours as the only loud element. What a screenshot can't show: - Between roughly 9 and 15 seconds of scrolling, a single stack of cards spreads out into the grid; it is tied to scroll position. - The headline measures about 50px in weight 200 with -1px tracking and almost no extra line height, while body text is 17px on 26px lines and card names are 27px at weight 800. - Gaps are tight, about 5px and 32px, and the section has 158px of bottom padding only. Borrow: Let a stacked pile of images unfold into a layout on scroll while the text stays pinned, so the motion explains the content and doesn't just decorate it. Leave alone: Don't copy the thermal-heat colour treatment, the Kalnia and Hubot Sans pairing, or the performer-specific copy; use your own image treatment and a similar light display serif with a sturdy sans. ## Classification - Type: gallery - Layout: Sticky or split-screen scroll layout where left-aligned text remains fixed while right-aligned images expand into a grid. - Styles: editorial, colourful, photographic - Confidence: 100% ## Purpose and structure A section that transitions from a single stack of vibrant cards to an irregular grid of images alongside large editorial text. Visual signature: A chaotic, colorful cluster of portrait-oriented thermal images forming an overlapping grid. ## Components - Large editorial heading - Supporting text block - Image cards - Irregular grid layout ## Typography - Display: Kalnia — 86.4px 200 - Heading: Hubot Sans — 34.6px 800 - Body: Hubot Sans — 17px 400 ## Functional palette - Canvas: canvas #F1EDE4 - Text: text #110D19 - Muted-Text: muted text #5B5664 ## Motion evidence - 9.0–15.0s — A single stack of colorful artist cards spreads outwards into a grid layout as the user scrolls down. (98% confidence) ## Section quality Overall: 66.60/100 (Good) Scored coverage: 100% - Typography: 66 — Elegant contrast between the serif display headline (Kalnia, 200 weight, tight tracking) and the bold uppercase sans labels on the card nameplates creates clear hierarchy and editorial tone. Body copy is restrained and legible, but the typographic palette is limited to two families used fairly conventionally. Next tier: Needs more distinctive type-driven detail (e.g. kinetic type, custom numerals, varied scale relationships) beyond a serif/sans pairing to reach strong/memorable. - Composition: 72 — The sticky left text column against an irregular, overlapping grid of portrait cards on the right is a well-built editorial layout: asymmetry, varied card sizes, consistent shadow treatment, and a diagonal flow guiding the eye through named performers toward the 'also in the hall' list. The scattered-to-grid structure gives the cluster a sense of controlled chaos rather than randomness. Next tier: To reach exceptional, the grid's overlap and spacing would need more deliberate rhythm/alignment logic visible in the crop rather than feeling like a loosely stacked photo pile. - Motion: 62 — Gemini documents a single clear, timestamped motion beat: a stack of cards spreading into a grid on scroll (9-15s), which is a legible, purposeful reveal tied to content hierarchy rather than decoration. Next tier: Only one motion moment is documented; no evidence of staggered timing, easing character, or secondary motion (hover, parallax) that would push it into memorable territory. - Content: 70 — Thermal-imaging treatment of performer portraits is a genuine unifying visual device tied to the copy ('filmed in heat', 'a dance piece written for heat'), and the nameplate cards integrate text and image cleanly with real editorial copy rather than lorem ipsum. Next tier: The 'also in the hall' list breaks from the thermal visual system entirely as plain text, slightly diluting the content-to-concept cohesion needed for a higher score. - Originality: 68 — The heat-map color treatment applied consistently across cropped portrait fragments, combined with the stack-to-scatter motion concept, is a specific and recognizable idea rather than a generic masonry gallery. Next tier: The overlapping card gallery and nameplate-tag pattern are a known editorial convention; the thermal imagery is the main novel layer, which alone is not quite enough for a landmark rating. - Adaptability: 60 — Structure (sticky text + grid of cards), hierarchy (name/role nameplate overlay), and skin (thermal color grading, serif/sans pairing) are clearly separable in the deterministic data, with consistent card/shadow/image token patterns across six repeated card instances. Next tier: Reaching higher would need documented interaction states (hover, responsive breakpoint behavior) to prove the pattern holds beyond the single desktop capture. Strengths: - Thermal/heat-map color grading unifies a disparate set of portrait photos into one cohesive visual system tied to the section's copy theme - Sticky editorial text column paired with an irregular, overlapping card grid gives clear reading order despite visual density - Consistent nameplate card treatment (name, day, role) with uniform shadow and sharp corners across all six cards reinforces a systematic design language Weaknesses: - Only one documented motion moment limits assessment of overall interaction quality - The plain-text 'also in the hall' list breaks visual continuity with the styled thermal cards - Typographic system relies on a fairly standard serif/sans pairing without additional distinctive type details - Overlapping card arrangement reads as loosely stacked rather than precisely choreographed Why it does not reach the next tier: The section demonstrates a coherent concept (thermal imagery plus scatter-to-grid motion) and solid editorial composition, but the single captured motion beat, conventional type pairing, and inconsistent treatment of the overflow list keep it from feeling fully resolved and distinctive enough for 'strong' across all axes. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the sticky-column-plus-irregular-grid skeleton and nameplate card convention for any gallery needing named entries; the thermal color treatment and scatter motion are the proprietary layer that would need re-creation or a substitute visual effect. What transfers: - Sticky text column paired with scattering image grid structure - Nameplate overlay card pattern (name/day/role tag on image) - Serif display headline over sans-serif supporting text hierarchy Dependencies: - Thermal/heat-map image processing as the distinguishing visual skin - Custom photography set with portrait aspect ratios - Specific scroll-triggered stack-to-grid animation ## 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 assessed from a single timestamped description, not full visual confirmation of easing or stagger details - No evidence of responsive/mobile behavior for the grid and sticky column - Animation parameters array was empty, so motion scoring relies solely on Gemini's observation ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: gallery - Source type: gallery - Structure: two-column - Layout: Sticky or split-screen scroll layout where left-aligned text remains fixed while right-aligned images expand into a grid. - Styles: editorial, colourful, photographic - Components: Large editorial heading, Supporting text block, Image cards, Irregular grid layout - Purpose: A section that transitions from a single stack of vibrant cards to an irregular grid of images alongside large editorial text. - Visual signature: A chaotic, colorful cluster of portrait-oriented thermal images forming an overlapping grid. - Place on the page: 4 of 11, after Stats (`kelvin-8b-com:C03`), before Process (`kelvin-8b-com:C05`) ### Crop and composition - Crop: 1440×2295px; aspect ratio 0.627:1 - Page bounds: 2318–4613px of 13551px - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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": "Kalnia", "stack": "Kalnia, Georgia, serif", "size": "50.4px", "weight": "200", "lineHeight": "51.4px", "letterSpacing": "-1px", "sample": "Six in the frame, forty‑one in the hall", "element": "h2", "occurrences": 1, "sourceId": "font-11" }, { "role": "body/supporting copy", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "17px", "weight": "400", "lineHeight": "26.4px", "letterSpacing": "normal", "sample": "The cameras follow the people who make the room warm. This summer that means live electronics, a thr", "element": "p", "occurrences": 27, "sourceId": "font-12" }, { "role": "card/subheading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "27.4px", "weight": "800", "lineHeight": "25.2px", "letterSpacing": "0.1px", "sample": "Ines Aalto", "element": "span", "occurrences": 6, "sourceId": "font-22" } ], "siteRoles": [ { "role": "display", "size": "86.4px", "family": "Kalnia", "source": "computed", "traits": "Regular", "weight": "200", "evidence": "font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "88.1px", "letterSpacing": "-1.7px" }, { "role": "heading", "size": "34.6px", "family": "Hubot Sans", "source": "computed", "traits": "uppercase", "weight": "800", "evidence": "font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "31.8px", "letterSpacing": "0.2px" }, { "role": "body", "size": "17px", "family": "Hubot Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.", "sampleId": "font-12", "confidence": 0.95, "lineHeight": "26.4px", "letterSpacing": "normal" } ] } ``` ### Exact color evidence The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate. ```json { "sectionUsage": [ { "value": "#5B5664", "cssValue": "rgb(91, 86, 100)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 20, "sourceId": "color-4" } ], "functionalPalette": [ { "hex": "#F1EDE4", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#110D19", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#5B5664", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.", "sampleId": "color-4", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px, no border-radius visible.", "density": "Low density; ample negative space emphasizes the scale of the typography and vibrancy of the images.", "evidence": "Visual inspection of stat blocks (fine lines), button shapes (sharp), and section pacing confirms these tokens.", "borderStyle": "Thin (1px), solid borders used extensively as structural dividers in lists, stats, and tables.", "buttonStyle": "Solid, sharp-edged rectangles (often black on light, or white on dark) containing bold, uppercase, highly-tracked sans-serif text.", "cornerStyle": "Strictly sharp corners across all buttons, images, and layout containers.", "contentWidth": "Wide max-width with elements often breaking the grid or spanning full viewport width, but maintaining alignment down central columns.", "spacingRhythm": "Generous spacing with large macro-margins between sections, allowing the large typography and imagery to breathe." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×2995px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"158.4px"}; gap normal; background rgb(241, 237, 228); radius 0px. - Observed gaps: 4.8, 32px. - Representative content widths: 846, 476, 339, 295, 266, 242px. - Layout containers: 8; cards/surfaces: 6; media elements: 12; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 2318, "bottom": 4613, "pageHeight": 13551 } }, "container": { "size": "1440×2995px", "position": "x 0px, y 2318px", "display": "block", "positionMode": "relative", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "158.4px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgb(241, 237, 228)", "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 4.8, 32 ], "representativeContentWidthsPx": [ 846, 476, 339, 295, 266, 242 ] }, "columns": [ { "element": "header · Six in the frame, forty‑one in the hall The cameras follow the people who make the room warm. This s", "size": "476×880px", "position": "x 43px, y 2406px", "display": "grid", "template": "475.781px", "direction": "row", "gap": "32px" }, { "element": "li · Ines AaltoFri · live electronics", "size": "295×343px", "position": "x 827px, y 2675px", "display": "grid", "template": "366.062px", "direction": "row", "gap": "normal" }, { "element": "p · Ines AaltoFri · live electronics", "size": "148×71px", "position": "x 875px, y 2947px", "display": "grid", "template": "189px", "direction": "row", "gap": "4.8px" }, { "element": "li · Leo MarchettiFri · modular live", "size": "223×266px", "position": "x 862px, y 2713px", "display": "grid", "template": "295.672px", "direction": "row", "gap": "normal" }, { "element": "p · Leo MarchettiFri · modular live", "size": "125×59px", "position": "x 862px, y 2911px", "display": "grid", "template": "155.797px", "direction": "row", "gap": "4.8px" }, { "element": "li · Pia SolSat · three-hour set", "size": "242×294px", "position": "x 853px, y 2700px", "display": "grid", "template": "337.906px", "direction": "row", "gap": "normal" }, { "element": "p · Pia SolSat · three-hour set", "size": "132×54px", "position": "x 868px, y 2941px", "display": "grid", "template": "169.969px", "direction": "row", "gap": "4.8px" }, { "element": "li · Kofi LumenSat · DJ, b2b Pia Sol", "size": "203×239px", "position": "x 872px, y 2727px", "display": "grid", "template": "260.469px", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "li · Ines AaltoFri · live electronics", "size": "295×343px", "position": "x 827px, y 2675px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "background": "rgb(241, 237, 228)" }, { "element": "li · NoorSun · voice and strings", "size": "266×317px", "position": "x 841px, y 2688px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "background": "rgb(241, 237, 228)" }, { "element": "li · Pia SolSat · three-hour set", "size": "242×294px", "position": "x 853px, y 2700px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "background": "rgb(241, 237, 228)" }, { "element": "li · Vera NovakSun · dance, Afterimage", "size": "222×269px", "position": "x 863px, y 2712px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "background": "rgb(241, 237, 228)" }, { "element": "li · Leo MarchettiFri · modular live", "size": "223×266px", "position": "x 862px, y 2713px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "background": "rgb(241, 237, 228)" }, { "element": "li · Kofi LumenSat · DJ, b2b Pia Sol", "size": "203×239px", "position": "x 872px, y 2727px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "background": "rgb(241, 237, 228)" } ], "surfaces": { "radii": [], "borders": [ "1px solid rgb(17, 13, 25)" ], "shadows": [ "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px" ] } } ``` #### Media treatment ```json [ { "element": "img · m-photo-heat__img", "size": "295×343px", "position": "x 827px, y 2675px", "aspectRatio": 0.9, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1551184451-76b762941ad6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__visible", "size": "295×343px", "position": "x 827px, y 2675px", "aspectRatio": 0.9, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1551184451-76b762941ad6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__img", "size": "266×317px", "position": "x 841px, y 2688px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1764698192249-641a17d7a4fe?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__visible", "size": "266×317px", "position": "x 841px, y 2688px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1764698192249-641a17d7a4fe?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__img", "size": "242×294px", "position": "x 853px, y 2700px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1617690032703-f991ed0e0ee6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__visible", "size": "242×294px", "position": "x 853px, y 2700px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1617690032703-f991ed0e0ee6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__img", "size": "222×269px", "position": "x 863px, y 2712px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1653443673814-a8d18180451f?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Mnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__visible", "size": "222×269px", "position": "x 863px, y 2712px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1653443673814-a8d18180451f?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Mnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__img", "size": "223×266px", "position": "x 862px, y 2713px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1636486183541-83634a8dc9a7?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__visible", "size": "223×266px", "position": "x 862px, y 2713px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1636486183541-83634a8dc9a7?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60" }, { "element": "img · m-photo-heat__img", "size": "203×239px", "position": "x 872px, y 2727px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1737013099055-b1da7395a61c?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8OHx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60" }, { "element": "img · m-photo-heat__visible", "size": "203×239px", "position": "x 872px, y 2727px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1737013099055-b1da7395a61c?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8OHx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60" } ] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json { "root": { "id": "ld-109", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 2318, "width": 1440, "height": 2995 }, "role": null, "label": "Six in the frame, forty‑one in the hall The cameras follow the people who make the room warm. This s", "border": "0px none rgb(17, 13, 25)", "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": "158.4px" }, "overflow": "visible", "position": "relative", "background": "rgb(241, 237, 228)" }, "cards": [ { "id": "ld-116", "tag": "li", "rect": { "x": 827, "y": 2675, "width": 295, "height": 343 }, "role": null, "label": "Ines AaltoFri · live electronics", "border": "0px none rgb(17, 13, 25)", "radius": "0px", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgb(241, 237, 228)" }, { "id": "ld-148", "tag": "li", "rect": { "x": 841, "y": 2688, "width": 266, "height": 317 }, "role": null, "label": "NoorSun · voice and strings", "border": "0px none rgb(17, 13, 25)", "radius": "0px", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgb(241, 237, 228)" }, { "id": "ld-132", "tag": "li", "rect": { "x": 853, "y": 2700, "width": 242, "height": 294 }, "role": null, "label": "Pia SolSat · three-hour set", "border": "0px none rgb(17, 13, 25)", "radius": "0px", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgb(241, 237, 228)" }, { "id": "ld-156", "tag": "li", "rect": { "x": 863, "y": 2712, "width": 222, "height": 269 }, "role": null, "label": "Vera NovakSun · dance, Afterimage", "border": "0px none rgb(17, 13, 25)", "radius": "0px", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgb(241, 237, 228)" }, { "id": "ld-124", "tag": "li", "rect": { "x": 862, "y": 2713, "width": 223, "height": 266 }, "role": null, "label": "Leo MarchettiFri · modular live", "border": "0px none rgb(17, 13, 25)", "radius": "0px", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgb(241, 237, 228)" }, { "id": "ld-140", "tag": "li", "rect": { "x": 872, "y": 2727, "width": 203, "height": 239 }, "role": null, "label": "Kofi LumenSat · DJ, b2b Pia Sol", "border": "0px none rgb(17, 13, 25)", "radius": "0px", "shadow": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgb(241, 237, 228)" } ], "media": [ { "id": "ld-118", "tag": "img", "rect": { "x": 827, "y": 2675, "width": 295, "height": 343 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "Close portrait of Ines Aalto with a streak of light across her face, in heat colours", "src": "https://images.unsplash.com/photo-1551184451-76b762941ad6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.9, "objectPosition": "50% 50%" }, { "id": "ld-120", "tag": "img", "rect": { "x": 827, "y": 2675, "width": 295, "height": 343 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1551184451-76b762941ad6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.9, "objectPosition": "50% 50%" }, { "id": "ld-150", "tag": "img", "rect": { "x": 841, "y": 2688, "width": 266, "height": 317 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "Noor leaning on a wall in a white jacket and striped trousers, in heat colours", "src": "https://images.unsplash.com/photo-1764698192249-641a17d7a4fe?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-152", "tag": "img", "rect": { "x": 841, "y": 2688, "width": 266, "height": 317 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1764698192249-641a17d7a4fe?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-134", "tag": "img", "rect": { "x": 853, "y": 2700, "width": 242, "height": 294 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "Pia Sol in sunglasses and a ruffled dress, in heat colours", "src": "https://images.unsplash.com/photo-1617690032703-f991ed0e0ee6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-136", "tag": "img", "rect": { "x": 853, "y": 2700, "width": 242, "height": 294 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1617690032703-f991ed0e0ee6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-158", "tag": "img", "rect": { "x": 863, "y": 2712, "width": 222, "height": 269 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "Vera Novak turning her head in motion, blurred, in heat colours", "src": "https://images.unsplash.com/photo-1653443673814-a8d18180451f?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Mnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 623 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-160", "tag": "img", "rect": { "x": 863, "y": 2712, "width": 222, "height": 269 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1653443673814-a8d18180451f?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Mnx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 623 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-126", "tag": "img", "rect": { "x": 862, "y": 2713, "width": 223, "height": 266 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "Leo Marchetti, long curly hair, looking into the camera, in heat colours", "src": "https://images.unsplash.com/photo-1636486183541-83634a8dc9a7?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-128", "tag": "img", "rect": { "x": 862, "y": 2713, "width": 223, "height": 266 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1636486183541-83634a8dc9a7?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8NXx8cG9ydHJhaXQlMjBmYWNlJTIwY2xvc2V1cCUyMGRyYW1hdGljJTIwbGlnaHR8ZW58MXwxfHx8MTc5MTA2MzAzOXww&ixlib=rb-4.1.0&auto=format&fit=crop&w=500&q=60", "naturalWidth": 500, "naturalHeight": 750 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-142", "tag": "img", "rect": { "x": 872, "y": 2727, "width": 203, "height": 239 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "Kofi Lumen in a puffer jacket and blue sunglasses, in heat colours", "src": "https://images.unsplash.com/photo-1737013099055-b1da7395a61c?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8OHx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60", "naturalWidth": 400, "naturalHeight": 600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-144", "tag": "img", "rect": { "x": 872, "y": 2727, "width": 203, "height": 239 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1737013099055-b1da7395a61c?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8OHx8cG9ydHJhaXQlMjBjb2xvcmZ1bCUyMGJhY2tncm91bmQlMjBmYXNoaW9ufGVufDF8MXx8fDE3OTEwNjMyNjF8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60", "naturalWidth": 400, "naturalHeight": 600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" } ], "bounds": { "top": 2318, "bottom": 4613, "pageHeight": 13551 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-112", "gap": "32px", "tag": "header", "rect": { "x": 43, "y": 2406, "width": 476, "height": 880 }, "role": null, "label": "Six in the frame, forty‑one in the hall The cameras follow the people who make the room warm. This s", "columns": "475.781px", "display": "grid", "direction": "row" }, { "id": "ld-116", "gap": "normal", "tag": "li", "rect": { "x": 827, "y": 2675, "width": 295, "height": 343 }, "role": null, "label": "Ines AaltoFri · live electronics", "columns": "366.062px", "display": "grid", "direction": "row" }, { "id": "ld-121", "gap": "4.8px", "tag": "p", "rect": { "x": 875, "y": 2947, "width": 148, "height": 71 }, "role": null, "label": "Ines AaltoFri · live electronics", "columns": "189px", "display": "grid", "direction": "row" }, { "id": "ld-124", "gap": "normal", "tag": "li", "rect": { "x": 862, "y": 2713, "width": 223, "height": 266 }, "role": null, "label": "Leo MarchettiFri · modular live", "columns": "295.672px", "display": "grid", "direction": "row" }, { "id": "ld-129", "gap": "4.8px", "tag": "p", "rect": { "x": 862, "y": 2911, "width": 125, "height": 59 }, "role": null, "label": "Leo MarchettiFri · modular live", "columns": "155.797px", "display": "grid", "direction": "row" }, { "id": "ld-132", "gap": "normal", "tag": "li", "rect": { "x": 853, "y": 2700, "width": 242, "height": 294 }, "role": null, "label": "Pia SolSat · three-hour set", "columns": "337.906px", "display": "grid", "direction": "row" }, { "id": "ld-137", "gap": "4.8px", "tag": "p", "rect": { "x": 868, "y": 2941, "width": 132, "height": 54 }, "role": null, "label": "Pia SolSat · three-hour set", "columns": "169.969px", "display": "grid", "direction": "row" }, { "id": "ld-140", "gap": "normal", "tag": "li", "rect": { "x": 872, "y": 2727, "width": 203, "height": 239 }, "role": null, "label": "Kofi LumenSat · DJ, b2b Pia Sol", "columns": "260.469px", "display": "grid", "direction": "row" } ], "spacing": { "gapsPx": [ 4.8, 32 ], "representativeContentWidthsPx": [ 846, 476, 339, 295, 266, 242 ] }, "coverage": { "cards": 6, "media": 12, "animations": 0, "elementsInSection": 41 }, "surfaces": { "radii": [], "borders": [ "1px solid rgb(17, 13, 25)" ], "shadows": [ "color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px" ] }, "animations": [], "capturedAt": "2026-11-01T08:13:50.678Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **scroll** — A single stack of colorful artist cards spreads outwards into a grid layout as the user scrolls down. (9s–15s; 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: 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: Sticky text column paired with scattering image grid structure; Nameplate overlay card pattern (name/day/role tag on image); Serif display headline over sans-serif supporting text hierarchy - Dependencies: Thermal/heat-map image processing as the distinguishing visual skin; Custom photography set with portrait aspect ratios; Specific scroll-triggered stack-to-grid animation - Guidance: Reuse the sticky-column-plus-irregular-grid skeleton and nameplate card convention for any gallery needing named entries; the thermal color treatment and scatter motion are the proprietary layer that would need re-creation or a substitute visual effect. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Scattering card gallery”. Purpose: A section that transitions from a single stack of vibrant cards to an irregular grid of images alongside large editorial text. Structure: two-column. Source layout label: Sticky or split-screen scroll layout where left-aligned text remains fixed while right-aligned images expand into a grid.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: A chaotic, colorful cluster of portrait-oriented thermal images forming an overlapping grid. Components: Large editorial heading, Supporting text block, Image cards, Irregular grid layout. Style direction: editorial, colourful, photographic. Observed crop: 1440×2295px (0.627:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"86.4px","family":"Kalnia","source":"computed","traits":"Regular","weight":"200","evidence":"font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'","sampleId":"font-5","confidence":0.95,"lineHeight":"88.1px","letterSpacing":"-1.7px"} {"role":"heading","size":"34.6px","family":"Hubot Sans","source":"computed","traits":"uppercase","weight":"800","evidence":"font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.","sampleId":"font-2","confidence":0.9,"lineHeight":"31.8px","letterSpacing":"0.2px"} {"role":"body","size":"17px","family":"Hubot Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.","sampleId":"font-12","confidence":0.95,"lineHeight":"26.4px","letterSpacing":"normal"} Color evidence: {"hex":"#F1EDE4","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#110D19","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.","sampleId":"color-2","confidence":0.9} {"hex":"#5B5664","name":"muted text","role":"muted-text","source":"computed","evidence":"color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.","sampleId":"color-4","confidence":0.8} Typography measured inside this section: {"id":"font-11","size":"50.4px","count":1,"family":"Kalnia","traits":"Regular","weight":"200","contexts":[{"tag":"h2","top":2406,"text":"Six in the frame, forty‑one in the hall","property":"font"}],"fontStack":"Kalnia, Georgia, serif","lineHeight":"51.4px","letterSpacing":"-1px"} {"id":"font-12","size":"17px","count":27,"family":"Hubot Sans","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":3139,"text":"The cameras follow the people who make the room warm. This summer that means live electronics, a thr","property":"font"},{"tag":"p","top":5980,"text":"Slow heat. Live sets with long builds, the hall warming one degree at a time.","property":"font"},{"tag":"p","top":5900,"text":"The full spectrum. The long night, both floors open until four.","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"26.4px","letterSpacing":"normal"} {"id":"font-22","size":"27.4px","count":6,"family":"Hubot Sans","traits":"uppercase","weight":"800","contexts":[{"tag":"span","top":2956,"text":"Ines Aalto","property":"font"},{"tag":"span","top":2919,"text":"Leo Marchetti","property":"font"},{"tag":"span","top":2948,"text":"Pia Sol","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"25.2px","letterSpacing":"0.1px"} Colors measured inside this section: {"id":"color-4","hex":"#5B5664","alpha":1,"count":20,"contexts":[{"tag":"span","top":27,"text":"Sound in heat · 2027","property":"text"},{"tag":"p","top":3139,"text":"The cameras follow the people who make the room warm. This summer that means live electronics, a thr","property":"text"},{"tag":"h3","top":5066,"text":"Also in the hall","property":"text"}],"cssValue":"rgb(91, 86, 100)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2318,"width":1440,"height":2995},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"158.4px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[4.8,32],"representativeContentWidthsPx":[846,476,339,295,266,242]}; surfaces {"radii":[],"borders":["1px solid rgb(17, 13, 25)"],"shadows":["color(srgb 0.0666667 0.0509804 0.0980392 / 0.55) 0px 22px 44px -22px"]}; media [{"tag":"img","rect":{"x":827,"y":2675,"width":295,"height":343},"aspectRatio":0.9,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":827,"y":2675,"width":295,"height":343},"aspectRatio":0.9,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":841,"y":2688,"width":266,"height":317},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":841,"y":2688,"width":266,"height":317},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}] Motion evidence: scroll: A single stack of colorful artist cards spreads outwards into a grid layout as the user scrolls down. (98% confidence) Transfer these principles: Sticky text column paired with scattering image grid structure; Nameplate overlay card pattern (name/day/role tag on image); Serif display headline over sans-serif supporting text hierarchy. Dependencies: Thermal/heat-map image processing as the distinguishing visual skin; Custom photography set with portrait aspect ratios; Specific scroll-triggered stack-to-grid animation. Adaptation guidance: Reuse the sticky-column-plus-irregular-grid skeleton and nameplate card convention for any gallery needing named entries; the thermal color treatment and scatter motion are the proprietary layer that would need re-creation or a substitute visual effect. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.