# Expanding video grid over typography Schema: Design Details SECTION.md v3.2 Website: Sensei Source: https://www.sensei.tech/ Source section IDs: gap-aec81f59-2000-6000 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A huge centered headline acts as a stage, and photo tiles layer over it so text and imagery collide into one composition. - Real photographs of store interiors, shelves and people using tech back the 'autonomous retail' message directly. - A quiet warm-neutral palette of off-white canvas, near-black text and a faint radial grid lets the photos carry the color. What a screenshot can't show: - The tiles emerge from the center and spread outward into a grid over about 7 seconds (13–20s), tied to scroll. - Scrolling back up collapses the grid toward the center in about 8 seconds (130–138s). Exact easing, rotations and spacing were not measured. Borrow: Tie a scroll-driven burst of imagery from the center to a bold headline so the media reveals and then frames the message. Leave alone: Don't copy the polaroid-style tiles, the exact photo positions and rotations, the pale yellow accent or the Neue Haas Grotesk headline; a free Helvetica-style grotesque such as Inter works instead. ## Classification - Type: editorial - Layout: Centered typography with absolutely positioned media elements scaling and translating on scroll. - Styles: minimal, photographic, typographic - Confidence: 90% ## Purpose and structure A dynamic scrolling section where a grid of video polaroids emerges from the center and expands outwards over a large typographic headline. Visual signature: Scattered videos forming a grid over the text 'The best version of retail is autonomous'. ## Components - large headline - video thumbnails - grid background ## Typography - Display: neue-haas-grotesk-display — 88px 500 - Heading: neue-haas-grotesk-display — 52px 500 - Body: neue-haas-grotesk-display — 13.6px 500 ## Functional palette - Canvas: canvas #F8F7F4 - Text: text #1D1D1D - Primary-Action: primary action #F8FD8F - Muted-Text: muted text #A5A99F - Surface: surface #ECEBE4 ## Motion evidence - 13.0–20.0s — Video thumbnails emerge from the center and spread outwards to form a grid, accompanied by a background grid pattern. (95% confidence) - 130.0–138.0s — Scrolling back up, the video grid collapses back towards the center and disappears. (95% confidence) ## Section quality Overall: 63.50/100 (Good) Scored coverage: 100% - Typography: 65 — Large centered display type (88px Neue Haas Grotesk) with clean hierarchy sets a confident editorial tone, but it's a single static headline treatment with no internal typographic variation beyond scale; the type is largely a stage for the media rather than a developed typographic system. Next tier: Needs more deliberate typographic craft (line-break control, weight contrast, kerning nuance) rather than just a large centered sentence that gets obscured by photos. - Composition: 68 — The radial/grid backdrop and the scattered, overlapping polaroid-style images breaking across the text create a layered, considered composition with a clear focal structure that holds attention as images collide with the headline. Next tier: Overlap feels improvised rather than precisely choreographed; alignment of image edges to grid/text baseline is loose, keeping it short of a highly engineered compositional system. - Motion: 60 — Gemini confirms timestamped emergence (13-20s) and collapse (130-138s) of the grid outward/inward from center over the headline, a clear and purposeful directional motion tied to scroll. Next tier: Only two described motion beats (expand, collapse) with no detail on easing, stagger, or intermediate choreography, limiting confidence that the motion is highly refined beyond a basic scatter effect. - Content: 62 — Photographic content (store interiors, product shelves, a person interacting with tech) supports the 'autonomous retail' message directly, integrating real environment imagery rather than generic stock visuals. Next tier: Images are utilitarian product/environment shots without distinct art direction or consistent framing, so content feels functional rather than elevated. - Originality: 66 — The scatter-to-grid formation over a bold headline, combined with a radial grid background, is a distinct structural idea beyond typical image-reveal patterns, though the 'polaroid scatter' trope itself is a known editorial device. Next tier: The core mechanic (images flying out over text) is a recognizable pattern seen elsewhere; a more unexpected detail (unique easing, material quality, interactive response) is needed to feel genuinely singular. - Adaptability: 58 — The layered structure (headline layer, grid-background layer, absolutely positioned media layer) is separable and could be reskinned with different imagery/copy, but exact positions/rotations of each photo are bespoke and not clearly parameterized. Next tier: Lack of deterministic data on image counts, exact transform values, and stagger timing makes systemizing the effect for new content non-trivial. Strengths: - Clear directional scroll-tied choreography (expand outward then collapse inward) - Radial grid backdrop reinforces the 'network/autonomous' theme subtly - Overlapping photographic grid creates visual depth against flat typographic background Weaknesses: - Images obscure the headline mid-transition reducing legibility - Photo content is generic environment/product shots without unified art direction - Motion evidence limited to two coarse beats, no detail on easing or stagger refinement - Composition overlap feels loosely randomized rather than precisely tuned Why it does not reach the next tier: The section has a legible structural idea and confirmed scroll choreography, but lacks the typographic nuance, compositional precision, and content distinctiveness needed to feel like a singular, hard-to-substitute design statement rather than a well-executed common pattern. ## Adaptation guidance - Effort: Medium - Guidance: Recreate as three independent layers (static grid background, centered headline text, and a set of absolutely positioned image cards) and drive position/scale/opacity via scroll progress; swap photographic content and headline copy while preserving the layer separation and timing pattern. What transfers: - Layered structure separating background grid, headline text, and absolutely positioned media - Scroll-triggered expand/collapse motion pattern - Centered large-type headline as compositional anchor Dependencies: - Specific photographic assets depicting retail/store environments - Exact scatter positions, rotation, and scale values per image - Precise scroll trigger offsets for expand and collapse ## Living vocabulary - No reusable vocabulary candidates were supported by this section. Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented. ## Provenance and limitations - Section boundaries and naming: Gemini Pro visual observation - Motion observations: Gemini Pro direct-video analysis - Quality judgment: Claude - Exact design facts: browser/CSS extraction at website scope - Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%) - No deterministic data on number of images, their exact transforms, or easing curves - Motion inference relies solely on Gemini's two timestamped descriptions without intermediate frame detail - Cannot confirm exact color or font rendering inside the crop beyond general tokens supplied ## 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: editorial - Source type: editorial - Structure: centered single-column - Layout: Centered typography with absolutely positioned media elements scaling and translating on scroll. - Styles: minimal, photographic, typographic - Components: large headline, video thumbnails, grid background - Purpose: A dynamic scrolling section where a grid of video polaroids emerges from the center and expands outwards over a large typographic headline. - Visual signature: Scattered videos forming a grid over the text 'The best version of retail is autonomous'. - Place on the page: 4 of 12, after Logo strip (`sensei-tech:intro_logos`), before Feature collection (`sensei-tech:sticky_features_tabs`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side 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": [], "siteRoles": [ { "role": "display", "size": "88px", "family": "neue-haas-grotesk-display", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: 88px size used for massive typographic statements.", "sampleId": "font-8", "confidence": 0.9, "lineHeight": "88px", "letterSpacing": "normal" }, { "role": "heading", "size": "52px", "family": "neue-haas-grotesk-display", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: 52px Neue Haas Grotesk used for primary section headings.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "52px", "letterSpacing": "normal" }, { "role": "body", "size": "13.6px", "family": "neue-haas-grotesk-display", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-5: computed CSS at 1440×1000; AI role: 13.6px size used extensively (count 95) for standard text and descriptions.", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "16.3px", "letterSpacing": "0.3px" } ] } ``` ### Exact color evidence The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate. ```json { "sectionUsage": [], "functionalPalette": [ { "hex": "#F8F7F4", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(248, 247, 244); AI role: #F8F7F4 used as the primary background color for the body and main content areas.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#1D1D1D", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(29, 29, 29); AI role: #1D1D1D used dominantly for typography across the site.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#F8FD8F", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-1: computed rgb(248, 253, 143); AI role: #F8FD8F acid yellow used for primary buttons and footer background.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#A5A99F", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-6: computed rgb(165, 169, 159); AI role: #A5A99F gray used for secondary or unselected text.", "sampleId": "color-6", "confidence": 0.85 }, { "hex": "#ECEBE4", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-8: computed rgb(236, 235, 228); AI role: #ECEBE4 light gray used for subtle backgrounds, like the active tab state.", "sampleId": "color-8", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Pill-shape (likely max radius) for buttons and tab toggles.", "density": "Low overall density, prioritizing focus on large media and bold typography over dense information.", "evidence": "Visual inspection of the 'Let's talk' button, tab components, large image cards, and overall whitespace distribution.", "borderStyle": "Thin, solid 1px borders used sparingly to frame tabs or separate subtle footer rows.", "buttonStyle": "Pill-shaped, solid background with contrasting text and often accompanied by an arrow icon inside a circular container.", "cornerStyle": "Mixed approach: fully rounded (pill) for interactive UI elements, while media blocks maintain sharp or barely rounded corners.", "contentWidth": "Wide maximum width with structured padding, giving a cinematic but organized feel.", "spacingRhythm": "Generous vertical spacing between sections, using wide margins to separate typography from media." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion 1. **entrance** — Video thumbnails emerge from the center and spread outwards to form a grid, accompanied by a background grid pattern. (13s–20s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — Scrolling back up, the video grid collapses back towards the center and disappears. (130s–138s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: medium - What transfers: Layered structure separating background grid, headline text, and absolutely positioned media; Scroll-triggered expand/collapse motion pattern; Centered large-type headline as compositional anchor - Dependencies: Specific photographic assets depicting retail/store environments; Exact scatter positions, rotation, and scale values per image; Precise scroll trigger offsets for expand and collapse - Guidance: Recreate as three independent layers (static grid background, centered headline text, and a set of absolutely positioned image cards) and drive position/scale/opacity via scroll progress; swap photographic content and headline copy while preserving the layer separation and timing pattern. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original editorial section inspired by the design evidence titled “Expanding video grid over typography”. Purpose: A dynamic scrolling section where a grid of video polaroids emerges from the center and expands outwards over a large typographic headline. Structure: centered single-column. Source layout label: Centered typography with absolutely positioned media elements scaling and translating on scroll.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Scattered videos forming a grid over the text 'The best version of retail is autonomous'. Components: large headline, video thumbnails, grid background. Style direction: minimal, photographic, typographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"88px","family":"neue-haas-grotesk-display","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 88px size used for massive typographic statements.","sampleId":"font-8","confidence":0.9,"lineHeight":"88px","letterSpacing":"normal"} {"role":"heading","size":"52px","family":"neue-haas-grotesk-display","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: 52px Neue Haas Grotesk used for primary section headings.","sampleId":"font-3","confidence":0.95,"lineHeight":"52px","letterSpacing":"normal"} {"role":"body","size":"13.6px","family":"neue-haas-grotesk-display","source":"computed","traits":"Regular","weight":"500","evidence":"font-5: computed CSS at 1440×1000; AI role: 13.6px size used extensively (count 95) for standard text and descriptions.","sampleId":"font-5","confidence":0.95,"lineHeight":"16.3px","letterSpacing":"0.3px"} Color evidence: {"hex":"#F8F7F4","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(248, 247, 244); AI role: #F8F7F4 used as the primary background color for the body and main content areas.","sampleId":"color-2","confidence":0.95} {"hex":"#1D1D1D","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(29, 29, 29); AI role: #1D1D1D used dominantly for typography across the site.","sampleId":"color-4","confidence":0.95} {"hex":"#F8FD8F","name":"primary action","role":"primary-action","source":"computed","evidence":"color-1: computed rgb(248, 253, 143); AI role: #F8FD8F acid yellow used for primary buttons and footer background.","sampleId":"color-1","confidence":0.9} {"hex":"#A5A99F","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(165, 169, 159); AI role: #A5A99F gray used for secondary or unselected text.","sampleId":"color-6","confidence":0.85} {"hex":"#ECEBE4","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(236, 235, 228); AI role: #ECEBE4 light gray used for subtle backgrounds, like the active tab state.","sampleId":"color-8","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: entrance: Video thumbnails emerge from the center and spread outwards to form a grid, accompanied by a background grid pattern. (95% confidence) scroll: Scrolling back up, the video grid collapses back towards the center and disappears. (95% confidence) Transfer these principles: Layered structure separating background grid, headline text, and absolutely positioned media; Scroll-triggered expand/collapse motion pattern; Centered large-type headline as compositional anchor. Dependencies: Specific photographic assets depicting retail/store environments; Exact scatter positions, rotation, and scale values per image; Precise scroll trigger offsets for expand and collapse. Adaptation guidance: Recreate as three independent layers (static grid background, centered headline text, and a set of absolutely positioned image cards) and drive position/scale/opacity via scroll progress; swap photographic content and headline copy while preserving the layer separation and timing pattern. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.