# Scroll-triggered horizontal image comparison Schema: Design Details SECTION.md v3.2 Website: Vero Source: https://verostudio.com/ Source section IDs: gap-9289aee7-3800-8240 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The staggered image-and-text opening gives way to a sticky full-screen wipe, so the layout shift itself builds anticipation for the comparison. - Three states of one object (photographed dress, grey 3D render, physical sculpture) make the wipe carry the message rather than decorate it. - A warm off-white canvas with near-black text lets the orange photo tones and the cool grey renders contrast sharply, while large serif headlines mixing italic and upright set a confident editorial voice. What a screenshot can't show: - The wipe is scroll-driven and runs roughly 19–26 seconds in the recording, moving horizontally from photograph to 3D model to sculpture. - Font sizes, letter spacing and section padding were not measured, so exact type scale and spacing are unknown. Borrow: Pin one image in a sticky container and let scroll progress wipe it through different states of the same subject, so the transition explains the idea. Leave alone: Don't copy the dress-to-sculpture imagery, the orange photographic grade, or the Louize Display serif; a free high-contrast display serif in a similar style would work instead. ## Classification - Type: editorial - Layout: Starts with staggered images and text, locking into a sticky full-screen horizontal wipe transition. - Styles: editorial, photographic, bold - Confidence: 95% ## Purpose and structure An editorial sequence that transitions from a standard layout into a full-width horizontal wipe comparing a photograph to a 3D model and sculpture. Visual signature: Warm orange photographic tones transitioning through a horizontal wipe to monochromatic 3D renders. ## Components - image sequence - typography - sticky container ## Typography - Display: Louize Display — 168px 400 - Heading: Louize Display — 120px 400 - Body: Louize Display — 18px 400 - Mono: Louize Display — 15px 400 ## Functional palette - Text: text #181615 - Canvas: canvas #F3F0ED - Surface: surface #FFFFFF ## Motion evidence - 19.0–26.0s — Scrolling triggers a horizontal wipe effect across a central image, transitioning the visual from a photograph of a woman in a dress to a grey 3D digital model, and finally to a physical sculpture. (98% confidence) ## Section quality Overall: 67.95/100 (Good) Scored coverage: 100% - Typography: 68 — Louize Display mixed italic/upright serif pairing creates elegant editorial voice; large scale headlines with warm, confident hierarchy. Strong but a single typeface family with limited weight range caps distinctiveness. Next tier: Would need more deliberate contrast (weight, scale, or secondary face) to feel like a bespoke type system rather than one display face used everywhere. - Composition: 73 — Staggered image-over-text opening resolves into a deliberate full-bleed horizontal wipe that locks the eye on the dress-to-sculpture conceptual axis; strong use of asymmetry, overlap, and a clear narrative progression across the crop. Next tier: Layered text overlap in the transitional moments reads slightly uncontrolled rather than intentional; tighter registration between text and image planes needed for top-tier polish. - Motion: 66 — Gemini confirms a specific scroll-triggered horizontal wipe (19–26s) moving between photograph, 3D model, and sculpture — a clear, purposeful, non-generic effect tied to the section's concept. Next tier: Single wipe gesture without variation in easing, layering, or secondary motion keeps it from feeling exceptional rather than merely well-executed. - Content: 70 — The dress/data/sculpture concept is tightly embedded in the visual mechanism itself rather than decorative imagery; content and motion are inseparable from the message. Next tier: Supporting copy ('From dress, to data, to sculpture') is literal and could be more conceptually layered or ambiguous to reward closer reading. - Originality: 69 — Horizontal wipe comparisons exist elsewhere, but pairing photographic garment, grey 3D render, and physical sculpture as three states of the same object is a distinct conceptual device uncommon in this genre. Next tier: The mechanic (wipe/compare) itself is a known pattern; origination lies mainly in the subject pairing, not the interaction design. - Adaptability: 60 — Structure (sticky wipe over staggered triptych) is identifiable and separable from the specific photographic/3D assets, but the effect depends heavily on having three visually distinct states of the same subject. Next tier: Lacking token-level specs (wipe trigger thresholds, easing, exact crop ratios) prevents confident extraction as a reusable pattern beyond the concept. Strengths: - Clear three-stage conceptual narrative (dress → data → sculpture) embedded directly in the visual mechanism - Confident large-type editorial hierarchy using Louize Display italic/upright pairing - Full-bleed horizontal wipe transition tied meaningfully to content rather than decorative - Warm photographic tones contrasted against monochrome 3D render create a satisfying tonal shift Weaknesses: - Overlapping text/image during transitional states reads as visual noise rather than intentional layering - Single typeface limits typographic contrast - The wipe/compare interaction pattern itself is not novel, even if the subject pairing is Why it does not reach the next tier: The section earns strong marks for concept and execution of a meaningful scroll-based image comparison, but the pattern's interaction mechanic is a known device, the typography lacks range, and transitional moments show some registration sloppiness that keeps it from exceptional/wow territory. ## Adaptation guidance - Effort: Medium - Guidance: Recreate the sticky wipe mechanism with scroll-linked clip-path or transform reveal, then supply new state-pairs of images (e.g., product in two rendering styles) to a container with the same aspect ratio and overlay text treatment. What transfers: - Sticky full-screen scroll-triggered wipe structure - Staggered image+text opening layout preceding the lock - Three-stage conceptual progression pattern (concept A → process → concept B) Dependencies: - Three visually distinct states of the same subject (photo, render, sculpture) - Warm-to-monochrome palette shift tied to the transition - Louize Display typeface for headline voice ## 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 relies solely on Gemini's single timestamped observation, with no detail on easing or trigger thresholds - No deterministic spacing, radius, or animation-duration values were supplied, limiting precision on composition and motion scores - Static crop cannot confirm smoothness or exact registration quality of the wipe transition ## 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: full-bleed - Layout: Starts with staggered images and text, locking into a sticky full-screen horizontal wipe transition. - Styles: editorial, photographic, bold - Components: image sequence, typography, sticky container - Purpose: An editorial sequence that transitions from a standard layout into a full-width horizontal wipe comparing a photograph to a 3D model and sculpture. - Visual signature: Warm orange photographic tones transitioning through a horizontal wipe to monochromatic 3D renders. - Place on the page: 4 of 13, after Other (`verostudio-com:C02`), before Other (`669f506d-072b-4890-a23c-a9f80a0a2f87`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays. ### 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": "168px", "family": "Louize Display", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-13: computed CSS at 1440×1000; AI role: Louize Display used at 168px uppercase for massive artistic text statements like 'I HELD A MOMENT'.", "sampleId": "font-13", "confidence": 1, "lineHeight": "168px", "letterSpacing": "normal" }, { "role": "heading", "size": "120px", "family": "Louize Display", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-11: computed CSS at 1440×1000; AI role: Louize Display used at 120px for large section headings like 'INNOVATION'.", "sampleId": "font-11", "confidence": 0.95, "lineHeight": "120px", "letterSpacing": "normal" }, { "role": "body", "size": "18px", "family": "Louize Display", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: Louize Display at 18px used for standard paragraph text detailing the process.", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "27px", "letterSpacing": "0.4px" }, { "role": "mono", "size": "15px", "family": "Louize Display", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: Louize Display at 15px uppercase with wide tracking used for smaller UI labels like 'Menu'.", "sampleId": "font-10", "confidence": 0.8, "lineHeight": "15px", "letterSpacing": "0.9px" } ] } ``` ### 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": "#181615", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(24, 22, 21); AI role: #181615 (near black) used extensively for primary text elements across the light backgrounds.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#F3F0ED", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(243, 240, 237); AI role: #F3F0ED used as the primary background color for most of the site, providing a warm, stone-like neutral canvas.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-6: computed rgb(255, 255, 255); AI role: #FFFFFF used sparingly, possibly for some button backgrounds or image frames.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px or minimal radius throughout the primary UI components.", "density": "Low density; highly breathable layout.", "evidence": "Visual observation of padding around text blocks (e.g., the 'so THAT YOU BECOME ART' section), sharp edges on the gallery images, and full-width carousel stripes.", "borderStyle": "Thin, subtle borders used primarily for structural separation in the footer or form inputs.", "buttonStyle": "Solid, rectangular shapes with uppercase tracked-out text.", "cornerStyle": "Sharp, square corners on buttons and image crops, reinforcing the minimal/editorial feel.", "contentWidth": "Full-bleed imagery mixed with tightly constrained, centered text blocks.", "spacingRhythm": "Generous use of vertical and horizontal whitespace, creating a slow, deliberate scrolling experience." } ``` ### 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** — Scrolling triggers a horizontal wipe effect across a central image, transitioning the visual from a photograph of a woman in a dress to a grey 3D digital model, and finally to a physical sculpture. (19s–26s; 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: Sticky full-screen scroll-triggered wipe structure; Staggered image+text opening layout preceding the lock; Three-stage conceptual progression pattern (concept A → process → concept B) - Dependencies: Three visually distinct states of the same subject (photo, render, sculpture); Warm-to-monochrome palette shift tied to the transition; Louize Display typeface for headline voice - Guidance: Recreate the sticky wipe mechanism with scroll-linked clip-path or transform reveal, then supply new state-pairs of images (e.g., product in two rendering styles) to a container with the same aspect ratio and overlay text treatment. ### 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 horizontal image comparison”. Purpose: An editorial sequence that transitions from a standard layout into a full-width horizontal wipe comparing a photograph to a 3D model and sculpture. Structure: full-bleed. Source layout label: Starts with staggered images and text, locking into a sticky full-screen horizontal wipe transition.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Warm orange photographic tones transitioning through a horizontal wipe to monochromatic 3D renders. Components: image sequence, typography, sticky container. Style direction: editorial, photographic, bold. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"168px","family":"Louize Display","source":"computed","traits":"uppercase","weight":"400","evidence":"font-13: computed CSS at 1440×1000; AI role: Louize Display used at 168px uppercase for massive artistic text statements like 'I HELD A MOMENT'.","sampleId":"font-13","confidence":1,"lineHeight":"168px","letterSpacing":"normal"} {"role":"heading","size":"120px","family":"Louize Display","source":"computed","traits":"uppercase","weight":"400","evidence":"font-11: computed CSS at 1440×1000; AI role: Louize Display used at 120px for large section headings like 'INNOVATION'.","sampleId":"font-11","confidence":0.95,"lineHeight":"120px","letterSpacing":"normal"} {"role":"body","size":"18px","family":"Louize Display","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Louize Display at 18px used for standard paragraph text detailing the process.","sampleId":"font-4","confidence":0.9,"lineHeight":"27px","letterSpacing":"0.4px"} {"role":"mono","size":"15px","family":"Louize Display","source":"computed","traits":"uppercase","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: Louize Display at 15px uppercase with wide tracking used for smaller UI labels like 'Menu'.","sampleId":"font-10","confidence":0.8,"lineHeight":"15px","letterSpacing":"0.9px"} Color evidence: {"hex":"#181615","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(24, 22, 21); AI role: #181615 (near black) used extensively for primary text elements across the light backgrounds.","sampleId":"color-1","confidence":1} {"hex":"#F3F0ED","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(243, 240, 237); AI role: #F3F0ED used as the primary background color for most of the site, providing a warm, stone-like neutral canvas.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(255, 255, 255); AI role: #FFFFFF used sparingly, possibly for some button backgrounds or image frames.","sampleId":"color-6","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: Scrolling triggers a horizontal wipe effect across a central image, transitioning the visual from a photograph of a woman in a dress to a grey 3D digital model, and finally to a physical sculpture. (98% confidence) Transfer these principles: Sticky full-screen scroll-triggered wipe structure; Staggered image+text opening layout preceding the lock; Three-stage conceptual progression pattern (concept A → process → concept B). Dependencies: Three visually distinct states of the same subject (photo, render, sculpture); Warm-to-monochrome palette shift tied to the transition; Louize Display typeface for headline voice. Adaptation guidance: Recreate the sticky wipe mechanism with scroll-linked clip-path or transform reveal, then supply new state-pairs of images (e.g., product in two rendering styles) to a container with the same aspect ratio and overlay text treatment. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.