# Scroll-expanding asterisk with floating cards Schema: Design Details SECTION.md v3.2 Website: Causal Source: https://causal.so/ Source section IDs: gap-a4488139-1533-5692 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A single black asterisk sits dead centre as a fixed anchor, so the scattered cards always have one obvious focal point to orbit. - Cards vary in size, rotation and type (photos, UI snippets, labelled briefs), which makes the scatter feel loose and playful while still showing real product content. - A near-monochrome palette of off-white canvas, near-black text and grey muted words keeps the busy cards from feeling chaotic. What a screenshot can't show: - On scroll down the small asterisk grows and the cards animate in around it (about 10-19s in the recording); scrolling up reverses it, with cards moving out and the asterisk shrinking back to a dot. - No font sizes, spacing or easing values were measured, so timing curves and card offsets are unknown. Borrow: Tie one simple growing shape to scroll and let supporting cards disperse around it, so a single gesture tells the whole story. Leave alone: Don't copy the giant black asterisk, the exact Brand Brief and Website Brief cards, or their hand-placed positions and rotations; use your own symbol and content. ## Classification - Type: other - Layout: Central anchor element with radially dispersed floating cards - Styles: minimal, photographic, playful - Confidence: 95% ## Purpose and structure A scroll-driven interactive section where a central asterisk grows and floating cards containing images and text scatter around it. Visual signature: A giant black asterisk surrounded by floating media cards such as a 'Brand Brief' image and 'Website Brief' text snippets. ## Components - animated-icon - floating-cards - image-cards - text-cards - brief-text ## Typography - Display: Manrope Variable — 60px 700 - Heading: Manrope Variable — 50px 650 - Body: Inter Variable — 16px 500 ## Functional palette - Canvas: canvas #F9F9F9 - Text: text #1A1A1A - Muted-Text: muted text #878787 - Surface: surface #EEEEEE - Primary-Action: primary action #000000 ## Motion evidence - 10.0–19.0s — A small asterisk icon grows larger, and various media cards (images, text snippets) animate inwards and float around it, creating a dynamic visual arrangement triggered by scrolling. (98% confidence) - 109.0–118.0s — As the user scrolls back up, the floating cards animate outwards and disappear, and the large asterisk icon shrinks back to a small dot. (95% confidence) ## Section quality Overall: 62.30/100 (Good) Scored coverage: 100% - Typography: 56 — Centered sentence pairs a muted/emphasized word treatment with a plain sans-serif; type scale and hierarchy are minimal and largely decorative rather than structural within this section. Next tier: Needs more deliberate typographic hierarchy or scale contrast tied to the card content rather than one static centered line. - Composition: 68 — A strong central-anchor-plus-radial-scatter layout: the growing asterisk sits as a fixed focal point while varied-size, varied-rotation cards disperse around it with believable spatial logic and negative space. Next tier: Card placement reads as evenly distributed scatter rather than a composed, intentional spatial story; tighter control of alignment/overlap at the extremes would push it further. - Motion: 64 — Gemini's timestamps describe a specific, bidirectional scroll choreography: the asterisk grows and cards animate outward on scroll down, then reverse and collapse on scroll up (10-19s, 109-118s), which is a concrete and legible interaction. Next tier: Without data on easing, stagger timing, or velocity-response, it's unclear whether the motion has the refined physicality needed for a higher tier. - Content: 60 — Cards mix photography, UI-style snippets (Mood Board, Causal Planning) and labeled briefs, giving the abstract animation a product-reference payload, but the content feels like generic placeholder assets rather than tightly authored copy. Next tier: Content items read as interchangeable sample cards rather than a curated narrative sequence; deeper copy/image pairing tied to the section's message would raise this. - Originality: 68 — The growing-asterisk-as-anchor device combined with radial card dispersal is a distinctive idea beyond a stock scroll-reveal or parallax grid, giving the section a recognizable signature. Next tier: The underlying mechanic (icon grows, cards float in/out) is adjacent to familiar scatter/parallax patterns seen elsewhere; it needs an additional twist specific to this product to feel singular. - Adaptability: 58 — The anchor+scatter structure and card component are conceptually separable from the specific photography and copy, but exact positions, rotations, and count of cards are bespoke and would need re-tuning for new content. Next tier: No deterministic spacing/sizing tokens are supplied for the scattered cards, making it hard to state a clean separation between structure and skin with confidence. Strengths: - Central growing asterisk gives the scroll sequence a clear, legible focal anchor - Radial card scatter creates generous negative space and a believable sense of depth/dispersal - Bidirectional scroll animation (expand then collapse) is a complete, intentional interaction loop Weaknesses: - Typography treatment is a single static sentence with minimal hierarchy - Card contents feel like generic sample UI snippets rather than a tightly authored narrative - Scatter placement lacks a strong compositional throughline beyond even distribution - No supplied data on easing, stagger, or card-level motion refinement Why it does not reach the next tier: The section's core idea (growing icon + scattering cards) is a genuine signature move, but the typography is flat, the card content reads as placeholder, and there is no evidence of finely tuned motion physics or curated spatial composition needed to move from good/polished into strong/memorable territory. ## Adaptation guidance - Effort: Medium - Guidance: Keep the anchor+scatter structural pattern and the expand/collapse scroll behavior; swap in new photography, UI snippets, and copy while re-tuning card count and spacing to match the new layout footprint. What transfers: - central icon-grows-on-scroll anchor mechanic - radial card dispersal/collapse pattern - mixed image+text card component for showcasing varied content types Dependencies: - specific photography and product screenshots used inside cards - exact card count, rotation, and position values - copy content of the centered sentence ## 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 two timestamped descriptions without finer detail on easing or stagger - No deterministic spacing/sizing values for the scattered cards were supplied - Typography facts are site-wide tokens, not confirmed to be the exact ones used in this section's sentence ## 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: other - Source type: other - Structure: Central anchor element with radially dispersed floating cards - Layout: Central anchor element with radially dispersed floating cards - Styles: minimal, photographic, playful - Components: animated-icon, floating-cards, image-cards, text-cards, brief-text - Purpose: A scroll-driven interactive section where a central asterisk grows and floating cards containing images and text scatter around it. - Visual signature: A giant black asterisk surrounded by floating media cards such as a 'Brand Brief' image and 'Website Brief' text snippets. - Place on the page: 3 of 12, after Hero (`causal-so:hero-expanding-mockup`), before Feature collection (`causal-so:horizontal-feature-scroller`) ### 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": "60px", "family": "Manrope Variable", "source": "computed", "traits": "Regular", "weight": "700", "evidence": "font-10: computed CSS at 1440×1000; AI role: Manrope Variable, 60px, weight 700. Used for the prominent Hero heading.", "sampleId": "font-10", "confidence": 0.95, "lineHeight": "72px", "letterSpacing": "normal" }, { "role": "heading", "size": "50px", "family": "Manrope Variable", "source": "computed", "traits": "Regular", "weight": "650", "evidence": "font-7: computed CSS at 1440×1000; AI role: Manrope Variable, 50px, weight 650. Used for major section headings like 'Save ideas of all forms.'", "sampleId": "font-7", "confidence": 0.95, "lineHeight": "70px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "Inter Variable", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-2: computed CSS at 1440×1000; AI role: Inter Variable, 16px, weight 500. Used for standard body copy and descriptive text within UI mockups.", "sampleId": "font-2", "confidence": 0.85, "lineHeight": "22.4px", "letterSpacing": "normal" } ] } ``` ### 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": "#F9F9F9", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(249, 249, 249); AI role: rgb(249, 249, 249) serves as the primary global background color for the page body.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#1A1A1A", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(26, 26, 26); AI role: rgb(26, 26, 26) is the dominant high-contrast color used for headings and primary copy.", "sampleId": "color-4", "confidence": 0.95 }, { "hex": "#878787", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-3: computed rgb(135, 135, 135); AI role: rgb(135, 135, 135) is used for secondary information, such as navigation links and less emphasized text.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#EEEEEE", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(238, 238, 238); AI role: rgb(238, 238, 238) and similar off-whites are used as background fills for feature and testimonial cards to differentiate them from the canvas.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#000000", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-11: computed rgb(0, 0, 0); AI role: Solid black is used as the fill for primary Call To Action buttons.", "sampleId": "color-11", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large border radii, resulting in pill-shaped buttons and soft-edged rectangular cards.", "density": "Low density. The layout prioritizes open space and clear isolation of individual visual concepts or text blocks.", "evidence": "Observations of the DOM/CSS values for colors and fonts, paired with visual inspection of the layout, spacing, and shape treatments in the provided screenshots.", "borderStyle": "Mostly borderless. Separation is achieved through subtle shifts in background lightness (e.g., #F9F9F9 canvas vs #F2F2F2 card surface) rather than drawn strokes.", "buttonStyle": "High-contrast, solid fill (black), pill-shaped containers with medium-weight sans-serif text centered inside.", "cornerStyle": "Prominently rounded corners. Soft transitions on virtually all contained elements, avoiding sharp right angles.", "contentWidth": "Textual content, like headings and paragraphs, is often centrally constrained to a narrow measure for readability, while visual UI assets are allowed to break out wider.", "spacingRhythm": "Generous vertical spacing between major sections, allowing the content to breathe. Margins and paddings follow a seemingly proportional scale, contributing to the minimal aesthetic." } ``` ### 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 small asterisk icon grows larger, and various media cards (images, text snippets) animate inwards and float around it, creating a dynamic visual arrangement triggered by scrolling. (10s–19s; 98% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — As the user scrolls back up, the floating cards animate outwards and disappear, and the large asterisk icon shrinks back to a small dot. (109s–118s; 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: central icon-grows-on-scroll anchor mechanic; radial card dispersal/collapse pattern; mixed image+text card component for showcasing varied content types - Dependencies: specific photography and product screenshots used inside cards; exact card count, rotation, and position values; copy content of the centered sentence - Guidance: Keep the anchor+scatter structural pattern and the expand/collapse scroll behavior; swap in new photography, UI snippets, and copy while re-tuning card count and spacing to match the new layout footprint. ### 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 other section inspired by the design evidence titled “Scroll-expanding asterisk with floating cards”. Purpose: A scroll-driven interactive section where a central asterisk grows and floating cards containing images and text scatter around it. Structure: Central anchor element with radially dispersed floating cards. Source layout label: Central anchor element with radially dispersed floating cards. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A giant black asterisk surrounded by floating media cards such as a 'Brand Brief' image and 'Website Brief' text snippets. Components: animated-icon, floating-cards, image-cards, text-cards, brief-text. Style direction: minimal, photographic, playful. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"60px","family":"Manrope Variable","source":"computed","traits":"Regular","weight":"700","evidence":"font-10: computed CSS at 1440×1000; AI role: Manrope Variable, 60px, weight 700. Used for the prominent Hero heading.","sampleId":"font-10","confidence":0.95,"lineHeight":"72px","letterSpacing":"normal"} {"role":"heading","size":"50px","family":"Manrope Variable","source":"computed","traits":"Regular","weight":"650","evidence":"font-7: computed CSS at 1440×1000; AI role: Manrope Variable, 50px, weight 650. Used for major section headings like 'Save ideas of all forms.'","sampleId":"font-7","confidence":0.95,"lineHeight":"70px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Inter Variable","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: Inter Variable, 16px, weight 500. Used for standard body copy and descriptive text within UI mockups.","sampleId":"font-2","confidence":0.85,"lineHeight":"22.4px","letterSpacing":"normal"} Color evidence: {"hex":"#F9F9F9","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(249, 249, 249); AI role: rgb(249, 249, 249) serves as the primary global background color for the page body.","sampleId":"color-1","confidence":0.95} {"hex":"#1A1A1A","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(26, 26, 26); AI role: rgb(26, 26, 26) is the dominant high-contrast color used for headings and primary copy.","sampleId":"color-4","confidence":0.95} {"hex":"#878787","name":"muted text","role":"muted-text","source":"computed","evidence":"color-3: computed rgb(135, 135, 135); AI role: rgb(135, 135, 135) is used for secondary information, such as navigation links and less emphasized text.","sampleId":"color-3","confidence":0.9} {"hex":"#EEEEEE","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(238, 238, 238); AI role: rgb(238, 238, 238) and similar off-whites are used as background fills for feature and testimonial cards to differentiate them from the canvas.","sampleId":"color-2","confidence":0.85} {"hex":"#000000","name":"primary action","role":"primary-action","source":"computed","evidence":"color-11: computed rgb(0, 0, 0); AI role: Solid black is used as the fill for primary Call To Action buttons.","sampleId":"color-11","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: A small asterisk icon grows larger, and various media cards (images, text snippets) animate inwards and float around it, creating a dynamic visual arrangement triggered by scrolling. (98% confidence) scroll: As the user scrolls back up, the floating cards animate outwards and disappear, and the large asterisk icon shrinks back to a small dot. (95% confidence) Transfer these principles: central icon-grows-on-scroll anchor mechanic; radial card dispersal/collapse pattern; mixed image+text card component for showcasing varied content types. Dependencies: specific photography and product screenshots used inside cards; exact card count, rotation, and position values; copy content of the centered sentence. Adaptation guidance: Keep the anchor+scatter structural pattern and the expand/collapse scroll behavior; swap in new photography, UI snippets, and copy while re-tuning card count and spacing to match the new layout footprint. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.