# Sticky scroll feature showcase Schema: Design Details SECTION.md v3.2 Website: Linearity Source: https://www.linearity.io/ Source section IDs: gap-12a63c6c-13972-25735 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A continuous green curve threads through every sticky panel, so a very long scroll reads as one connected story instead of separate blocks. - Large display statements sit against small uppercase labels and body copy, so the scale contrast alone sets a clear reading order on the black canvas. - Real dashboards, charts and campaign assets such as album covers and event posters ground each claim in concrete product use. What a screenshot can't show: - In the recording, the 'Others' and 'Linearity' graphics animate at about 24-26s, then assets slide up for each use case from about 26-33s. - No font sizes, spacing or easing values were measured, so exact type scale and timing are unknown. Borrow: Run one continuous graphic line through a sequence of sticky split panels so different features feel like one narrative. Leave alone: Don't copy the black and vivid green palette, the sweeping green connector itself, or the AcidGrotesk and Inter pairing; a free neutral grotesque works as a substitute. ## Classification - Type: features - Layout: Alternating split layouts that transition through scroll-triggered animations. - Styles: bold, geometric, photographic - Confidence: 90% ## Purpose and structure A massive scrolling presentation section linking multiple sub-features, including UI demonstrations, performance charts, and parallax image grids. Visual signature: Continuous dark background with vibrant green sweeping accents and dynamic, scroll-driven visual transformations. ## Components - sticky-text - animated-ui-mockups - parallax-images - interactive-menu - data-visualization ## Typography - Display: AcidGrotesk — 75.4px 400 - Heading: AcidGrotesk — 34.3px 500 - Body: Inter — 13.7px 400 - Mono: Inter — 10.3px 500 ## Functional palette - Canvas: canvas #000000 - Text: text #FFFFFF - Primary-Action: primary action #FF4800 ## Motion evidence - 24.0–26.0s — The graphical elements representing 'Others' and 'Linearity' animate. (95% confidence) - 26.0–33.0s — As the user scrolls down, various design assets appear and slide up, demonstrating different use cases like Marketing, Social, Ecommerce, Performance, and Events. (95% confidence) ## Section quality Overall: 61.70/100 (Good) Scored coverage: 100% - Typography: 62 — Clear hierarchy between large display statements ('Your brand, built in.', 'More campaigns. Same team.', 'One brand. Every asset/team.') and small uppercase labels/body copy, using consistent AcidGrotesk/Inter pairing. Type is functional but plays a secondary role to the imagery and sweeping line graphic; no distinctive typographic treatment beyond scale contrast. Next tier: Needs a more idiosyncratic type treatment (e.g. kinetic type, custom ligatures, unusual scale jumps) rather than standard large-statement/small-label pattern to earn strong/memorable. - Composition: 68 — Alternating split layout with a continuous green line motif threading through sticky panels creates a genuinely cohesive visual spine across a very long scroll; UI mockups, campaign cards, and parallax images are composed with consistent padding and alignment against the dark canvas. The connecting curve device is a smart unifying idea that ties disparate sub-features together. Next tier: To reach strong/memorable the composition would need tighter visual rhyme between each sub-panel (currently feels like a long sequential list of similar card+text blocks) and more intentional variation in scale/framing rather than repeating the same split pattern many times. - Motion: 58 — Gemini confirms scroll-triggered animation of graphical elements (24-26s) and sliding-up asset reveals across use cases (26-33s), consistent with the sticky-scroll pattern. This is a functional, competent scroll-driven reveal but nothing beyond standard slide/appear choreography is evidenced. Next tier: Would need distinctive, hard-to-substitute motion detail (e.g. the green line itself animating/drawing in sync with scroll, mockups morphing) explicitly confirmed with timestamps to move past competent. - Content: 60 — Dashboard mockups, data visualizations, and real campaign asset examples (album covers, event posters) are integrated into the narrative of brand/campaign management, giving the section concrete product grounding rather than generic stock imagery. Next tier: Content feels like a long inventory of similar mockup+copy pairs; tighter curation and fewer repeated motifs would be needed to feel essential rather than exhaustive. - Originality: 65 — The continuous sweeping green connector threading through a sticky-scroll sequence of split panels is a distinctive structural idea that goes beyond a generic alternating-feature-list, giving the section a identifiable signature. Next tier: The underlying panel pattern (text left/right, mockup card, pill buttons) is otherwise a common SaaS feature-showcase template; the connector alone isn't enough to reach strong/memorable without further differentiation in each sub-scene. - Adaptability: 55 — The sticky-text/mockup/connector-line structure is identifiable and could be separated from the specific brand assets and dark/green skin, but the sheer length and many interdependent sub-scenes make isolating a reusable component nontrivial. Next tier: Clear modular boundaries between the connector animation, sticky panels, and asset cards would need explicit documentation to raise confidence in reuse. Strengths: - Continuous sweeping line motif visually threading a long multi-scene scroll into one coherent idea - Consistent dark-canvas/green-accent/orange-CTA system maintained across many sub-panels - Concrete product mockups and real campaign assets ground the section in actual use cases rather than abstract placeholders Weaknesses: - Underlying split-panel pattern repeats many times without much variation, risking monotony over such a long scroll - Typography hierarchy is functional but not distinctive - Motion evidence only confirms standard slide-up/appear reveals, nothing proven beyond competent choreography Why it does not reach the next tier: The connecting line device and dark/green system give the section a clear identity, but the repeated split-panel template, standard reveal motion, and conventional typography keep it at a polished-but-familiar level rather than memorable. ## Adaptation guidance - Effort: High - Guidance: Recreate the sticky-panel + connecting-line skeleton as a reusable pattern, then swap in new mockups, copy, and an accent color/line path matching the new brand; the long scroll length and many unique sub-scenes mean substantial rebuild effort even though the core structural idea is portable. What transfers: - Alternating sticky split-panel layout with scroll-triggered reveals - Continuous connecting-line motif unifying sequential sub-scenes - Dark canvas with single accent color and pill-shaped CTAs Dependencies: - Specific brand mockup/UI assets shown in the panels - Exact path/animation of the green sweeping line - Original campaign/photography assets used as content examples ## 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 only on two Gemini-confirmed timestamp windows out of a very long section; most of the scroll's actual animation behavior is unverified - Crop is an extremely tall stitched capture, making precise spacing/alignment judgments imprecise - No deterministic data on radius/shadow/animation-easing specific to this section, limiting composition/motion confidence ## 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: two-column - Layout: Alternating split layouts that transition through scroll-triggered animations. - Styles: bold, geometric, photographic - Components: sticky-text, animated-ui-mockups, parallax-images, interactive-menu, data-visualization - Purpose: A massive scrolling presentation section linking multiple sub-features, including UI demonstrations, performance charts, and parallax image grids. - Visual signature: Continuous dark background with vibrant green sweeping accents and dynamic, scroll-driven visual transformations. - Place on the page: 7 of 11, after Feature collection (`linearity-io:features_brand_control`), before Pricing (`linearity-io:pricing_table_dark`) ### 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": "75.4px", "family": "AcidGrotesk", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-22: computed CSS at 1440×1000; AI role: AcidGrotesk at 75.4px with tight letter-spacing (-0.8px) for major impactful statements.", "sampleId": "font-22", "confidence": 1, "lineHeight": "75.4px", "letterSpacing": "-0.8px" }, { "role": "heading", "size": "34.3px", "family": "AcidGrotesk", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-19: computed CSS at 1440×1000; AI role: AcidGrotesk at 34.3px used for section headers and the hero text cycle.", "sampleId": "font-19", "confidence": 0.95, "lineHeight": "39.8px", "letterSpacing": "-0.3px" }, { "role": "body", "size": "13.7px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Inter at 13.7px used for standard descriptive paragraphs.", "sampleId": "font-6", "confidence": 1, "lineHeight": "20.6px", "letterSpacing": "normal" }, { "role": "mono", "size": "10.3px", "family": "Inter", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: Inter at 10.3px, uppercase with 2.3px letter-spacing, functioning as eyebrows and small labels.", "sampleId": "font-8", "confidence": 0.85, "lineHeight": "14.4px", "letterSpacing": "2.3px" } ] } ``` ### 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-1: computed rgb(0, 0, 0); AI role: Pure black #000000 used as the primary background color for the 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: Solid white #FFFFFF used for primary headings and body copy.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#FF4800", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-17: computed rgb(255, 72, 0); AI role: #FF4800 used for prominent 'Contact sales' buttons and active states.", "sampleId": "color-17", "confidence": 0.95 } ] } ``` ### Design tokens ```json { "radius": "Buttons and badges use max radius (border-radius: 9999px equivalents), while product UI mockups use consistent, large, smooth radii.", "density": "Loose and airy, prioritizing visual impact and large typography over high information density.", "evidence": "Observed via DOM structures for buttons (.pill-shape), computed styles for background colors, and padding/margin layout patterns across sections.", "borderStyle": "Hairline (1px), translucent white borders on dark elements to create depth without solid lines.", "buttonStyle": "Pill-shaped, either solid high-contrast (orange) or glassmorphic (dark translucent with white text/border).", "cornerStyle": "Distinctively dual-natured: fully rounded (pill-shaped) for interactive elements like buttons and tags, and heavily rounded rectangles (e.g., 16-24px) for cards and UI mockups.", "contentWidth": "Content is typically centered in a max-width container, though background effects and parallax grids bleed to the edges.", "spacingRhythm": "Generous vertical rhythm with large gaps between sections to allow background gradients to show. Content blocks are padded with ample negative space." } ``` ### 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. **observed sequence** — The graphical elements representing 'Others' and 'Linearity' animate. (24s–26s; 95% 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 down, various design assets appear and slide up, demonstrating different use cases like Marketing, Social, Ecommerce, Performance, and Events. (26s–33s; 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: high - What transfers: Alternating sticky split-panel layout with scroll-triggered reveals; Continuous connecting-line motif unifying sequential sub-scenes; Dark canvas with single accent color and pill-shaped CTAs - Dependencies: Specific brand mockup/UI assets shown in the panels; Exact path/animation of the green sweeping line; Original campaign/photography assets used as content examples - Guidance: Recreate the sticky-panel + connecting-line skeleton as a reusable pattern, then swap in new mockups, copy, and an accent color/line path matching the new brand; the long scroll length and many unique sub-scenes mean substantial rebuild effort even though the core structural idea is portable. ### 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 “Sticky scroll feature showcase”. Purpose: A massive scrolling presentation section linking multiple sub-features, including UI demonstrations, performance charts, and parallax image grids. Structure: two-column. Source layout label: Alternating split layouts that transition through scroll-triggered animations.. 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: Continuous dark background with vibrant green sweeping accents and dynamic, scroll-driven visual transformations. Components: sticky-text, animated-ui-mockups, parallax-images, interactive-menu, data-visualization. Style direction: bold, geometric, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"75.4px","family":"AcidGrotesk","source":"computed","traits":"Regular","weight":"400","evidence":"font-22: computed CSS at 1440×1000; AI role: AcidGrotesk at 75.4px with tight letter-spacing (-0.8px) for major impactful statements.","sampleId":"font-22","confidence":1,"lineHeight":"75.4px","letterSpacing":"-0.8px"} {"role":"heading","size":"34.3px","family":"AcidGrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: AcidGrotesk at 34.3px used for section headers and the hero text cycle.","sampleId":"font-19","confidence":0.95,"lineHeight":"39.8px","letterSpacing":"-0.3px"} {"role":"body","size":"13.7px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Inter at 13.7px used for standard descriptive paragraphs.","sampleId":"font-6","confidence":1,"lineHeight":"20.6px","letterSpacing":"normal"} {"role":"mono","size":"10.3px","family":"Inter","source":"computed","traits":"uppercase","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: Inter at 10.3px, uppercase with 2.3px letter-spacing, functioning as eyebrows and small labels.","sampleId":"font-8","confidence":0.85,"lineHeight":"14.4px","letterSpacing":"2.3px"} Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Pure black #000000 used as the primary background color for the 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: Solid white #FFFFFF used for primary headings and body copy.","sampleId":"color-2","confidence":1} {"hex":"#FF4800","name":"primary action","role":"primary-action","source":"computed","evidence":"color-17: computed rgb(255, 72, 0); AI role: #FF4800 used for prominent 'Contact sales' buttons and active states.","sampleId":"color-17","confidence":0.95} 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: observed sequence: The graphical elements representing 'Others' and 'Linearity' animate. (95% confidence) scroll: As the user scrolls down, various design assets appear and slide up, demonstrating different use cases like Marketing, Social, Ecommerce, Performance, and Events. (95% confidence) Transfer these principles: Alternating sticky split-panel layout with scroll-triggered reveals; Continuous connecting-line motif unifying sequential sub-scenes; Dark canvas with single accent color and pill-shaped CTAs. Dependencies: Specific brand mockup/UI assets shown in the panels; Exact path/animation of the green sweeping line; Original campaign/photography assets used as content examples. Adaptation guidance: Recreate the sticky-panel + connecting-line skeleton as a reusable pattern, then swap in new mockups, copy, and an accent color/line path matching the new brand; the long scroll length and many unique sub-scenes mean substantial rebuild effort even though the core structural idea is portable. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.