# Parallax Project Showcase and Logo Cloud Schema: Design Details SECTION.md v3.2 Website: Thirdway Source: https://www.thirdway.com/ Source section IDs: gap-181a949e-2904-7590 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Full-bleed interior photography fills each card, with a left-aligned oversized project title and a right-aligned quote, so every project reads the same way. - Small counters like 01/04 and tiny metadata labels sit beside large tight-tracked display names, giving a clear hierarchy. - The closing split layout, with text on the left and a plain logo grid on the right, calms the pace after the image cards and adds social proof. What a screenshot can't show: - Project images scale up and shift vertically as you scroll, over about 9 seconds (11-20s), while the text appears. - The logo grid slides left as the page scrolls vertically, for about 2 seconds (20-22s). Measured type sizes and spacing weren't captured. Borrow: Repeat one card structure (photo, counter, title, tags, quote) so scrolling feels like a rhythm, then end on a quieter grid. Leave alone: Don't copy the Waldenburg display face (use a tight grotesque instead), the cream and olive-black palette, or the dotted grid panels over photos that hurt legibility. ## Classification - Type: gallery - Layout: Stacked full-width image cards followed by a split layout with text on the left and a logo grid on the right. - Styles: photographic, bold, minimal - Confidence: 90% ## Purpose and structure A sequence of full-screen project feature cards with text overlays, followed by a grid of client logos. Visual signature: Immersive full-screen interior photography with typography overlays, transitioning into a clean client logo grid. ## Components - full-width-image - text-overlay - testimonial-quote - logo-grid ## Typography - Display: waldenburg — 120px 500 - Heading: waldenburg — 72px 500 - Body: waldenburg — 20px 500 ## Functional palette - Canvas: canvas #F7F1E9 - Text: text #20221A - Surface: surface #FFFFFF - Muted-Text: muted text #666763 ## Motion evidence - 11.0–20.0s — Full-screen project images scale up and translate vertically on scroll, creating a strong parallax effect while text descriptions appear. (95% confidence) - 20.0–22.0s — A grid of company logos scrolls horizontally to the left as the user scrolls vertically past the section. (90% confidence) ## Section quality Overall: 61.85/100 (Good) Scored coverage: 100% - Typography: 68 — Large waldenburg display type with tight negative letter-spacing creates confident hierarchy against photography; counter numbers (01/04) and metadata labels are well-scaled secondary text. Pairing of oversized project names with small caps metadata is handled cleanly, but the overlay contrast on busy photo backgrounds (e.g., 'John Laing' over interior shelving) is weak and testimonial type is dense/small relative to the scale elsewhere. Next tier: Overlay-to-image contrast is inconsistent and testimonial block typography doesn't match the ambition of the display type, capping it below strong/memorable. - Composition: 65 — Full-bleed photography with left-aligned title block and right-aligned quote creates a clear editorial rhythm repeated across cards, and the final split layout (text left, logo grid right) offers a good structural contrast to the stacked cards. However the repeated grid overlay on card 3/4 photographs (the dotted panel backgrounds) fights with the text legibility, and the logo grid itself is a plain evenly-spaced grid with no distinguishing composition. Next tier: Logo grid is generic and cards show legibility conflicts between text and underlying photography; composition doesn't earn 'strong' without resolving contrast and adding a more considered grid treatment. - Motion: 58 — Gemini reports scale/translate parallax on project images (11-20s) and horizontal scroll on the logo grid (20-22s), both plausible and specific. This is a familiar parallax-card technique rather than a distinctive motion idea, landing it at competent/polished rather than higher. Next tier: Parallax scale/translate and horizontal logo scroll are standard patterns; no unique timing, staging, or interaction nuance described to push past polished. - Content: 62 — Content is well-integrated: project metadata, quotes, and category tags sit logically next to each photo, and the logo wall extends into a clear 'in good company' statement. But the content itself (testimonial text, categories) repeats near-verbatim across different projects (John Laing appears twice with identical quote), undermining the sense of considered content integration. Next tier: Duplicate/near-duplicate testimonial content across different client cards suggests the section isn't fully resolved as unique content, blocking a higher score. - Originality: 55 — The pattern of full-screen interior photo + overlay title + testimonial quote, followed by a logo grid, is a well-established agency/portfolio convention. Nothing here (scale, typography treatment, counter numbering) feels like a distinctive invention beyond tasteful execution of a known template. Next tier: No unexpected structural or visual device beyond familiar full-bleed-image-with-overlay-text convention; needs a unique mechanism to move into strong originality. - Adaptability: 60 — The card structure (image, counter, title, metadata, quote) is modular and clearly swappable with other photography and copy; the logo grid is a standard swappable grid. Dependency on specific photography quality for impact is a constraint but does not block separability of skin vs structure. Next tier: Reliance on consistently high-quality full-bleed photography for the parallax cards to read well limits how cleanly the pattern transfers without equivalent asset investment. Strengths: - Clear repeated card template combining oversized title, counter index, and testimonial in a legible editorial layout - Smooth transition from image-heavy project cards into a structurally different logo-grid closing layout - Confident oversized waldenburg typography establishes hierarchy at a glance Weaknesses: - Overlay text contrast against busy/light photography backgrounds is inconsistent and risks illegibility - Duplicate testimonial/title content appears across different client cards (John Laing repeated with identical quote) - Logo grid is a plain, undifferentiated grid with no distinguishing treatment - Parallax scale/translate and horizontal logo scroll are standard, widely-used techniques without a distinguishing twist Why it does not reach the next tier: The section executes a familiar full-bleed-photo-with-overlay-text-and-quote template competently, but legibility issues, repeated/duplicate content, and a generic logo grid keep it from reaching strong/memorable; motion described is standard parallax rather than a distinctive mechanism. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the card template (counter/title/metadata/quote over full-bleed image) and the closing split layout with logo grid, but ensure each card has unique photography and copy, and add a contrast-ensuring overlay treatment (scrim or solid text panel) so titles remain legible across varied image content. What transfers: - Full-bleed image card with counter index, title, metadata, and quote overlay structure - Stacked project card sequence transitioning into split text/logo-grid layout - Pill-style navigation and sharp-cornered image blocks as structural skin Dependencies: - High-quality full-bleed interior photography for visual impact - Unique, non-duplicated testimonial copy per project - Specific waldenburg typeface and tight letter-spacing for the display treatment ## 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 on Gemini's timestamped description rather than direct video observation - Cannot verify exact overlay contrast values or hex opacity used on text over images - Some testimonial duplication may be a capture artifact rather than actual site content ## 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: two-column - Layout: Stacked full-width image cards followed by a split layout with text on the left and a logo grid on the right. - Styles: photographic, bold, minimal - Components: full-width-image, text-overlay, testimonial-quote, logo-grid - Purpose: A sequence of full-screen project feature cards with text overlays, followed by a grid of client logos. - Visual signature: Immersive full-screen interior photography with typography overlays, transitioning into a clean client logo grid. - Place on the page: 5 of 8, after Stats (`thirdway-com:editorial-statement`), before Logo strip (`e7b608f4-91d6-42b0-989c-59b7cdadbdf4`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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": "120px", "family": "waldenburg", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-10: computed CSS at 1440×1000; AI role: 120px 'waldenburg' used for the massive 'Creation & confidence' hero statement.", "sampleId": "font-10", "confidence": 0.95, "lineHeight": "108px", "letterSpacing": "-7.2px" }, { "role": "heading", "size": "72px", "family": "waldenburg", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-1: computed CSS at 1440×1000; AI role: 72px 'waldenburg' used for major section headings like 'Six teams. One standard.'", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "70.6px", "letterSpacing": "-4.3px" }, { "role": "body", "size": "20px", "family": "waldenburg", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-2: computed CSS at 1440×1000; AI role: 20px 'waldenburg' used for readable paragraph text like the Zopa project description.", "sampleId": "font-2", "confidence": 0.85, "lineHeight": "22px", "letterSpacing": "-0.8px" } ] } ``` ### 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": "#F7F1E9", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(247, 241, 233); AI role: #F7F1E9 provides the dominant warm off-white background for most content sections.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#20221A", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(32, 34, 26); AI role: #20221A serves as the primary high-contrast dark color for text and icons on the light canvas.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-13: computed rgb(255, 255, 255); AI role: #FFFFFF is used for subtle contrast surfaces like the logo grid backgrounds.", "sampleId": "color-13", "confidence": 0.8 }, { "hex": "#666763", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-15: computed rgb(102, 103, 99); AI role: #666763 used for secondary text or elements within the dark footer context.", "sampleId": "color-15", "confidence": 0.7 } ] } ``` ### Design tokens ```json { "radius": "Minimal overall, but navigation elements (buttons/pills) use distinct rounded corners.", "density": "Low density. The design prioritizes visual impact and scale over packing information tightly.", "evidence": "Observations of full-width project images, large 'waldenburg' typographic blocks, sharp image edges, and pill-shaped nav elements.", "borderStyle": "Subtle, thin solid lines (often 1px) used as dividers and structure lines, particularly in the footer and for timeline/progress indicators.", "buttonStyle": "Pill-shaped containers with high-contrast text and trailing icons (arrows), often floating or fixed in navigation.", "cornerStyle": "Predominantly sharp, square corners on images and layout blocks, providing a structured, architectural feel.", "contentWidth": "Mixed: Full-bleed for impactful imagery and backgrounds, combined with wide, inset margins for textual content to maintain readability.", "spacingRhythm": "Generous spacing with massive vertical padding between sections to allow content to breathe. Distinctive typographic leading." } ``` ### 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** — Full-screen project images scale up and translate vertically on scroll, creating a strong parallax effect while text descriptions appear. (11s–20s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — A grid of company logos scrolls horizontally to the left as the user scrolls vertically past the section. (20s–22s; 90% 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: Full-bleed image card with counter index, title, metadata, and quote overlay structure; Stacked project card sequence transitioning into split text/logo-grid layout; Pill-style navigation and sharp-cornered image blocks as structural skin - Dependencies: High-quality full-bleed interior photography for visual impact; Unique, non-duplicated testimonial copy per project; Specific waldenburg typeface and tight letter-spacing for the display treatment - Guidance: Reuse the card template (counter/title/metadata/quote over full-bleed image) and the closing split layout with logo grid, but ensure each card has unique photography and copy, and add a contrast-ensuring overlay treatment (scrim or solid text panel) so titles remain legible across varied image content. ### 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 “Parallax Project Showcase and Logo Cloud”. Purpose: A sequence of full-screen project feature cards with text overlays, followed by a grid of client logos. Structure: two-column. Source layout label: Stacked full-width image cards followed by a split layout with text on the left and a logo grid on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: Immersive full-screen interior photography with typography overlays, transitioning into a clean client logo grid. Components: full-width-image, text-overlay, testimonial-quote, logo-grid. Style direction: photographic, bold, minimal. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"120px","family":"waldenburg","source":"computed","traits":"Regular","weight":"500","evidence":"font-10: computed CSS at 1440×1000; AI role: 120px 'waldenburg' used for the massive 'Creation & confidence' hero statement.","sampleId":"font-10","confidence":0.95,"lineHeight":"108px","letterSpacing":"-7.2px"} {"role":"heading","size":"72px","family":"waldenburg","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 72px 'waldenburg' used for major section headings like 'Six teams. One standard.'","sampleId":"font-1","confidence":0.9,"lineHeight":"70.6px","letterSpacing":"-4.3px"} {"role":"body","size":"20px","family":"waldenburg","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: 20px 'waldenburg' used for readable paragraph text like the Zopa project description.","sampleId":"font-2","confidence":0.85,"lineHeight":"22px","letterSpacing":"-0.8px"} Color evidence: {"hex":"#F7F1E9","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(247, 241, 233); AI role: #F7F1E9 provides the dominant warm off-white background for most content sections.","sampleId":"color-1","confidence":0.95} {"hex":"#20221A","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(32, 34, 26); AI role: #20221A serves as the primary high-contrast dark color for text and icons on the light canvas.","sampleId":"color-3","confidence":0.9} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-13: computed rgb(255, 255, 255); AI role: #FFFFFF is used for subtle contrast surfaces like the logo grid backgrounds.","sampleId":"color-13","confidence":0.8} {"hex":"#666763","name":"muted text","role":"muted-text","source":"computed","evidence":"color-15: computed rgb(102, 103, 99); AI role: #666763 used for secondary text or elements within the dark footer context.","sampleId":"color-15","confidence":0.7} 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: Full-screen project images scale up and translate vertically on scroll, creating a strong parallax effect while text descriptions appear. (95% confidence) scroll: A grid of company logos scrolls horizontally to the left as the user scrolls vertically past the section. (90% confidence) Transfer these principles: Full-bleed image card with counter index, title, metadata, and quote overlay structure; Stacked project card sequence transitioning into split text/logo-grid layout; Pill-style navigation and sharp-cornered image blocks as structural skin. Dependencies: High-quality full-bleed interior photography for visual impact; Unique, non-duplicated testimonial copy per project; Specific waldenburg typeface and tight letter-spacing for the display treatment. Adaptation guidance: Reuse the card template (counter/title/metadata/quote over full-bleed image) and the closing split layout with logo grid, but ensure each card has unique photography and copy, and add a contrast-ensuring overlay treatment (scrim or solid text panel) so titles remain legible across varied image content. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.