# Sticky Video with UI Overlays Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: 50d36306-c3e9-4313-bf1a-d1755fbcfbf2 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A tall vertical photo sits in a left media column while short text blurbs scroll on the right, so the image stays put and the copy does the moving. - The white overlay card, an overdraft slider, lands near the card-and-terminal contact point, which ties the product feature to a real moment. - Generous negative space around short bold headlines and small link labels keeps the text easy to scan beside a busy photo. What a screenshot can't show: - In the recording, balance and spending-insight popups slide in and out of the video frame between about 18 and 23 seconds as you scroll. - Headline text measures 18px at weight 700 with a 26.1px line height, and gaps are tight at about 10px; content widths run 1072, 407 and 270px. Borrow: Pin one tall piece of real-life media and let small product UI cards enter and leave over it as the text scrolls, so each feature is shown in context. Leave alone: Don't copy the Modena typeface, the cream and deep purple palette with lilac surfaces, or the card-payment footage; use a similar geometric sans and your own imagery. ## Classification - Type: feature-card - Layout: Split layout with a tall media column on the left and scrolling text blurbs on the right. - Styles: photographic - Confidence: 95% ## Purpose and structure A tall scrolling section featuring a vertical video with sticky text descriptions and floating UI elements overlaying the video. Visual signature: A tall vertical video showing a person paying with a card, overlaid with white UI popups, flanked by scrolling text. ## Components - vertical video player - floating UI popups - scrolling text descriptions - link arrows ## Typography - Display: modena — 80px 800 - Heading: modena — 56px 800 - Body: suisse — 16px 400 ## Functional palette - Canvas: canvas #FCF7F2 - Primary-Action: primary action #40196D - Text: text #1B161D - Muted-Text: muted text #827D76 - Surface: surface #EED3F8 ## Motion evidence - 18.0–23.0s — While scrolling through a video background, UI elements like balance pop-ups and spending insights slide in and out of the video frame. (88% confidence) ## Section quality Overall: 61.10/100 (Good) Scored coverage: 100% - Typography: 58 — Typography uses the site's large bold uppercase/heading system consistently for feature titles with small link text below, but within this crop it's limited to two short headline lines and a link label—functional but not distinctive here. Next tier: Needs more typographic variety or hierarchy work visible within this specific crop (e.g. secondary descriptive copy, numeral treatment) to justify a higher score. - Composition: 66 — Strong split layout: a tall full-bleed lifestyle photo/video with a floating white UI card overlay on the left, paired with right-aligned sticky-feeling text blurbs with generous negative space. The overlay card is well-placed compositionally against the photo's contact point (card/terminal). Next tier: The right column text blocks feel sparse and disconnected from the left visual rhythm; tighter alignment or a connecting device between the image event and the text would push this toward strong/memorable. - Motion: 56 — Gemini supplies one timestamped motion moment (18–23s) showing UI popups sliding in/out of the video frame while scrolling, which is a real but fairly standard reveal/parallax-style interaction. Next tier: Only a single generic slide-in/out moment is evidenced; no distinct choreography, easing character, or multi-stage sequencing is described to earn a higher tier. - Content: 62 — The UI popup (Overdraft Limit slider) is contextually tied to the real-world photo of a card payment, reinforcing the feature narrative (spend above balance) in a concrete, product-specific way. Next tier: Integration is a single well-placed popup; deeper content orchestration (e.g. multiple synced overlays per scroll stage) isn't evidenced strongly enough in this crop. - Originality: 60 — The sticky-video-with-floating-UI-card pattern is a recognizable fintech marketing trope (humanized lifestyle photography + app screenshot overlay), executed competently but not with a distinguishing twist. Next tier: Lacks a unique compositional or interactive idea beyond the now-common overlay-on-lifestyle-photo pattern to be memorable versus familiar. - Adaptability: 64 — Structure separates cleanly into media column (video/image), floating card component, and text/link blocks, each independently stylable per the deterministic DOM evidence (separate video elements, text containers, link rects). Next tier: Dependency on a specific product UI card design (balance, slider) ties the overlay content tightly to the fintech product, requiring rebuild work rather than simple skinning. Strengths: - Floating UI card is believably composited into the photographic scene at a narratively relevant point (card tap) - Clean separation between tall media column and right-aligned sticky text creates clear reading path - Generous whitespace and restrained palette keep focus on photography and overlay Weaknesses: - Right-column text blocks feel visually thin and disconnected from the photo's energy - Only one motion moment is evidenced, limiting judgment of overall choreography - Pattern (lifestyle photo + UI popup overlay) is a common fintech marketing convention without a unique twist Why it does not reach the next tier: The section executes a familiar sticky-media-with-overlay pattern competently with good contextual placement, but lacks a distinctive compositional idea, richer motion choreography, or deeper visual connection between the text column and the media to reach strong/memorable territory. ## Adaptation guidance - Effort: Medium - Guidance: Rebuild the two-column grid with a pinned/sticky left media slot and independently scrolling right text list; swap in new product UI card designs and photography/video assets matched to the target brand's actual features. What transfers: - Split layout with sticky/tall media column and scrolling text blurbs - Floating UI card overlay technique on top of lifestyle photography/video - Link-arrow micro-interaction pattern for feature CTAs Dependencies: - Specific product UI mockups (balance slider card) tailored to the brand's actual app features - Branded photography depicting real-world use cases - Custom video assets per feature for the vertical video player ## 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 only a single Gemini-supplied timestamped moment; full animation choreography (easing, staging, triggers) is unknown - No visible evidence of hover/interaction states beyond the described slide motion - Deterministic facts limited to one breakpoint (1440px desktop); mobile/tablet adaptation behavior unverified ## 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: feature-card - Structure: two-column - Layout: Split layout with a tall media column on the left and scrolling text blurbs on the right. - Styles: photographic - Components: vertical video player, floating UI popups, scrolling text descriptions, link arrows - Purpose: A tall scrolling section featuring a vertical video with sticky text descriptions and floating UI elements overlaying the video. - Visual signature: A tall vertical video showing a person paying with a card, overlaid with white UI popups, flanked by scrolling text. - Place on the page: 7 of 11, after Feature collection (`kuda-com:C06_feature_grid`), before Feature collection (`kuda-com:C08_feature_grid`) ### Crop and composition - Crop: 1440×2254px; aspect ratio 0.639:1 - Page bounds: 5339–7593px of 11487px - 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": [ { "role": "section heading", "family": "modena", "stack": "modena, sans-serif", "size": "18px", "weight": "700", "lineHeight": "26.1px", "letterSpacing": "normal", "sample": "The digital bank built for Nigerians", "element": "h1", "occurrences": 5, "sourceId": "font-1" } ], "siteRoles": [ { "role": "display", "size": "80px", "family": "modena", "source": "computed", "traits": "uppercase", "weight": "800", "evidence": "font-4: computed CSS at 1440×1000; AI role: The largest font at 80px, weight 800, uppercase, used for high-impact numbers.", "sampleId": "font-4", "confidence": 1, "lineHeight": "76px", "letterSpacing": "normal" }, { "role": "heading", "size": "56px", "family": "modena", "source": "computed", "traits": "uppercase", "weight": "800", "evidence": "font-2: computed CSS at 1440×1000; AI role: 56px, weight 800, uppercase, used for primary section titles.", "sampleId": "font-2", "confidence": 1, "lineHeight": "56px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "suisse", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 16px Suisse sans-serif used for standard informational text and descriptions.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "23.2px", "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": "#FCF7F2", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(252, 247, 242); AI role: The dominant off-white background color (#FCF7F2) used across the page body.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#40196D", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-1: computed rgb(64, 25, 109); AI role: Deep purple (#40196D) used for the primary CTA buttons and brand emphasis.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#1B161D", "name": "text", "role": "text", "source": "computed", "evidence": "color-6: computed rgb(27, 22, 29); AI role: Dark color (#1B161D) used for primary body text and most headings on light backgrounds.", "sampleId": "color-6", "confidence": 0.9 }, { "hex": "#827D76", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-11: computed rgb(130, 125, 118); AI role: Grey (#827D76) used for secondary text elements like 'Fully licensed by the CBN'.", "sampleId": "color-11", "confidence": 0.8 }, { "hex": "#EED3F8", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(238, 211, 248); AI role: Lighter purple (#EED3F8) used as a background for the footer and secondary buttons.", "sampleId": "color-3", "confidence": 0.7 } ] } ``` ### Design tokens ```json { "radius": "Small border-radius (approx 4-8px) on primary buttons; medium to large border-radius on floating UI cards and feature blocks.", "density": "Low density, breathable layout utilizing large typographic scales and ample whitespace.", "evidence": "Visual inspection reveals an off-white canvas with dark purple functional accents. Structural containers use large corner radii, while primary typography is oversized and highly legible.", "borderStyle": "Mostly borderless, relying heavily on color contrast to define shapes and containers.", "buttonStyle": "Solid filled backgrounds with contrasting text; primary buttons use the brand purple.", "cornerStyle": "Mixed: mostly rounded corners on interactive elements and cards, with hard edges on full-bleed background containers.", "contentWidth": "Centered constrained text content mixed with full-width bleeding backgrounds and media.", "spacingRhythm": "Generous vertical spacing between major sections, with tighter grouping inside feature cards." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×2254px; block; padding {"top":"54px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 10px. - Representative content widths: 1072, 407, 270px. - Layout containers: 2; cards/surfaces: 0; media elements: 7; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 5339, "bottom": 7593, "pageHeight": 11487 } }, "container": { "size": "1440×2254px", "position": "x 0px, y 5339px", "display": "block", "positionMode": "static", "padding": { "top": "54px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px solid rgb(27, 22, 29)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 10 ], "representativeContentWidthsPx": [ 1072, 407, 270 ] }, "columns": [ { "element": "div · splide__list", "size": "407×332px", "position": "x 333px, y 5555px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" }, { "element": "div · Spend above your balance with Kuda’s Overdraft Explore Overdrafts Invest in top US stocks from as li", "size": "270×103px", "position": "x 1121px, y 5670px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · attachment-full size-full entered lazyloaded", "size": "1072×2200px", "position": "x 0px, y 5393px", "aspectRatio": 0.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI06732-scaled.webp" }, { "element": "video · wp-block-acf-key-features-slider__video-player", "size": "407×332px", "position": "x 333px, y 5555px", "aspectRatio": 1.2, "objectFit": "contain", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/08/credit-update.mp4" }, { "element": "video · wp-block-acf-key-features-slider__video-player", "size": "407×332px", "position": "x 333px, y 5555px", "aspectRatio": 1.2, "objectFit": "contain", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/Investment-stocks.mp4" }, { "element": "video · wp-block-acf-key-features-slider__video-player", "size": "407×332px", "position": "x 333px, y 5555px", "aspectRatio": 1.2, "objectFit": "contain", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/Spend-category-budget-and-insights.mp4" }, { "element": "svg · svg", "size": "6×10px", "position": "x 1319px, y 5756px", "aspectRatio": 0.6, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "6×10px", "position": "x 1325px, y 5756px", "aspectRatio": 0.6, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "6×10px", "position": "x 1326px, y 5756px", "aspectRatio": 0.6, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" } ] ``` #### 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 { "root": { "id": "ld-580", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 5339, "width": 1440, "height": 2254 }, "role": null, "label": "