# Expanding Scatter Gallery Schema: Design Details SECTION.md v3.2 Website: 21Oaks Source: https://21oaks.org/ Source section IDs: gap-83413c5f-1005-5386 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A large serif headline sits in the middle of a clean white canvas, and small square photos radiate around it in a balanced left-right scatter, so the eye lands on the message first. - The photos stay small and uniform with rounded corners, which keeps the space airy and lets many property and amenity shots appear without crowding the text. - A hand-drawn underline under one word adds a human touch, and the soft neutral palette keeps the photos as the only colour. What a screenshot can't show: - On scroll down, a small central image expands into a scattered set of images that move outward in different directions, and scrolling up reverses it back to one image. The recording shows this but gives no precise duration or easing. - No font sizes, spacing values or letter spacing were measured. Borrow: Tie a cluster of images to scroll position so they open outward from one point around a central statement, and make the motion reverse when the user scrolls back. Leave alone: Don't copy the Exposure serif, the hand-drawn underline on 'should', the lilac and pale green accents, or the property photos; use a free editorial serif style and your own imagery and accent. ## Classification - Type: gallery - Layout: A scattered arrangement of small square images that animate on scroll across a solid light background. - Styles: playful, photographic, minimal - Confidence: 95% ## Purpose and structure A collection of small photos that scatter and expand outward from the center as the user scrolls. Visual signature: Small images of properties scattering around the text 'Everything student living should be'. ## Components - Headline - Image Thumbnails ## Typography - Display: Exposure — 66.2px 400 - Heading: Exposure — 18px 400 - Body: Exposure — 13px 400 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #292929 - Primary-Action: primary action #E8CEFF - Surface: surface #121214 - Accent: accent #DAEBC8 ## Motion evidence - 6.0–15.0s — As the user scrolls down, a small central image expands into a grid of images moving outwards in different directions. (95% confidence) - 113.0–121.0s — As the user scrolls up, the images reappear and converge back into a single small image in the center. (94% confidence) ## Section quality Overall: 60.35/100 (Good) Scored coverage: 100% - Typography: 58 — Headline uses the site's serif display font (Exposure) at large size with a hand-drawn underline accent under 'should'; competent editorial pairing but minimal hierarchy work happens within this crop beyond a single headline treatment. Next tier: No secondary text, caption, or supporting copy is shown to demonstrate typographic range or interplay with the scattering images. - Composition: 66 — Symmetrical radial scatter of small square photos around a central headline, with converging/diverging pairs balanced left-right across a generous white canvas; clear structural idea and restraint in image sizing creates an airy, intentional arrangement. Next tier: The symmetry is somewhat mechanical (mirrored pairs) and the empty vertical stretches between clusters feel like scroll-driven keyframes rather than a composed single frame, limiting felt sophistication. - Motion: 62 — Gemini confirms a specific scroll-driven behavior: a central image expands into a scattered grid moving outward (6-15s) and reverses on scroll-up (113-121s), giving the gallery a clear kinetic identity tied to scroll position. Next tier: Lacks detail on easing, stagger, or per-image rotation/parallax that would distinguish it from a generic scatter-on-scroll effect; no evidence of secondary motion nuance. - Content: 56 — Photos are generic stock-style property/amenity shots (pools, bedrooms, aerials) that illustrate 'student living' but don't individually carry distinct narrative weight; the headline provides thematic framing. Next tier: Images are interchangeable real-estate stock photography; no distinct content hierarchy, captions, or variation in image treatment to elevate specific content. - Originality: 64 — The central-expand/scatter-on-scroll device is a recognizable but not ubiquitous pattern; combined with the hand-underline headline accent it reads as a deliberate signature moment rather than a generic grid reveal. Next tier: The core scatter-grid mechanic is a known scroll-animation trope; without unique per-image behavior (rotation, scale variance, depth) it stays in familiar territory rather than feeling singular. - Adaptability: 55 — Structure (central headline + radiating image grid) and skin (photography, color) are clearly separable; the deterministic tokens confirm consistent corner-radius and spacing patterns reusable elsewhere. Next tier: No clear breakpoint/responsive behavior evidence for how the wide scatter collapses on narrower viewports, which is essential to assess true adaptability. Strengths: - Clear scroll-driven expand/converge motion concept tying scroll direction to a legible visual metaphor - Balanced, symmetrical radial layout around a central headline with generous whitespace - Headline typography uses the site's distinctive serif with a playful hand-drawn underline accent Weaknesses: - Photography is generic real-estate stock imagery with no individual distinction - Mirrored symmetry can feel mechanical rather than organic - No secondary copy or caption shown to build typographic hierarchy within the section - No evidence of how the wide scatter adapts to narrower viewports Why it does not reach the next tier: The section demonstrates a legible scroll-driven concept and clean composition but relies on generic stock photography and a single symmetric scatter pattern without finer motion nuance (stagger, rotation, depth) or supporting typographic layers that would push it into memorable/strong territory. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the scroll-to-scatter/converge interaction and radial grid logic with any square image set; swap photography and headline copy; verify responsive collapse behavior for narrow viewports since the wide-spread arrangement needs a defined mobile fallback. What transfers: - Central headline with radiating scroll-triggered image scatter mechanic - Radial symmetric layout logic - Hand-drawn underline accent as a typographic motif Dependencies: - Scroll-position-driven animation library/logic - Square-cropped photography assets of sufficient quantity and quality - Underline/accent illustration asset ## 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 scored from only two timestamped descriptions without easing/stagger detail - No visible secondary typography or captions to assess full typographic range - No responsive/mobile evidence for adaptability claims ## 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: A scattered arrangement of small square images that animate on scroll across a solid light background. - Layout: A scattered arrangement of small square images that animate on scroll across a solid light background. - Styles: playful, photographic, minimal - Components: Headline, Image Thumbnails - Purpose: A collection of small photos that scatter and expand outward from the center as the user scrolls. - Visual signature: Small images of properties scattering around the text 'Everything student living should be'. - Place on the page: 3 of 13, after Hero (`21oaks-org:hero_photographic_interior`), before Gallery (`21oaks-org:gallery_editorial_offset`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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": "66.2px", "family": "Exposure", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Large serif font (Exposure) used for prominent headlines like 'Made for everyday living' and 'Where student life feels balanced' at sizes 66px-93px.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "66.2px", "letterSpacing": "-1.3px" }, { "role": "heading", "size": "18px", "family": "Exposure", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-9: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 18px for smaller structural headings or navigation items like 'Apartments', 'Amenities'.", "sampleId": "font-9", "confidence": 0.8, "lineHeight": "21.6px", "letterSpacing": "normal" }, { "role": "body", "size": "13px", "family": "Exposure", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-8: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 13px for general paragraph text, such as the lease application details.", "sampleId": "font-8", "confidence": 0.85, "lineHeight": "18.1px", "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": [], "functionalPalette": [ { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: White background used for major sections of the page.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#292929", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(41, 41, 41); AI role: Dark grey (#292929) used extensively for typography across light backgrounds.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#E8CEFF", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-5: computed rgb(232, 206, 255); AI role: Light purple (#E8CEFF) used for primary buttons ('Schedule a Tour', 'Apply Now') and interactive elements.", "sampleId": "color-5", "confidence": 0.9 }, { "hex": "#121214", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(18, 18, 20); AI role: Very dark grey/black (#121214) used as the background color for the large footer section.", "sampleId": "color-3", "confidence": 0.85 }, { "hex": "#DAEBC8", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-12: computed rgb(218, 235, 200); AI role: Light green (#DAEBC8) used as an accent color for 'Available' badges on product cards.", "sampleId": "color-12", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Small to medium border-radius used on buttons, badges, and card components to soften the UI.", "density": "Low to medium density. The design embraces negative space to let the typography and photography breathe, rather than packing information tightly.", "evidence": "Observation of layout structure in full-page screenshots, button shapes in the navigation and product cards, and spacing around typographic elements.", "borderStyle": "Subtle, semi-transparent dark borders (color-13) used on elements like FAQ accordions, while most cards rely on subtle shadows or background contrast rather than harsh solid borders.", "buttonStyle": "Solid fill pastel buttons with rounded corners and dark text, often featuring a subtle icon or arrow. Hover states likely involve slight opacity or scale changes based on standard patterns.", "cornerStyle": "Consistent use of soft, rounded corners on buttons, product cards, image frames, and floating UI elements, contrasting with the sharp serif typography.", "contentWidth": "A mix of full-bleed sections (like the hero and background color transitions) and constrained content areas (like the text layouts and card grids) to guide the eye.", "spacingRhythm": "Generous use of vertical and horizontal whitespace, especially between large heading sections and floating image galleries, creating an airy, editorial feel. Padding within components like product cards is structured and balanced." } ``` ### 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** — As the user scrolls down, a small central image expands into a grid of images moving outwards in different directions. (6s–15s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — As the user scrolls up, the images reappear and converge back into a single small image in the center. (113s–121s; 94% 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: Central headline with radiating scroll-triggered image scatter mechanic; Radial symmetric layout logic; Hand-drawn underline accent as a typographic motif - Dependencies: Scroll-position-driven animation library/logic; Square-cropped photography assets of sufficient quantity and quality; Underline/accent illustration asset - Guidance: Reuse the scroll-to-scatter/converge interaction and radial grid logic with any square image set; swap photography and headline copy; verify responsive collapse behavior for narrow viewports since the wide-spread arrangement needs a defined mobile fallback. ### 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 “Expanding Scatter Gallery”. Purpose: A collection of small photos that scatter and expand outward from the center as the user scrolls. Structure: A scattered arrangement of small square images that animate on scroll across a solid light background.. Source layout label: A scattered arrangement of small square images that animate on scroll across a solid light background.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Small images of properties scattering around the text 'Everything student living should be'. Components: Headline, Image Thumbnails. Style direction: playful, photographic, minimal. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"66.2px","family":"Exposure","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Large serif font (Exposure) used for prominent headlines like 'Made for everyday living' and 'Where student life feels balanced' at sizes 66px-93px.","sampleId":"font-1","confidence":0.95,"lineHeight":"66.2px","letterSpacing":"-1.3px"} {"role":"heading","size":"18px","family":"Exposure","source":"computed","traits":"Regular","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 18px for smaller structural headings or navigation items like 'Apartments', 'Amenities'.","sampleId":"font-9","confidence":0.8,"lineHeight":"21.6px","letterSpacing":"normal"} {"role":"body","size":"13px","family":"Exposure","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: Serif font (Exposure) used at 13px for general paragraph text, such as the lease application details.","sampleId":"font-8","confidence":0.85,"lineHeight":"18.1px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White background used for major sections of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#292929","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(41, 41, 41); AI role: Dark grey (#292929) used extensively for typography across light backgrounds.","sampleId":"color-2","confidence":0.9} {"hex":"#E8CEFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(232, 206, 255); AI role: Light purple (#E8CEFF) used for primary buttons ('Schedule a Tour', 'Apply Now') and interactive elements.","sampleId":"color-5","confidence":0.9} {"hex":"#121214","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(18, 18, 20); AI role: Very dark grey/black (#121214) used as the background color for the large footer section.","sampleId":"color-3","confidence":0.85} {"hex":"#DAEBC8","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(218, 235, 200); AI role: Light green (#DAEBC8) used as an accent color for 'Available' badges on product cards.","sampleId":"color-12","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: scroll: As the user scrolls down, a small central image expands into a grid of images moving outwards in different directions. (95% confidence) scroll: As the user scrolls up, the images reappear and converge back into a single small image in the center. (94% confidence) Transfer these principles: Central headline with radiating scroll-triggered image scatter mechanic; Radial symmetric layout logic; Hand-drawn underline accent as a typographic motif. Dependencies: Scroll-position-driven animation library/logic; Square-cropped photography assets of sufficient quantity and quality; Underline/accent illustration asset. Adaptation guidance: Reuse the scroll-to-scatter/converge interaction and radial grid logic with any square image set; swap photography and headline copy; verify responsive collapse behavior for narrow viewports since the wide-spread arrangement needs a defined mobile fallback. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.