# Scroll-triggered Circle Message Schema: Design Details SECTION.md v3.2 Website: Maze Source: https://maze.co/ Source section IDs: gap-abe9518b-1008-2214 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - One oversized lime circle fills the screen with the headline centered inside it, so the eye has a single focal point and the message reads immediately. - Large display type with tight tracking sits over a smaller muted line of supporting copy, giving a clear two-step hierarchy against the near-black text colour. - A restrained palette of off-white canvas, near-black text and one lime accent lets the shape carry the colour while the empty space around it keeps the page calm. What a screenshot can't show: - Between about 2s and 7s, small floating elements compress and expand into the finished circle; a still image shows only the end state. - No measured font sizes, spacing or animation timing curves were captured, so exact scale and easing are unknown. Borrow: Let scattered small elements converge into one bold shape that holds the key message, so the animation itself explains the idea of many things becoming one. Leave alone: Do not copy the lime-and-near-black palette, the halftone circle texture or the Phonic typeface; use a free geometric grotesk and your own brand colour and shape. ## Classification - Type: editorial - Layout: full-screen, centered - Styles: geometric, colourful - Confidence: 95% ## Purpose and structure A highly visual scrolling section where small elements condense into a massive lime green circle containing a core message. Visual signature: A giant, textured lime green circle dominating the screen with centered text. ## Components - animated-shape - large-typography ## Typography - Display: Phonic — 130px 300 - Heading: Phonic — 90px 300 - Body: Phonic — 22px 300 - Mono: Phonic — 14px 400 ## Functional palette - Text: text #1C1C1C - Canvas: canvas #FFFFFF - Surface: surface #F5F4F0 - Muted-Text: muted text #706F6C - Accent: accent #DBF570 - Border: border #EAE6E1 ## Motion evidence - 2.0–7.0s — The main hero graphic, initially composed of small floating elements, compresses and expands into a large, cohesive yellow circle. (95% confidence) ## Section quality Overall: 66.10/100 (Good) Scored coverage: 100% - Typography: 66 — Large Phonic display type with tight negative tracking and a muted smaller subcopy creates clear, confident hierarchy; period placement in 'Every question.' adds a deliberate full-stop rhythm, but it is otherwise a standard centered headline treatment. Next tier: Needs a more distinctive typographic treatment (e.g. variable weight, kinetic letterforms) tied to the shape itself rather than sitting independently on top of it. - Composition: 68 — A single oversized circle dominates a mostly empty canvas with text centered inside it, giving strong focal clarity and generous negative space; the layout is simple but effective at directing attention to one message. Next tier: Composition relies on one centered shape with no secondary compositional tension (asymmetry, layering, scale contrast) to push past a straightforward centered-hero pattern. - Motion: 68 — Gemini reports a specific 2–7s transition where small floating elements compress and expand into the cohesive circle, a concrete formation animation rather than a generic reveal. Next tier: Only one motion beat is evidenced; without visible easing character, scroll-linked staging detail, or a secondary motion phase it cannot be confirmed as more than a single assembly effect. - Content: 60 — Headline and supporting copy are nested inside the shape and reinforce the 'every question, one place' idea, but the shape's halftone texture functions mainly as decorative background rather than deeply integrated with the message. Next tier: Content and shape need tighter conceptual fusion (e.g. the texture itself encoding the message, or copy responding to the circle's formation) rather than copy simply overlaid on a colored field. - Originality: 70 — A halftone/pixelated texture coalescing into a single giant brand-colored circle is a distinctive hero device, less generic than standard image or gradient heroes. Next tier: The core move (particles forming a circle) is a recognizable genre of scroll hero already common in tech marketing; it needs a more singular or unexpected payoff to be truly hard to substitute. - Adaptability: 64 — The deterministic typography and palette tokens (Phonic font sizes, lime accent, near-black text, off-white canvas) clearly separate structure from skin, and the circle/text/copy roles are generically restateable with other colors or shapes. Next tier: No deterministic detail on the texture asset generation or exact animation timing curve is supplied, limiting confidence in how portable the signature halftone effect is. Strengths: - Clear single-focus composition with one dominant shape carrying the message - Distinctive lime halftone texture gives the circle a tactile, non-flat quality - Evidenced particle-to-circle formation motion adds a concrete sense of assembly - Strong size and contrast hierarchy between headline and supporting copy Weaknesses: - Text sits visually on top of the shape rather than being structurally tied to it - Composition is otherwise plain: one centered shape, no secondary visual tension - Only a single motion beat is evidenced, leaving later behavior of the circle unknown - Halftone texture reads as decorative rather than conceptually load-bearing Why it does not reach the next tier: The section earns attention through one strong idea (particles coalescing into a giant circle) but lacks a second layer of sophistication — deeper content/shape fusion, additional motion staging, or a less familiar compositional structure — needed to move from strong into exceptional territory. ## Adaptation guidance - Effort: Medium - Guidance: Keep the structural pattern of a single oversized shape containing centered headline+subcopy and an assembly-style entrance motion; swap in any accent color/shape and replace the halftone texture generation with an equivalent custom pattern, retiming the scroll-linked transition to match the new motion budget. What transfers: - Centered oversized geometric shape as hero focal point - Large display headline with smaller muted subcopy nested inside the shape - Particle-to-form assembly motion concept Dependencies: - Specific halftone/pixel texture asset and its underlying generation logic - Exact scroll-trigger timing and easing for the compression/expansion animation - Brand accent color used to fill the shape ## 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 scoring is based on one timestamped description; later-stage behavior of the circle after formation is unknown - No deterministic data on the texture asset or exact animation easing/timing curves - Judged from a single desktop crop; responsive/mobile behavior not assessed ## 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: full-screen, centered - Styles: geometric, colourful - Components: animated-shape, large-typography - Purpose: A highly visual scrolling section where small elements condense into a massive lime green circle containing a core message. - Visual signature: A giant, textured lime green circle dominating the screen with centered text. - Place on the page: 2 of 12, after Navigation (`46202db4-9898-4545-8529-a36a1cf882f6`), before Feature collection (`maze-co:C05`) ### 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": "130px", "family": "Phonic", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-5: computed CSS at 1440×1000; AI role: 130px 'Phonic' font used for massive, impactful headlines like 'Research at the pace of change'.", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "136.5px", "letterSpacing": "-11.7px" }, { "role": "heading", "size": "90px", "family": "Phonic", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-4: computed CSS at 1440×1000; AI role: 90px 'Phonic' font used for primary section headings.", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "90px", "letterSpacing": "-6.3px" }, { "role": "body", "size": "22px", "family": "Phonic", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-9: computed CSS at 1440×1000; AI role: 22px 'Phonic' font used for standard paragraph text, providing high readability.", "sampleId": "font-9", "confidence": 0.85, "lineHeight": "30.8px", "letterSpacing": "-0.7px" }, { "role": "mono", "size": "14px", "family": "Phonic", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: Uppercase 14px 'Phonic' font used for navigation labels and small caps headers.", "sampleId": "font-10", "confidence": 0.7, "lineHeight": "14.7px", "letterSpacing": "0.4px" } ] } ``` ### 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": "#1C1C1C", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(28, 28, 28); AI role: Near black (#1C1C1C) used for primary text, ensuring strong contrast against light backgrounds.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed oklch(1 0 0); AI role: Pure white (#FFFFFF) used extensively for backgrounds, particularly in cards and main content areas.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#F5F4F0", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed oklch(0.967 0.005 95.1); AI role: Off-white/light gray (#F5F4F0) used for alternating section backgrounds and subtle contrast.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#706F6C", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-6: computed oklch(0.542 0.005 91.5); AI role: Medium gray (#706F6C) used for secondary text, descriptions, and less critical information.", "sampleId": "color-6", "confidence": 0.85 }, { "hex": "#DBF570", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-10: computed oklch(0.925 0.161 118.9); AI role: Bright lime green (#DBF570) used for vibrant highlights, interactive graphic elements, and badges.", "sampleId": "color-10", "confidence": 0.85 }, { "hex": "#EAE6E1", "name": "border", "role": "border", "source": "computed", "evidence": "color-8: computed oklch(0.927 0.008 73.7); AI role: Light gray (#EAE6E1) used for borders, dividers, and subtle lines separating elements.", "sampleId": "color-8", "confidence": 0.75 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear to use pill-shaped (fully rounded) radii, while cards use softer, medium rounded corners.", "density": "Low density overall. Ample whitespace is prioritized over packing information tightly, enhancing readability and focus.", "evidence": "Observations based on visual relationships, alignment, padding within visible cards, button shapes, and overall layout structure shown in the desktop crops.", "borderStyle": "Subtle, solid borders (1px) used on outline buttons, specific cards, and to separate header/footer areas. High-contrast elements often rely on background color rather than borders.", "buttonStyle": "Pill-shaped buttons. Primary buttons are solid dark gray/black with white text. Outline buttons are transparent with dark borders and text.", "cornerStyle": "Consistent use of rounded corners on buttons, floating cards, feature cards, and form inputs.", "contentWidth": "Content is centered with generous side margins, likely constrained to a maximum readable width on larger desktop displays.", "spacingRhythm": "Generous vertical spacing between major sections, creating an airy feel. Tight, consistent padding within cards and tight grouping of related text elements." } ``` ### 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. **interaction** — The main hero graphic, initially composed of small floating elements, compresses and expands into a large, cohesive yellow circle. (2s–7s; 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: Centered oversized geometric shape as hero focal point; Large display headline with smaller muted subcopy nested inside the shape; Particle-to-form assembly motion concept - Dependencies: Specific halftone/pixel texture asset and its underlying generation logic; Exact scroll-trigger timing and easing for the compression/expansion animation; Brand accent color used to fill the shape - Guidance: Keep the structural pattern of a single oversized shape containing centered headline+subcopy and an assembly-style entrance motion; swap in any accent color/shape and replace the halftone texture generation with an equivalent custom pattern, retiming the scroll-linked transition to match the new motion budget. ### 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 “Scroll-triggered Circle Message”. Purpose: A highly visual scrolling section where small elements condense into a massive lime green circle containing a core message. Structure: centered single-column. Source layout label: full-screen, centered. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: A giant, textured lime green circle dominating the screen with centered text. Components: animated-shape, large-typography. Style direction: geometric, colourful. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"130px","family":"Phonic","source":"computed","traits":"Regular","weight":"300","evidence":"font-5: computed CSS at 1440×1000; AI role: 130px 'Phonic' font used for massive, impactful headlines like 'Research at the pace of change'.","sampleId":"font-5","confidence":0.95,"lineHeight":"136.5px","letterSpacing":"-11.7px"} {"role":"heading","size":"90px","family":"Phonic","source":"computed","traits":"Regular","weight":"300","evidence":"font-4: computed CSS at 1440×1000; AI role: 90px 'Phonic' font used for primary section headings.","sampleId":"font-4","confidence":0.9,"lineHeight":"90px","letterSpacing":"-6.3px"} {"role":"body","size":"22px","family":"Phonic","source":"computed","traits":"Regular","weight":"300","evidence":"font-9: computed CSS at 1440×1000; AI role: 22px 'Phonic' font used for standard paragraph text, providing high readability.","sampleId":"font-9","confidence":0.85,"lineHeight":"30.8px","letterSpacing":"-0.7px"} {"role":"mono","size":"14px","family":"Phonic","source":"computed","traits":"uppercase","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: Uppercase 14px 'Phonic' font used for navigation labels and small caps headers.","sampleId":"font-10","confidence":0.7,"lineHeight":"14.7px","letterSpacing":"0.4px"} Color evidence: {"hex":"#1C1C1C","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(28, 28, 28); AI role: Near black (#1C1C1C) used for primary text, ensuring strong contrast against light backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed oklch(1 0 0); AI role: Pure white (#FFFFFF) used extensively for backgrounds, particularly in cards and main content areas.","sampleId":"color-1","confidence":0.9} {"hex":"#F5F4F0","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed oklch(0.967 0.005 95.1); AI role: Off-white/light gray (#F5F4F0) used for alternating section backgrounds and subtle contrast.","sampleId":"color-2","confidence":0.85} {"hex":"#706F6C","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed oklch(0.542 0.005 91.5); AI role: Medium gray (#706F6C) used for secondary text, descriptions, and less critical information.","sampleId":"color-6","confidence":0.85} {"hex":"#DBF570","name":"accent","role":"accent","source":"computed","evidence":"color-10: computed oklch(0.925 0.161 118.9); AI role: Bright lime green (#DBF570) used for vibrant highlights, interactive graphic elements, and badges.","sampleId":"color-10","confidence":0.85} {"hex":"#EAE6E1","name":"border","role":"border","source":"computed","evidence":"color-8: computed oklch(0.927 0.008 73.7); AI role: Light gray (#EAE6E1) used for borders, dividers, and subtle lines separating elements.","sampleId":"color-8","confidence":0.75} 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: interaction: The main hero graphic, initially composed of small floating elements, compresses and expands into a large, cohesive yellow circle. (95% confidence) Transfer these principles: Centered oversized geometric shape as hero focal point; Large display headline with smaller muted subcopy nested inside the shape; Particle-to-form assembly motion concept. Dependencies: Specific halftone/pixel texture asset and its underlying generation logic; Exact scroll-trigger timing and easing for the compression/expansion animation; Brand accent color used to fill the shape. Adaptation guidance: Keep the structural pattern of a single oversized shape containing centered headline+subcopy and an assembly-style entrance motion; swap in any accent color/shape and replace the halftone texture generation with an equivalent custom pattern, retiming the scroll-linked transition to match the new motion budget. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.