# Exploding 3D Object Features Schema: Design Details SECTION.md v3.2 Website: Sharplink Source: https://www.sharplink.com/ Source section IDs: gap-75bee018-5127-6400 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A left-aligned feature list with icons, short headings and body copy sits beside one large angled metallic object, giving a clean asymmetric balance with plenty of negative space. - Dotted-line dividers set a steady rhythm between items, so the list reads as tidy and editorial. - A small uppercase eyebrow, mid-size headings and plain body copy in one sans family keep the hierarchy clear, and the object is the only showpiece. What a screenshot can't show: - In the recording, the object rotates and separates into segments as the page scrolls, over roughly 1 to 3 seconds. Easing and staggering aren't visible. - No font sizes or spacing were measured, so exact scale and padding are unknown. Borrow: Let one scroll-driven hero object come apart in step with a plain, well-aligned list so the motion explains the content without competing with it. Leave alone: Don't copy the brushed-metal cylindrical object, the sky-gradient backdrop, the blue accent or the Archivo type; use your own illustration and a similar free neutral sans. ## Classification - Type: features - Layout: Left-aligned list of features with icons alongside a large 3D graphic on the right. - Styles: minimal, corporate - Confidence: 90% ## Purpose and structure A list of features accompanied by a 3D metallic object that appears to explode or separate into distinct parts. Visual signature: A metallic 3D object breaking apart into cylindrical segments on the right side. ## Components - feature list - icons - 3D graphic - link button ## Typography - Display: Archivo — 88px 400 - Heading: Archivo — 68px 400 - Body: Archivo — 16px 400 - Mono: Archivo Narrow — 13px 500 ## Functional palette - Primary-Action: primary action #0E76FF - Text: text #FFFFFF - Canvas: canvas #000000 - Surface: surface #F3F3F3 ## Motion evidence - 1.0–3.0s — A 3D metallic object comes into view and its components rotate and separate as the page scrolls down. (85% confidence) ## Section quality Overall: 61.75/100 (Good) Scored coverage: 100% - Typography: 62 — Clear hierarchy of small uppercase eyebrow, mid-size feature headings, and body copy using consistent Archivo family; contrast between weights is legible but unremarkable, with no distinctive type personality beyond standard sans stack. Next tier: Needs a more deliberate type-driven moment (scale contrast, unusual pairing, or kinetic typography) rather than a conventional label/heading/body stack to reach strong tier. - Composition: 66 — Left text column with dotted-line dividers against a large diagonally-angled metallic 3D form on the right creates a clean asymmetric balance and good negative space; the gradient sky backdrop transitions nicely into the white surface, giving depth. Next tier: Composition is a fairly standard split-screen feature list; to reach strong it would need a more unexpected interplay between the text grid and the object rather than a conventional two-column layout. - Motion: 58 — A single timestamped observation shows the 3D object rotating and separating into segments as the page scrolls, which is a real, deliberate kinetic idea, though only one moment is described with limited specificity on easing, staggering, or duration. Next tier: Only one coarse motion moment is documented; richer detail (staggered part separation, speed curves, scroll-linked scrubbing precision) would be needed to justify a higher score. - Content: 60 — Icons, headings, and descriptive copy are integrated adjacent to the 3D object with consistent alignment and dotted separators, giving a tidy editorial feel appropriate for a fintech feature list. Next tier: Icons feel like generic line-art placeholders rather than bespoke illustrations tightly tied to each feature's meaning, limiting content distinctiveness. - Originality: 68 — An exploding metallic cylindrical object as the visual anchor for a feature list is a distinctive, non-generic choice that stands out from typical icon-grid feature sections, giving the section a memorable signature. Next tier: The surrounding layout (eyebrow + list + button) is conventional; without further novel interaction or compositional risk around the object, it stops short of a truly singular design statement. - Adaptability: 55 — The list/icon/heading/body pattern and dotted divider rhythm are clearly separable from the specific metallic asset and gradient skin, making structural reuse feasible with a different illustrative element. Next tier: Heavy reliance on a bespoke 3D rendered object means the signature visual cannot transfer without equivalent asset production, capping ease of adaptation. Strengths: - Distinctive exploding metallic 3D object gives the section a memorable visual anchor - Clean asymmetric split between text list and large graphic with good negative space - Consistent typographic hierarchy using eyebrow label, heading, and body text with dotted-line separators Weaknesses: - Icons are generic thin-line glyphs that don't individually reinforce each feature's meaning - Motion evidence is limited to a single coarse timestamp without detail on choreography - Layout pattern (label + list + image) is a conventional feature-section template Why it does not reach the next tier: The section's novelty rests almost entirely on the 3D asset; the supporting layout, icon set, and typographic choices are conventional execution rather than reinforcing a cohesive, singular idea, and motion detail is too sparse to confirm a sophisticated choreographed reveal. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the text-list and divider structure with any strong focal graphic; the 3D exploding object can be swapped for another animated centerpiece, but scroll-linked motion engineering and custom asset creation must be rebuilt. What transfers: - Left-aligned feature list with dotted divider rhythm - Eyebrow label plus CTA button pairing pattern - Asymmetric text-vs-graphic split layout Dependencies: - Bespoke 3D rendered metallic object asset - Gradient sky-to-white background transition - Scroll-triggered rotation/separation animation of the 3D object ## 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 a single coarse timestamped description without detail on timing or staggering - No visible mobile or responsive behavior evidence - Icon and copy legibility for the fourth feature item is obscured by fade in the 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: features - Source type: features - Structure: Left-aligned list of features with icons alongside a large 3D graphic on the right. - Layout: Left-aligned list of features with icons alongside a large 3D graphic on the right. - Styles: minimal, corporate - Components: feature list, icons, 3D graphic, link button - Purpose: A list of features accompanied by a 3D metallic object that appears to explode or separate into distinct parts. - Visual signature: A metallic 3D object breaking apart into cylindrical segments on the right side. - Place on the page: 7 of 10, after Call to action (`sharplink-com:C05`), before Editorial (`sharplink-com:C06`) ### 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": "88px", "family": "Archivo", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Archivo 88px, used for the main hero headline 'Ethereum with an Edge'.", "sampleId": "font-6", "confidence": 1, "lineHeight": "84.5px", "letterSpacing": "-2.6px" }, { "role": "heading", "size": "68px", "family": "Archivo", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: Archivo 68px, used for major section headings like 'The Stack for Stacking Ethereum'.", "sampleId": "font-1", "confidence": 0.9, "lineHeight": "72.1px", "letterSpacing": "-1.4px" }, { "role": "body", "size": "16px", "family": "Archivo", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-8: computed CSS at 1440×1000; AI role: Archivo 16px, used for standard paragraph text describing features and propositions.", "sampleId": "font-8", "confidence": 0.95, "lineHeight": "normal", "letterSpacing": "normal" }, { "role": "mono", "size": "13px", "family": "Archivo Narrow", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: Archivo Narrow 13px, used for smaller, uppercase labels and navigation items, functioning similarly to a technical or mono font in this context.", "sampleId": "font-3", "confidence": 0.8, "lineHeight": "18.2px", "letterSpacing": "1px" } ] } ``` ### 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": "#0E76FF", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-1: computed rgb(14, 118, 255); AI role: The vivid blue (#0E76FF) is used distinctively for main call-to-action buttons.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-12: computed rgb(255, 255, 255); AI role: White text is primary against the dark backgrounds.", "sampleId": "color-12", "confidence": 0.95 }, { "hex": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(0, 0, 0); AI role: Solid black is used as a foundational background for several major sections.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#F3F3F3", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-4: computed rgb(243, 243, 243); AI role: Light grey (#F3F3F3) used for subtle background blocks or form fields.", "sampleId": "color-4", "confidence": 0.7 } ] } ``` ### Design tokens ```json { "radius": "0px (sharp corners).", "density": "Low to medium density. The design prioritizes large, impactful visuals and clear, concise typography over dense information packing.", "evidence": "Observed sharp corners on 'EXPLORE THE DASHBOARD' button, expansive dark backgrounds separating text sections, and large text scales (88px, 68px) requiring significant space.", "borderStyle": "Minimal visible borders; separation is achieved mostly through stark color contrasts (black/blue/white) and spatial arrangement. Some very subtle, thin border lines exist in the FAQ.", "buttonStyle": "Solid rectangular blocks with sharp corners, utilizing high-contrast background colors (bright blue) or semi-transparent dark backgrounds with white text.", "cornerStyle": "Sharp, 90-degree corners are used almost exclusively for buttons, cards, and text containers, reinforcing a precise, technical feel.", "contentWidth": "Content is generally centered or split into wide, balanced columns, utilizing a significant portion of the desktop viewport width to accommodate large 3D visuals.", "spacingRhythm": "Generous vertical spacing between major sections, often using empty space to frame the 3D visual elements. Text blocks are relatively tight but well-separated from imagery." } ``` ### 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 3D metallic object comes into view and its components rotate and separate as the page scrolls down. (1s–3s; 85% 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 feature list with dotted divider rhythm; Eyebrow label plus CTA button pairing pattern; Asymmetric text-vs-graphic split layout - Dependencies: Bespoke 3D rendered metallic object asset; Gradient sky-to-white background transition; Scroll-triggered rotation/separation animation of the 3D object - Guidance: Reuse the text-list and divider structure with any strong focal graphic; the 3D exploding object can be swapped for another animated centerpiece, but scroll-linked motion engineering and custom asset creation must be rebuilt. ### 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 features section inspired by the design evidence titled “Exploding 3D Object Features”. Purpose: A list of features accompanied by a 3D metallic object that appears to explode or separate into distinct parts. Structure: Left-aligned list of features with icons alongside a large 3D graphic on the right.. Source layout label: Left-aligned list of features with icons alongside a large 3D graphic on the right.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A metallic 3D object breaking apart into cylindrical segments on the right side. Components: feature list, icons, 3D graphic, link button. Style direction: minimal, corporate. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"88px","family":"Archivo","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Archivo 88px, used for the main hero headline 'Ethereum with an Edge'.","sampleId":"font-6","confidence":1,"lineHeight":"84.5px","letterSpacing":"-2.6px"} {"role":"heading","size":"68px","family":"Archivo","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Archivo 68px, used for major section headings like 'The Stack for Stacking Ethereum'.","sampleId":"font-1","confidence":0.9,"lineHeight":"72.1px","letterSpacing":"-1.4px"} {"role":"body","size":"16px","family":"Archivo","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: Archivo 16px, used for standard paragraph text describing features and propositions.","sampleId":"font-8","confidence":0.95,"lineHeight":"normal","letterSpacing":"normal"} {"role":"mono","size":"13px","family":"Archivo Narrow","source":"computed","traits":"uppercase","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Archivo Narrow 13px, used for smaller, uppercase labels and navigation items, functioning similarly to a technical or mono font in this context.","sampleId":"font-3","confidence":0.8,"lineHeight":"18.2px","letterSpacing":"1px"} Color evidence: {"hex":"#0E76FF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-1: computed rgb(14, 118, 255); AI role: The vivid blue (#0E76FF) is used distinctively for main call-to-action buttons.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-12: computed rgb(255, 255, 255); AI role: White text is primary against the dark backgrounds.","sampleId":"color-12","confidence":0.95} {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(0, 0, 0); AI role: Solid black is used as a foundational background for several major sections.","sampleId":"color-3","confidence":0.9} {"hex":"#F3F3F3","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(243, 243, 243); AI role: Light grey (#F3F3F3) used for subtle background blocks or form fields.","sampleId":"color-4","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: A 3D metallic object comes into view and its components rotate and separate as the page scrolls down. (85% confidence) Transfer these principles: Left-aligned feature list with dotted divider rhythm; Eyebrow label plus CTA button pairing pattern; Asymmetric text-vs-graphic split layout. Dependencies: Bespoke 3D rendered metallic object asset; Gradient sky-to-white background transition; Scroll-triggered rotation/separation animation of the 3D object. Adaptation guidance: Reuse the text-list and divider structure with any strong focal graphic; the 3D exploding object can be swapped for another animated centerpiece, but scroll-linked motion engineering and custom asset creation must be rebuilt. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.