# Horizontal Feature Carousel Schema: Design Details SECTION.md v3.2 Website: Maticrobots Source: https://maticrobots.com/ Source section IDs: gap-2eabd909-2112-3503 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Uniform, large rounded cards with real in-home footage make the product's use in each room easy to grasp at a glance. - Each card has a short, benefit-led caption in the same spot beneath it, so the row scans cleanly without clutter. - A small uppercase mono eyebrow above a large bold centered heading sets a clear hierarchy, and the soft off-white canvas lets the photography lead. What a screenshot can't show: - Vertical scrolling drives the cards sideways, sliding smoothly right to left from about 11s to 22s of the recording. - No measured font sizes, spacing or easing were captured, so exact values and timing curves are unknown. Borrow: Tie horizontal card travel to vertical scroll so a reader can browse a whole set of features in one natural gesture. Leave alone: Don't copy the home-robot footage, the teal accent with off-white canvas palette, or the exact eyebrow-plus-heading styling; use your own imagery and colours. ## Classification - Type: gallery - Layout: Horizontal scrolling track of uniformly sized cards. - Styles: photographic, minimal - Confidence: 95% ## Purpose and structure A horizontal scrolling gallery of video or image cards demonstrating product features in home environments. Visual signature: A row of large, rounded rectangular cards showing the robot in action across different rooms. ## Components - horizontal carousel - video cards - feature descriptions ## Typography - Display: Mori Gothic — 80px 400 - Heading: Mori Gothic — 64px 600 - Body: Mori Gothic — 16px 400 - Mono: Trim Mono — 16px 500 ## Functional palette - Canvas: canvas #F2F2F0 - Text: text #1F2022 - Surface: surface #FFFFFF - Accent: accent #006759 ## Motion evidence - 11.0–22.0s — Vertical scrolling triggers a horizontal movement, causing a row of video cards to slide smoothly from right to left across the screen. (98% confidence) ## Section quality Overall: 59.70/100 (Competent) Scored coverage: 100% - Typography: 62 — Clean hierarchy: small uppercase mono eyebrow label, large bold display heading, and restrained card captions with smaller body copy beneath. Consistent, legible, well-paired type pairing but not a distinctive typographic treatment beyond what's expected from the system tokens. Next tier: No distinctive typographic device (scale shifts, kinetic type, unusual pairing) beyond standard heading/body/mono roles. - Composition: 64 — Simple, well-balanced horizontal grid of uniform rounded-corner cards with consistent caption placement beneath each. Generous whitespace and clear alignment to a centered heading above. Layout is legible and tidy but is a fairly conventional card-row pattern. Next tier: Lacks compositional surprise—no varied card sizes, overlap, or asymmetry that would elevate it beyond a standard feature-card row. - Motion: 58 — Gemini supplies a specific timestamped behavior (vertical scroll driving horizontal card translation, 11-22s) which is a deliberate, purposeful scroll-jacking technique, but it's a single, common interaction pattern without described easing, staggering, or secondary motion detail. Next tier: No evidence of refined motion choreography (easing curves, staggered reveals, parallax, velocity-based response) beyond the basic horizontal slide. - Content: 60 — Each card pairs a real in-home video/image with a short benefit-driven caption, directly tied to product use-cases; captions are concise and well-matched to imagery, supporting comprehension without clutter. Next tier: Content integration is functional but formulaic (thumbnail + title + one-line description) without deeper narrative or data visualization layered into the cards. - Originality: 52 — Horizontal scroll-triggered card carousels for feature showcases are a widely used pattern in product marketing sites; nothing here (rounded cards, play icon, caption underneath) is distinctive to this brand. Next tier: No unique structural or interactive idea distinguishing this from generic horizontal feature carousels seen across many sites. - Adaptability: 60 — Clear separable structure: fixed card dimensions/radius, caption typography, and scroll-driven horizontal translation are independent of the specific home-robot photography, so the skin (photos/copy) could be swapped while retaining the card/motion mechanism. Next tier: Dependence on specific video content lengths and aspect ratios for a consistent card rhythm limits trivial reuse without reflowing card counts/widths. Strengths: - Clear visual hierarchy from eyebrow label to heading to card captions - Consistent card sizing and rounded-corner treatment creates a tidy, scannable row - Scroll-triggered horizontal translation adds a purposeful interactive layer over a static gallery Weaknesses: - Pattern is a common horizontal card carousel with no distinguishing structural twist - Motion is a single, well-known scroll-jack technique without described refinement - Captions and imagery follow a formulaic thumbnail+title+description structure Why it does not reach the next tier: The section executes a clean, legible carousel with purposeful scroll-driven motion, but every element—from typography pairing to card layout to the interaction pattern—is a well-worn convention in product marketing sites, lacking any original structural or motion idea that would make it feel hard to substitute. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the card grid and typographic hierarchy directly; the scroll-to-horizontal translation requires reimplementing the scroll listener logic and must be tuned to the number/width of cards and viewport. What transfers: - Horizontal card row with uniform rounded media containers and caption-below pattern - Scroll-driven horizontal translation triggered by vertical scroll - Eyebrow label + heading + caption typographic hierarchy Dependencies: - Requires video/image assets sized to a consistent card aspect ratio - Needs scroll-jacking or horizontal-scroll-hijack JS behavior tied to vertical scroll position ## 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 score relies solely on a single Gemini-observed timestamp without detail on easing or staggering - No deterministic spacing/sizing values were supplied for the cards themselves, limiting composition precision - Full card content beyond the first two and a half visible is unclear from the crop ## 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: horizontal sequence - Layout: Horizontal scrolling track of uniformly sized cards. - Styles: photographic, minimal - Components: horizontal carousel, video cards, feature descriptions - Purpose: A horizontal scrolling gallery of video or image cards demonstrating product features in home environments. - Visual signature: A row of large, rounded rectangular cards showing the robot in action across different rooms. - Place on the page: 4 of 11, after Feature collection (`maticrobots-com:C06`), before Testimonials (`maticrobots-com:C02`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control. ### 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": "80px", "family": "Mori Gothic", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: 80px Mori Gothic, visually the largest text though hidden from view in the crops.", "sampleId": "font-5", "confidence": 0.8, "lineHeight": "96px", "letterSpacing": "-1.2px" }, { "role": "heading", "size": "64px", "family": "Mori Gothic", "source": "computed", "traits": "Regular", "weight": "600", "evidence": "font-13: computed CSS at 1440×1000; AI role: 64px Mori Gothic used for prominent section headers like 'Hey Matic'.", "sampleId": "font-13", "confidence": 0.9, "lineHeight": "70px", "letterSpacing": "-3.2px" }, { "role": "body", "size": "16px", "family": "Mori Gothic", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: 16px Mori Gothic used extensively for body copy and general text.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "22px", "letterSpacing": "normal" }, { "role": "mono", "size": "16px", "family": "Trim Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: Trim Mono used for labels, small headers, and technical details.", "sampleId": "font-8", "confidence": 0.95, "lineHeight": "22px", "letterSpacing": "-0.5px" } ] } ``` ### 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": "#F2F2F0", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(242, 242, 240); AI role: Light gray (#F2F2F0) used as the primary background color across most of the page.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#1F2022", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(31, 32, 34); AI role: Dark gray (#1F2022) used for primary text and headings.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for cards, speech bubbles, and buttons.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#006759", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-4: computed rgb(0, 103, 89); AI role: Deep green (#006759) defining the large footer area.", "sampleId": "color-4", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Large radii (pill-shaped) for buttons and speech bubbles, and softer, more standard radii for imagery cards.", "density": "Low density. The layout prioritizes large visual elements and ample whitespace over dense text.", "evidence": "Visual inspection of the provided desktop crops confirms the layout structure, spacing, and component styling.", "borderStyle": "Mostly borderless design, relying on subtle background color shifts or distinct imagery for separation; occasional fine lines for structure.", "buttonStyle": "Solid fill (often dark gray/black) with large rounded corners, or translucent white overlays on media.", "cornerStyle": "Predominantly rounded, applied heavily to images, video frames, buttons, and decorative elements like the speech bubble.", "contentWidth": "Content is generally constrained to a central column, though some imagery and the horizontal carousel stretch closer to the edges.", "spacingRhythm": "Generous spacing, with large gaps between distinct sections and within components to maintain a clean, airy feel." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion 1. **scroll** — Vertical scrolling triggers a horizontal movement, causing a row of video cards to slide smoothly from right to left across the screen. (11s–22s; 98% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: medium - What transfers: Horizontal card row with uniform rounded media containers and caption-below pattern; Scroll-driven horizontal translation triggered by vertical scroll; Eyebrow label + heading + caption typographic hierarchy - Dependencies: Requires video/image assets sized to a consistent card aspect ratio; Needs scroll-jacking or horizontal-scroll-hijack JS behavior tied to vertical scroll position - Guidance: Reuse the card grid and typographic hierarchy directly; the scroll-to-horizontal translation requires reimplementing the scroll listener logic and must be tuned to the number/width of cards and viewport. ### 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 gallery section inspired by the design evidence titled “Horizontal Feature Carousel”. Purpose: A horizontal scrolling gallery of video or image cards demonstrating product features in home environments. Structure: horizontal sequence. Source layout label: Horizontal scrolling track of uniformly sized cards.. Preserve the sense of continuation with a visible next item, progress cue, or directional control. Visual signature to preserve at the pattern level: A row of large, rounded rectangular cards showing the robot in action across different rooms. Components: horizontal carousel, video cards, feature descriptions. Style direction: photographic, minimal. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"80px","family":"Mori Gothic","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 80px Mori Gothic, visually the largest text though hidden from view in the crops.","sampleId":"font-5","confidence":0.8,"lineHeight":"96px","letterSpacing":"-1.2px"} {"role":"heading","size":"64px","family":"Mori Gothic","source":"computed","traits":"Regular","weight":"600","evidence":"font-13: computed CSS at 1440×1000; AI role: 64px Mori Gothic used for prominent section headers like 'Hey Matic'.","sampleId":"font-13","confidence":0.9,"lineHeight":"70px","letterSpacing":"-3.2px"} {"role":"body","size":"16px","family":"Mori Gothic","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: 16px Mori Gothic used extensively for body copy and general text.","sampleId":"font-1","confidence":0.95,"lineHeight":"22px","letterSpacing":"normal"} {"role":"mono","size":"16px","family":"Trim Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: Trim Mono used for labels, small headers, and technical details.","sampleId":"font-8","confidence":0.95,"lineHeight":"22px","letterSpacing":"-0.5px"} Color evidence: {"hex":"#F2F2F0","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(242, 242, 240); AI role: Light gray (#F2F2F0) used as the primary background color across most of the page.","sampleId":"color-2","confidence":0.95} {"hex":"#1F2022","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(31, 32, 34); AI role: Dark gray (#1F2022) used for primary text and headings.","sampleId":"color-3","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for cards, speech bubbles, and buttons.","sampleId":"color-1","confidence":0.9} {"hex":"#006759","name":"accent","role":"accent","source":"computed","evidence":"color-4: computed rgb(0, 103, 89); AI role: Deep green (#006759) defining the large footer area.","sampleId":"color-4","confidence":0.9} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: scroll: Vertical scrolling triggers a horizontal movement, causing a row of video cards to slide smoothly from right to left across the screen. (98% confidence) Transfer these principles: Horizontal card row with uniform rounded media containers and caption-below pattern; Scroll-driven horizontal translation triggered by vertical scroll; Eyebrow label + heading + caption typographic hierarchy. Dependencies: Requires video/image assets sized to a consistent card aspect ratio; Needs scroll-jacking or horizontal-scroll-hijack JS behavior tied to vertical scroll position. Adaptation guidance: Reuse the card grid and typographic hierarchy directly; the scroll-to-horizontal translation requires reimplementing the scroll listener logic and must be tuned to the number/width of cards and viewport. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.