# Perspective scrolling poster gallery Schema: Design Details SECTION.md v3.2 Website: Partiful Source: https://partiful.com/ Source section IDs: gap-5a4237cb-2232-3296 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A calm headline block on the left sits against a dense diagonal row of posters, so the eye has one place to rest and one place to explore. - Receding square posters overlap and shrink toward the upper right, which gives varied thumbnails a shared sense of depth and scale. - Bold uppercase display type with a small muted subline gives clear hierarchy, and the saturated posters pop against the black canvas. What a screenshot can't show: - The recording only confirms a horizontal scroll between 12 and 15 seconds; easing, speed and any card rotation or depth change aren't visible. - No type sizes, spacing or overlap ratios were measured, so the perspective math is unknown. Borrow: Stage mixed, user-made thumbnails along one steep perspective line so varied content feels cohesive, then balance it with a quiet headline area. Leave alone: Don't copy Partiful's actual event posters, its black-and-white palette, or its condensed display font; use a free condensed sans style and your own artwork. ## Classification - Type: gallery - Layout: Headline text on the left with a massive right-aligned horizontal scroll track of cards angled in 3D perspective. - Styles: playful, colourful, bold - Confidence: 95% ## Purpose and structure A dynamic gallery showing a deep perspective line of overlapping colorful event posters that scrolls horizontally. Visual signature: A dramatic 3D perspective row of colorful, varied square event posters receding into the distance. ## Components - section headline - 3D perspective cards - horizontal carousel ## Typography - Display: Partiful Janky Inter Display Regular — 108.8px 400 - Heading: Partiful Janky Inter Display Regular — 50.1px 400 - Body: TWK Lausanne Pan 300 — 18.1px 300 ## Functional palette - Canvas: canvas #000000 - Text: text #FFFFFF - Text: text #111111 - Surface: surface #F7F7F7 - Muted-Text: muted text #777772 ## Motion evidence - 12.0–15.0s — A horizontal scrolling carousel displays various event poster designs under the heading 'A MILLION REASONS TO HANG'. (90% confidence) ## Section quality Overall: 66.41/100 (Good) Scored coverage: 85% - Typography: 62 — Bold condensed uppercase display headline paired with a small muted subtext establishes clear hierarchy; consistent with site's display font system, but the headline treatment itself is a simple two-line stack with no distinctive typographic craft beyond scale and weight. Next tier: No unique type detailing (kerning play, mixed scale, baseline alignment with the receding cards) to push beyond standard bold headline treatment. - Composition: 74 — Strong, confident use of a deep one-point perspective line of overlapping posters receding diagonally from lower-left to upper-right, contrasted against a large calm negative-space headline block on the left. The diagonal recession creates real depth and a dynamic sense of motion even in a static frame. Next tier: The headline block feels like a conventional left-aligned label dropped onto the composition rather than integrated into the perspective system; refining the relationship between text block and vanishing point would push this into higher tiers. - Motion: inconclusive — Gemini only confirms a horizontal scroll happens between 12-15s without describing easing, speed, parallax depth change, or card rotation behavior. Next tier: Need timestamped detail on scroll speed, perspective shift, and whether cards rotate/scale as they scroll to assess motion craft. - Content: 65 — Posters are varied, colorful, and clearly user/event-generated content that reinforces the 'million reasons' message; the perspective staging gives otherwise disparate thumbnail content a sense of coherence and scale. Next tier: Content integration relies on the volume/variety of posters rather than any bespoke framing, captioning, or interaction tied to the specific content shown. - Originality: 72 — The deep perspective poster-queue layout is a distinctive gallery format rarely seen as a default carousel pattern; it reads as a deliberate creative choice rather than a generic grid or standard horizontal scroller. Next tier: Lacks an additional signature twist (e.g., unique interaction on hover, unusual card shapes, atypical scroll direction) that would make it unmistakably singular rather than a well-executed variant of a known 3D carousel idea. - Adaptability: 58 — The structural idea (headline + receding perspective card row) is clearly separable from the specific poster artwork and could be reskinned with different content, but exact perspective math, card spacing, and overlap ratios are proprietary-feeling and not deterministically specified. Next tier: No deterministic spacing/rotation/scale values are supplied, so precise replication of the perspective recession requires guesswork. Strengths: - Deep one-point perspective card arrangement creates genuine spatial depth from a flat gallery - Clear hierarchy between static headline and dynamic scrolling content - Content variety reinforces the section's message without needing extra copy Weaknesses: - Headline block treatment is generic relative to the inventive gallery mechanic - No deterministic motion parameters available to assess scroll/perspective animation quality - Reliance on poster artwork variety to carry visual interest rather than designed card framing or borders Why it does not reach the next tier: The perspective gallery concept is inventive and well-composed, but the headline pairing is conventional, no distinctive interaction details are confirmed, and the motion craft cannot be verified from available evidence — all of which keep it below a truly memorable, signature execution. ## Adaptation guidance - Effort: Medium - Guidance: Recreate using CSS 3D transforms on a horizontal scroll track: apply decreasing scale and consistent Y/Z rotation per card to simulate the vanishing-point recession, pair with a static left-column headline, and populate with varied square content tiles; tune overlap and perspective depth to taste since exact values are unverified. What transfers: - Left-aligned headline with perspective-receding card gallery structure - Horizontal scroll carousel with overlapping angled cards simulating depth Dependencies: - Specific poster/content aspect ratio and variety used to fill the recession - Exact perspective transform values (rotation, scale-down rate, overlap spacing) not supplied - Scroll/motion behavior details not confirmed ## 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 axis not scored due to lack of timestamped detail on scroll speed, easing, or perspective animation - Exact perspective transform values and card spacing not deterministically supplied - Cannot confirm interaction behavior (hover, click-through) from the static 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: Headline text on the left with a massive right-aligned horizontal scroll track of cards angled in 3D perspective. - Styles: playful, colourful, bold - Components: section headline, 3D perspective cards, horizontal carousel - Purpose: A dynamic gallery showing a deep perspective line of overlapping colorful event posters that scrolls horizontally. - Visual signature: A dramatic 3D perspective row of colorful, varied square event posters receding into the distance. - Place on the page: 3 of 8, after Testimonials (`partiful-com:feature_grid_one_link`), before Other (`partiful-com:other_city_directory`) ### 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": "108.8px", "family": "Partiful Janky Inter Display Regular", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 108.8px 'Partiful Janky Inter Display Regular', used for the main hero headline 'Parties are back'.", "sampleId": "font-6", "confidence": 0.95, "lineHeight": "108.8px", "letterSpacing": "2.2px" }, { "role": "heading", "size": "50.1px", "family": "Partiful Janky Inter Display Regular", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: 50.1px 'Partiful Janky Inter Display Regular', used for primary section titles like 'One link. Everyone’s in.'.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "50.1px", "letterSpacing": "1px" }, { "role": "body", "size": "18.1px", "family": "TWK Lausanne Pan 300", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-10: computed CSS at 1440×1000; AI role: 18.1px 'TWK Lausanne Pan 300', used for descriptive paragraphs explaining features.", "sampleId": "font-10", "confidence": 0.9, "lineHeight": "21.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": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(0, 0, 0); AI role: Solid #000000 used extensively for dark mode sections, the hero, and the footer.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and body text on the dark canvas sections.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#111111", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(17, 17, 17); AI role: #111111 used for text on light surfaces and inside the navigation bar.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#F7F7F7", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(247, 247, 247); AI role: #F7F7F7 used as the background for light sections to slightly offset pure white content.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#777772", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-14: computed rgb(119, 119, 114); AI role: #777772 used for secondary descriptions and subtext to establish visual hierarchy.", "sampleId": "color-14", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Mixed: 999px for pills, ~16px-24px for app frames and feature cards.", "density": "Low density. Each viewport primarily focuses on a single large headline, a device mockup, or a specific interactive element.", "evidence": "Observed via the pill-shaped navigation, large padding around headings, strict black/white background switching, and centered layout structure.", "borderStyle": "Minimal visible borders; sections and elements are separated by stark color contrast (black vs. white/gray) or shadows in floating elements.", "buttonStyle": "Solid fill (often high-contrast inversion of the background), pill-shaped, containing sans-serif text with standard padding.", "cornerStyle": "Fully rounded (pill) shapes for navigation containers and buttons. Moderate border-radii for device frames and floating cards.", "contentWidth": "Content is generally centered in a constrained column, while decorative imagery stretches edge-to-edge.", "spacingRhythm": "Generous vertical rhythm with distinct, screen-height sections. Substantial padding around text blocks to isolate messaging." } ``` ### 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** — A horizontal scrolling carousel displays various event poster designs under the heading 'A MILLION REASONS TO HANG'. (12s–15s; 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: Left-aligned headline with perspective-receding card gallery structure; Horizontal scroll carousel with overlapping angled cards simulating depth - Dependencies: Specific poster/content aspect ratio and variety used to fill the recession; Exact perspective transform values (rotation, scale-down rate, overlap spacing) not supplied; Scroll/motion behavior details not confirmed - Guidance: Recreate using CSS 3D transforms on a horizontal scroll track: apply decreasing scale and consistent Y/Z rotation per card to simulate the vanishing-point recession, pair with a static left-column headline, and populate with varied square content tiles; tune overlap and perspective depth to taste since exact values are unverified. ### 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 “Perspective scrolling poster gallery”. Purpose: A dynamic gallery showing a deep perspective line of overlapping colorful event posters that scrolls horizontally. Structure: horizontal sequence. Source layout label: Headline text on the left with a massive right-aligned horizontal scroll track of cards angled in 3D perspective.. Preserve the sense of continuation with a visible next item, progress cue, or directional control. Visual signature to preserve at the pattern level: A dramatic 3D perspective row of colorful, varied square event posters receding into the distance. Components: section headline, 3D perspective cards, horizontal carousel. Style direction: playful, colourful, bold. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"108.8px","family":"Partiful Janky Inter Display Regular","source":"computed","traits":"uppercase","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 108.8px 'Partiful Janky Inter Display Regular', used for the main hero headline 'Parties are back'.","sampleId":"font-6","confidence":0.95,"lineHeight":"108.8px","letterSpacing":"2.2px"} {"role":"heading","size":"50.1px","family":"Partiful Janky Inter Display Regular","source":"computed","traits":"uppercase","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 50.1px 'Partiful Janky Inter Display Regular', used for primary section titles like 'One link. Everyone’s in.'.","sampleId":"font-2","confidence":0.95,"lineHeight":"50.1px","letterSpacing":"1px"} {"role":"body","size":"18.1px","family":"TWK Lausanne Pan 300","source":"computed","traits":"Regular","weight":"300","evidence":"font-10: computed CSS at 1440×1000; AI role: 18.1px 'TWK Lausanne Pan 300', used for descriptive paragraphs explaining features.","sampleId":"font-10","confidence":0.9,"lineHeight":"21.7px","letterSpacing":"-0.4px"} Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Solid #000000 used extensively for dark mode sections, the hero, and the footer.","sampleId":"color-4","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and body text on the dark canvas sections.","sampleId":"color-3","confidence":0.95} {"hex":"#111111","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(17, 17, 17); AI role: #111111 used for text on light surfaces and inside the navigation bar.","sampleId":"color-1","confidence":0.95} {"hex":"#F7F7F7","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(247, 247, 247); AI role: #F7F7F7 used as the background for light sections to slightly offset pure white content.","sampleId":"color-2","confidence":0.9} {"hex":"#777772","name":"muted text","role":"muted-text","source":"computed","evidence":"color-14: computed rgb(119, 119, 114); AI role: #777772 used for secondary descriptions and subtext to establish visual hierarchy.","sampleId":"color-14","confidence":0.85} 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: A horizontal scrolling carousel displays various event poster designs under the heading 'A MILLION REASONS TO HANG'. (90% confidence) Transfer these principles: Left-aligned headline with perspective-receding card gallery structure; Horizontal scroll carousel with overlapping angled cards simulating depth. Dependencies: Specific poster/content aspect ratio and variety used to fill the recession; Exact perspective transform values (rotation, scale-down rate, overlap spacing) not supplied; Scroll/motion behavior details not confirmed. Adaptation guidance: Recreate using CSS 3D transforms on a horizontal scroll track: apply decreasing scale and consistent Y/Z rotation per card to simulate the vanishing-point recession, pair with a static left-column headline, and populate with varied square content tiles; tune overlap and perspective depth to taste since exact values are unverified. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.