# 3D Product Detail Showcase Schema: Design Details SECTION.md v3.2 Website: Raycast Keyboard Source: https://www.raycast.com/keyboard Source section IDs: gap-3f4fd6fb-942-1845 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The asymmetric split puts a short heading and muted-grey paragraph on the left and a large ring of keycaps on the right, so the object is clearly the hero. - Generous negative space on the near-black canvas (#07080A) lets the black keycaps read as floating, with white heading and grey body setting a clear hierarchy. - The copy talks about the custom keycaps and the Hyper key, so the message and the 3D asset support each other. What a screenshot can't show: - In the recording the ring rises from the bottom and spins slightly as you scroll, over about five seconds (1s to 6s), so the rotation is tied to scroll progress. - The heading is reviewed as Inter at roughly 32px with tight letter-spacing, but no spacing or type measurements were captured. Borrow: Pair sparse left-aligned copy with one strong object on a dark canvas, and let scroll drive a simple rise and rotation so the product feels tactile. Leave alone: Don't copy the keycap ring itself, the Raycast-specific Hyper key story or the near-black and grey palette; build your own product-specific object and use a free Inter-like sans if needed. ## Classification - Type: editorial - Layout: Two-column layout with text on the left and a large visual element on the right. - Styles: minimal, illustrative - Confidence: 98% ## Purpose and structure A feature section displaying left-aligned copy paired with a 3D ring of keycaps on the right that spins on scroll. Visual signature: A distinct circular arrangement of black keycaps floating in a dark void next to sparse text. ## Components - h2 - p - 3d-render ## Typography - Display: Inter — 50px 500 - Heading: Inter — 32px 500 - Body: Inter — 16px 400 - Mono: GeistMono — 12px 500 ## Functional palette - Canvas: canvas #07080A - Text: text #FFFFFF - Muted-Text: muted text #9C9C9D - Primary-Action: primary action #E6E6E6 ## Motion evidence - 1.0–6.0s — A ring of custom keycaps appears from the bottom, spinning slightly as the scroll progresses. (95% confidence) ## Section quality Overall: 61.85/100 (Good) Scored coverage: 100% - Typography: 62 — Clean Inter heading at 32px with tight letter-spacing and muted-grey body copy create clear hierarchy, but the pairing is a standard editorial convention with no distinctive typographic treatment. Next tier: Needs a more deliberate typographic device (scale contrast, custom treatment) rather than default heading/body stack to feel memorable. - Composition: 68 — Strong asymmetric split with generous negative space and a well-centered circular product arrangement creates a confident, premium feel; the void framing the ring is a deliberate compositional choice. Next tier: Composition is a fairly conventional two-column feature layout; nothing in the arrangement itself is unexpected beyond the product's own geometry. - Motion: 58 — Gemini confirms a timestamped entrance where the keycap ring rises and spins on scroll, giving a tactile, product-aware motion beat, but it's a single simple reveal without described secondary choreography. Next tier: Needs more detailed/layered motion (e.g., staggered keycap reveals, parallax on text) to exceed a single straightforward entrance animation. - Content: 60 — Copy directly ties to the visual (custom keycaps, Hyper key) and the 3D object is clearly the hero content, giving tight integration between message and asset. Next tier: Integration is functional but not elevated by any supporting micro-content (labels, callouts) that would deepen the product story. - Originality: 66 — The circular floating keycap arrangement in a dark void is a distinctive, product-specific visual signature not reducible to generic card/photo patterns. Next tier: While the asset is distinctive, the surrounding layout and motion idiom (rotate-on-scroll reveal) are common patterns seen across many 3D product sites. - Adaptability: 55 — The two-column text/visual structure and dark canvas are easily separable from the specific 3D keycap asset, but the entire visual impact depends on a custom-modeled, brand-specific 3D render. Next tier: Heavy dependency on a bespoke 3D asset limits how cleanly the pattern reduces to a reusable skin-independent structure. Strengths: - Confident use of negative space against a dark canvas that isolates the product render as the focal point - Circular keycap arrangement is a distinctive, on-brand visual device directly tied to the product's identity - Copy is concise and directly supports the visual without redundant description Weaknesses: - Typography pairing is a standard heading/body convention without a distinguishing treatment - Motion described is a single straightforward scroll-triggered reveal/spin with no layered choreography - Layout pattern (left text, right hero visual) is common across many product marketing sites Why it does not reach the next tier: The section relies on a strong but singular asset (the 3D keycap ring) within an otherwise conventional two-column layout and basic scroll reveal; to reach strong/memorable it would need either a more inventive compositional structure, richer multi-stage motion, or a typographic treatment that stands apart from default Inter hierarchy. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the split layout, dark void background, and scroll-reveal timing as a template; swap in any other 3D product render or icon array in place of the keycap ring to adapt to different products. What transfers: - Two-column dark-canvas layout with left-aligned text block and right-side hero visual - Low-density spacing rhythm and generous negative space around the focal object - Scroll-triggered rise-and-spin reveal pattern for a centered 3D/graphic element Dependencies: - Custom 3D keycap render/model is required to replicate the exact visual signature - Scroll-linked animation engine capable of driving rotation/position tied to scroll progress ## 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 description; no detail on easing, duration, or secondary motion is available - Exact dimensions, radii, and animation parameters are not deterministically specified, limiting precision of composition/motion judgments - Only one static crop is available, so scroll-driven changes beyond the described entrance cannot be verified ## 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: two-column - Layout: Two-column layout with text on the left and a large visual element on the right. - Styles: minimal, illustrative - Components: h2, p, 3d-render - Purpose: A feature section displaying left-aligned copy paired with a 3D ring of keycaps on the right that spins on scroll. - Visual signature: A distinct circular arrangement of black keycaps floating in a dark void next to sparse text. - Place on the page: 2 of 7, after Hero (`raycast-com:product_hero`), before Feature collection (`raycast-com:exploded_switch`) ### 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": "50px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-4: computed CSS at 1440×1000; AI role: Inter 50px, weight 500, used for the main hero heading.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "50px", "letterSpacing": "-1.2px" }, { "role": "heading", "size": "32px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: Inter 32px, weight 500, used for primary section titles like 'Mechanical feel. Quiet by design.'", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "40px", "letterSpacing": "-0.4px" }, { "role": "body", "size": "16px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Inter 16px, weight 400, used for descriptive paragraph text explaining features.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "28px", "letterSpacing": "normal" }, { "role": "mono", "size": "12px", "family": "GeistMono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-1: computed CSS at 1440×1000; AI role: GeistMono 12px, weight 500, uppercase traits, used extensively in data tables for technical specifications.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "14.4px", "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": "#07080A", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(7, 8, 10); AI role: #07080A serves as the primary dark background for the entire page body.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important body copy.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#9C9C9D", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-4: computed rgb(156, 156, 157); AI role: #9C9C9D used for secondary information, footer links, and subtle descriptors.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#E6E6E6", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-9: computed rgb(230, 230, 230); AI role: #E6E6E6 used as the solid background color for prominent interactive elements like the 'Download' and 'Subscribe' buttons.", "sampleId": "color-9", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear fully rounded (pill-shaped), while feature cards and input fields use a moderate border-radius (likely 8px-12px based on visual appearance).", "density": "Low density overall, heavily favoring negative space to emphasize the premium nature of the product imagery.", "evidence": "Observed from the structural layout of feature grids, the styling of the navigation and footer, and the repetitive application of transparent white borders and rounded geometries across components.", "borderStyle": "Extensive use of 1px solid hairline borders with low opacity white (rgba(255,255,255,0.1)) to define structure without adding visual weight.", "buttonStyle": "Mix of solid light-grey/white buttons with dark text for primary actions, and ghost/outline buttons with semi-transparent borders for secondary actions.", "cornerStyle": "Consistent use of rounded corners on interactive elements and container cards.", "contentWidth": "Content is constrained to a central max-width column, typical of modern desktop layouts, keeping text readable and images focused.", "spacingRhythm": "Generous vertical spacing between major sections, allowing product renders to breathe. Tighter grouping within data tables and feature cards." } ``` ### 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 ring of custom keycaps appears from the bottom, spinning slightly as the scroll progresses. (1s–6s; 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: Two-column dark-canvas layout with left-aligned text block and right-side hero visual; Low-density spacing rhythm and generous negative space around the focal object; Scroll-triggered rise-and-spin reveal pattern for a centered 3D/graphic element - Dependencies: Custom 3D keycap render/model is required to replicate the exact visual signature; Scroll-linked animation engine capable of driving rotation/position tied to scroll progress - Guidance: Reuse the split layout, dark void background, and scroll-reveal timing as a template; swap in any other 3D product render or icon array in place of the keycap ring to adapt to different products. ### 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 “3D Product Detail Showcase”. Purpose: A feature section displaying left-aligned copy paired with a 3D ring of keycaps on the right that spins on scroll. Structure: two-column. Source layout label: Two-column layout with text on the left and a large visual element 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: A distinct circular arrangement of black keycaps floating in a dark void next to sparse text. Components: h2, p, 3d-render. Style direction: minimal, illustrative. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"50px","family":"Inter","source":"computed","traits":"Regular","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: Inter 50px, weight 500, used for the main hero heading.","sampleId":"font-4","confidence":0.95,"lineHeight":"50px","letterSpacing":"-1.2px"} {"role":"heading","size":"32px","family":"Inter","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Inter 32px, weight 500, used for primary section titles like 'Mechanical feel. Quiet by design.'","sampleId":"font-3","confidence":0.95,"lineHeight":"40px","letterSpacing":"-0.4px"} {"role":"body","size":"16px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Inter 16px, weight 400, used for descriptive paragraph text explaining features.","sampleId":"font-6","confidence":0.9,"lineHeight":"28px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"GeistMono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: GeistMono 12px, weight 500, uppercase traits, used extensively in data tables for technical specifications.","sampleId":"font-1","confidence":0.95,"lineHeight":"14.4px","letterSpacing":"0.9px"} Color evidence: {"hex":"#07080A","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(7, 8, 10); AI role: #07080A serves as the primary dark background for the entire page body.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important body copy.","sampleId":"color-2","confidence":1} {"hex":"#9C9C9D","name":"muted text","role":"muted-text","source":"computed","evidence":"color-4: computed rgb(156, 156, 157); AI role: #9C9C9D used for secondary information, footer links, and subtle descriptors.","sampleId":"color-4","confidence":0.95} {"hex":"#E6E6E6","name":"primary action","role":"primary-action","source":"computed","evidence":"color-9: computed rgb(230, 230, 230); AI role: #E6E6E6 used as the solid background color for prominent interactive elements like the 'Download' and 'Subscribe' buttons.","sampleId":"color-9","confidence":0.9} 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 ring of custom keycaps appears from the bottom, spinning slightly as the scroll progresses. (95% confidence) Transfer these principles: Two-column dark-canvas layout with left-aligned text block and right-side hero visual; Low-density spacing rhythm and generous negative space around the focal object; Scroll-triggered rise-and-spin reveal pattern for a centered 3D/graphic element. Dependencies: Custom 3D keycap render/model is required to replicate the exact visual signature; Scroll-linked animation engine capable of driving rotation/position tied to scroll progress. Adaptation guidance: Reuse the split layout, dark void background, and scroll-reveal timing as a template; swap in any other 3D product render or icon array in place of the keycap ring to adapt to different products. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.