# Side-by-side speed comparison videos Schema: Design Details SECTION.md v3.2 Website: Krea Source: https://www.krea.ai/krea-3 Source section IDs: 2945fa2c-f96e-40dd-bff8-3c7ef79d9e28 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three equal-width vertical frames (about 429px wide, 572px tall) sit under a left-aligned 72px headline, so the eye compares them straight away. - Each frame carries a small badge, a progress bar, and a price and image-count caption. These details make the speed claim concrete and easy to check. - Hierarchy is clear: a heavy tight headline, 16px muted body, 14px labels, and a 12.5px footnote that admits the outputs are pre-generated, which builds trust. What a screenshot can't show: - The recording only shows side-by-side editing videos playing between about 19s and 23s, with no detail on how each progress bar fills. - The images resolve from a blur(14px), brightened, slightly desaturated, 1.04-scale state into sharp focus, using an ease-out curve (cubic-bezier 0.2, 0.7, 0.2, 1). - The headline uses -2.2px letter spacing at 72px on a 69px line height, and the section has 60px vertical and 32px side padding. Borrow: Put competing results in identical frames with a visible progress indicator, so the difference in speed is the whole message. Leave alone: Don't copy Krea's Suisse Intl typeface (use a neutral grotesque like Inter), its dog footage, or its exact blue and black palette. ## Classification - Type: comparison - Layout: Header block on top left with three equal-width vertical media containers displaying progress bars below. - Styles: minimal, photographic, bold - Confidence: 100% ## Purpose and structure A comparison block using three side-by-side video containers to demonstrate the relative generation speed of different tools. Visual signature: Three vertical frames showing a dog generating, with progress bars at the bottom of each. ## Components - video player - progress bar - heading - badge ## Typography - Display: Krea 3 Suisse Intl — 132px 500 - Heading: Krea 3 Suisse Intl — 100px 500 - Body: Suisse Intl — 20px 500 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #000000 - Primary-Action: primary action #2E6CF6 - Surface: surface #111111 - Muted-Text: muted text #737373 - Border: border #E5E5E5 ## Motion evidence - 19.0–23.0s — Side-by-side video comparisons of editing speed. (91% confidence) ## Section quality Overall: 62.24/100 (Good) Scored coverage: 85% - Typography: 62 — Large bold display headline ('Same edits / Less waiting') contrasts with smaller muted body copy and compact badge/caption type, giving clear hierarchy; but this is the same type system used site-wide, not a bespoke solution for this section. Next tier: Needs a typographic treatment unique to the comparison context (e.g., numerals/labels styled to reinforce speed data) rather than reused display/body pairing. - Composition: 66 — Three equal-width vertical frames with aligned badges, progress bars, price/count metadata, and a footnote below form a legible, grid-disciplined comparison layout with good left-aligned header counterpoint. Next tier: Layout is a straightforward three-column grid with standard badge/progress-bar placement; nothing in the spatial arrangement itself is distinctive enough to separate it from a generic benchmark table redesign. - Motion: inconclusive — Gemini's motion evidence only gives a vague 19-23s window description without specific per-element timestamped changes (no detail on how progress bars animate, speed toggle behavior, or blur-to-sharp image reveal), and the one deterministic animation (blur/brightness/scale transition on the Krea image) is a single keyframe set without clear section-wide sequencing. Next tier: Need timestamped detail on how all three videos/progress bars animate in sync and how the Real/5x/10x toggle changes playback to assess choreography quality. - Content: 64 — Content (model names, timing badges, cost-per-edit, image counts, methodology footnote) is tightly integrated into the visual comparison, giving the data real narrative purpose rather than decorative filler. Next tier: Supporting footnote text is dense and disconnected typographically from the visual comparison above it, reducing integration polish at the detail level. - Originality: 58 — The concept of synchronized side-by-side speed-race videos with progress bars is a recognizable comparison pattern (seen in many AI tool benchmarks); execution is clean but the structural idea itself is familiar. Next tier: Lacks a distinguishing visual or interaction mechanism beyond what's expected of a standard 'which AI is faster' race demo. - Adaptability: 60 — Three-column video+badge+progress-bar+caption structure is modular and clearly separable from brand skin; badges, colors, and copy could swap without breaking structure. Next tier: Dependence on bespoke pre-rendered comparison videos per tool makes the component's content layer hard to decouple from specific proprietary assets. Strengths: - Clear three-way comparison structure with consistent badge, timer, and progress-bar pattern across all columns - Strong headline-to-data hierarchy pairs bold display type with precise cost/time metadata - Transparent methodology footnote adds credibility to the comparison claim Weaknesses: - Comparison format (synchronized speed-race videos with progress bars) is a familiar benchmark pattern, not a distinctive section idea - Dense footnote text sits awkwardly disconnected from the visual region above it - Motion detail insufficiently specified to judge animation quality - Relies on bespoke per-tool videos, limiting structural reuse without new asset production Why it does not reach the next tier: ## Adaptation guidance - Effort: Medium - Guidance: Keep the column grid, badge, and progress-bar scaffold; swap in new comparison subjects, timing data, and video assets while preserving the toggle control and footnote disclosure pattern. What transfers: - Three-column equal-width comparison grid - Badge + timer + progress bar per-item pattern - Header/subcopy split layout with left headline, right description Dependencies: - Pre-rendered comparison videos per competitor tool - Specific cost-per-edit and timing data - Speed toggle control (Real/5x/10x) tied to playback logic ## 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 axis inconclusive due to lack of specific timestamped interaction detail beyond a general 19-23s window - Cannot verify exact animation timing or choreography of progress bars/video playback across all three columns - Image-only crop limits assessment of live toggle interaction behavior ## 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: comparison - Source type: comparison - Structure: Header block on top left with three equal-width vertical media containers displaying progress bars below. - Layout: Header block on top left with three equal-width vertical media containers displaying progress bars below. - Styles: minimal, photographic, bold - Components: video player, progress bar, heading, badge - Purpose: A comparison block using three side-by-side video containers to demonstrate the relative generation speed of different tools. - Visual signature: Three vertical frames showing a dog generating, with progress bars at the bottom of each. - Place on the page: 12 of 22, after Feature collection (`krea-ai:C11`), before Gallery (`krea-ai:C13`) ### Crop and composition - Crop: 1440×1117px; aspect ratio 1.289:1 - Page bounds: 10368–11485px of 21224px - 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": [ { "role": "section heading", "family": "Krea 3 Suisse Intl", "stack": "\"Krea 3 Suisse Intl\", sans-serif", "size": "72px", "weight": "500", "lineHeight": "69.1px", "letterSpacing": "-2.2px", "sample": "A new sceneThe same character", "element": "h2", "occurrences": 2, "sourceId": "font-4" }, { "role": "UI/supporting text", "family": "Suisse Intl", "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "size": "16px", "weight": "400", "lineHeight": "24px", "letterSpacing": "normal", "sample": "Editing: A pink backdrop", "element": "figcaption", "occurrences": 9, "sourceId": "font-17" }, { "role": "body/supporting copy", "family": "Suisse Intl", "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "size": "12.5px", "weight": "400", "lineHeight": "18.8px", "letterSpacing": "normal", "sample": "Pre-generated outputs, not a live benchmark. Krea 3 uses an illustrative playback time of 8s per edi", "element": "p", "occurrences": 5, "sourceId": "font-20" }, { "role": "card/subheading", "family": "Suisse Intl", "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "size": "20px", "weight": "500", "lineHeight": "24px", "letterSpacing": "-0.5px", "sample": "Change the styling, setting, and mood while keeping the face familiar. Explore character consistency", "element": "p", "occurrences": 4, "sourceId": "font-21" }, { "role": "UI/supporting text", "family": "Suisse Intl", "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "size": "14px", "weight": "400", "lineHeight": "20px", "letterSpacing": "normal", "sample": "Krea 3", "element": "span", "occurrences": 69, "sourceId": "font-27" } ], "siteRoles": [ { "role": "display", "size": "132px", "family": "Krea 3 Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.", "sampleId": "font-34", "confidence": 1, "lineHeight": "116.2px", "letterSpacing": "-2.6px" }, { "role": "heading", "size": "100px", "family": "Krea 3 Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.", "sampleId": "font-8", "confidence": 1, "lineHeight": "96px", "letterSpacing": "-3px" }, { "role": "body", "size": "20px", "family": "Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.", "sampleId": "font-19", "confidence": 0.95, "lineHeight": "28px", "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": [ { "value": "#000000", "cssValue": "rgba(0, 0, 0, 0.05)", "alpha": 0.050980392156862744, "appliedAs": [ "control-background", "background" ], "occurrences": 15, "sourceId": "color-3" }, { "value": "#000000", "cssValue": "oklab(0 0 0 / 0.6)", "alpha": 0.6, "appliedAs": [ "background", "text" ], "occurrences": 9, "sourceId": "color-28" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.82)", "alpha": 0.8196078431372549, "appliedAs": [ "background" ], "occurrences": 3, "sourceId": "color-37" }, { "value": "#000000", "cssValue": "oklab(0 0 0 / 0.1)", "alpha": 0.10196078431372549, "appliedAs": [ "background" ], "occurrences": 19, "sourceId": "color-40" }, { "value": "#2B7FFF", "cssValue": "oklch(0.623 0.214 259.815)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 12, "sourceId": "color-47" }, { "value": "#FFFFFF", "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.75)", "alpha": 0.7490196078431373, "appliedAs": [ "text" ], "occurrences": 2, "sourceId": "color-48" } ], "functionalPalette": [ { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.", "sampleId": "color-4", "confidence": 1 }, { "hex": "#2E6CF6", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.", "sampleId": "color-31", "confidence": 1 }, { "hex": "#111111", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).", "sampleId": "color-5", "confidence": 0.9 }, { "hex": "#737373", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.", "sampleId": "color-17", "confidence": 0.9 }, { "hex": "#E5E5E5", "name": "border", "role": "border", "source": "computed", "evidence": "color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.", "sampleId": "color-32", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large radii (e.g., 20px-30px) for main content blocks/images, and full-round (50% or 999px) for buttons, tabs, and tags.", "density": "Low density. The layout prioritizes large imagery and massive text over packing in information, allowing each feature to breathe.", "evidence": "Observed via pill buttons, massive display fonts (font-34, font-6), large rounded media frames, and stark black/white section transitions.", "borderStyle": "Mostly borderless, relying on background contrast (dark/light) or subtle, thin light-gray borders (e.g., color-32) for delineating form fields or specific card boundaries.", "buttonStyle": "Pill-shaped. Primary actions use solid vibrant blue (color-31) or stark contrasting black/white depending on the section's canvas. Secondary actions use subtle grays or frosted glass effects (color-18, color-38).", "cornerStyle": "Consistent use of fully rounded (pill-shaped) elements for buttons and tags, combined with distinct rounded corners on large media cards and form containers.", "contentWidth": "Responsive, centering content in a wide max-width container but allowing large media elements and bold typography to bleed towards the edges.", "spacingRhythm": "Generous vertical spacing between major sections, utilizing massive typographic scaling to define rhythm. Elements within cards have tighter, functional padding." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×1117px; block; padding {"top":"60px","left":"32px","right":"32px","bottom":"60px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 6, 8px. - Representative content widths: 1312, 797, 520, 472, 451, 429, 390, 335px. - Layout containers: 1; cards/surfaces: 0; media elements: 6; browser animations: 1. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 10368, "bottom": 11485, "pageHeight": 21224 } }, "container": { "size": "1440×1117px", "position": "x 0px, y 10368px", "display": "block", "positionMode": "static", "padding": { "top": "60px", "left": "32px", "right": "32px", "bottom": "60px" }, "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(229, 229, 229)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 6, 8 ], "representativeContentWidthsPx": [ 1312, 797, 520, 472, 451, 429, 390, 335 ] }, "columns": [ { "element": "div · Real5×10×", "size": "335×60px", "position": "x 553px, y 11141px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "3.35544e+07px" ], "borders": [], "shadows": [ "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 12px 32px -12px", "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px" ] } } ``` #### Media treatment ```json [ { "element": "img · size-full object-cover object-top svelte-13usfou", "size": "472×630px", "position": "x 484px, y 10622px", "aspectRatio": 0.7, "objectFit": "cover", "objectPosition": "50% 0%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-stuff/comparison-original.webp" }, { "element": "img · size-full object-cover object-top svelte-13usfou", "size": "472×630px", "position": "x 925px, y 10622px", "aspectRatio": 0.7, "objectFit": "cover", "objectPosition": "50% 0%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-stuff/comparison-original.webp" }, { "element": "img · develop size-full object-cover object-top svelte-13usfou", "size": "429×572px", "position": "x 64px, y 10651px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 0%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-stuff/comparison-krea-01.webp?v=k3-20261007" }, { "element": "canvas · dots svelte-13usfou", "size": "429×572px", "position": "x 64px, y 10651px", "aspectRatio": 0.8, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "source not captured" }, { "element": "svg · svg", "size": "18×18px", "position": "x 94px, y 10680px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "18×18px", "position": "x 977px, y 10680px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" } ] ``` #### Browser-exposed animation parameters ```json [ { "target": "develop size-full object-cover object-top svelte-13usfou", "delayMs": 0, "durationMs": 650, "easing": "linear", "iterations": 1, "direction": "normal", "fill": "both", "keyframes": [ { "scale": "1.04", "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "blur(14px) brightness(1.35) saturate(0.55)", "offset": 0, "composite": "auto", "computedOffset": 0 }, { "scale": "none", "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "none", "offset": 1, "composite": "replace", "computedOffset": 1 } ] } ] ``` ### 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-1420", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 10368, "width": 1440, "height": 1117 }, "role": null, "label": "Same editsLess waiting One image. Twelve identical prompts. Watch Krea 3, Nano Banana Pro, and GPT I", "border": "0px solid rgb(229, 229, 229)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "60px", "left": "32px", "right": "32px", "bottom": "60px" }, "overflow": "visible", "position": "static", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-1463", "tag": "img", "rect": { "x": 484, "y": 10622, "width": 472, "height": 630 }, "role": null, "label": "size-full object-cover object-top svelte-13usfou", "media": { "alt": "", "src": "https://s.krea.ai/k3-stuff/comparison-original.webp", "naturalWidth": 1200, "naturalHeight": 1600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.7, "objectPosition": "50% 0%" }, { "id": "ld-1483", "tag": "img", "rect": { "x": 925, "y": 10622, "width": 472, "height": 630 }, "role": null, "label": "size-full object-cover object-top svelte-13usfou", "media": { "alt": "", "src": "https://s.krea.ai/k3-stuff/comparison-original.webp", "naturalWidth": 1200, "naturalHeight": 1600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.7, "objectPosition": "50% 0%" }, { "id": "ld-1444", "tag": "img", "rect": { "x": 64, "y": 10651, "width": 429, "height": 572 }, "role": null, "label": "develop size-full object-cover object-top svelte-13usfou", "media": { "alt": "Krea 3: A cobalt-blue backdrop", "src": "https://s.krea.ai/k3-stuff/comparison-krea-01.webp?v=k3-20261007", "naturalWidth": 1200, "naturalHeight": 1600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 0%" }, { "id": "ld-1445", "tag": "canvas", "rect": { "x": 64, "y": 10651, "width": 429, "height": 572 }, "role": null, "label": "dots svelte-13usfou", "media": null, "radius": "0px", "overflow": "clip", "objectFit": "fill", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-1434", "tag": "svg", "rect": { "x": 94, "y": 10680, "width": 18, "height": 18 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1476", "tag": "svg", "rect": { "x": 977, "y": 10680, "width": 18, "height": 18 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 10368, "bottom": 11485, "pageHeight": 21224 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-1494", "gap": "normal", "tag": "div", "rect": { "x": 553, "y": 11141, "width": 335, "height": 60 }, "role": "tablist", "label": "Real5×10×", "columns": null, "display": "flex", "direction": "row" } ], "spacing": { "gapsPx": [ 6, 8 ], "representativeContentWidthsPx": [ 1312, 797, 520, 472, 451, 429, 390, 335 ] }, "coverage": { "cards": 0, "media": 6, "animations": 1, "elementsInSection": 44 }, "surfaces": { "radii": [ "3.35544e+07px" ], "borders": [], "shadows": [ "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 12px 32px -12px", "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px" ] }, "animations": [ { "id": "animation-41", "fill": "both", "easing": "linear", "target": { "id": "ld-1444", "tag": "img", "rect": { "x": 64, "y": 10651, "width": 429, "height": 572 }, "role": null, "label": "develop size-full object-cover object-top svelte-13usfou" }, "delayMs": 0, "direction": "normal", "keyframes": [ { "scale": "1.04", "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "blur(14px) brightness(1.35) saturate(0.55)", "offset": 0, "composite": "auto", "computedOffset": 0 }, { "scale": "none", "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "none", "offset": 1, "composite": "replace", "computedOffset": 1 } ], "playState": "finished", "durationMs": 650, "iterations": 1, "playbackRate": 1 } ], "capturedAt": "2026-10-31T06:25:43.715Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **observed sequence** — Side-by-side video comparisons of editing speed. (19s–23s; 91% 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: 1440px 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: Three-column equal-width comparison grid; Badge + timer + progress bar per-item pattern; Header/subcopy split layout with left headline, right description - Dependencies: Pre-rendered comparison videos per competitor tool; Specific cost-per-edit and timing data; Speed toggle control (Real/5x/10x) tied to playback logic - Guidance: Keep the column grid, badge, and progress-bar scaffold; swap in new comparison subjects, timing data, and video assets while preserving the toggle control and footnote disclosure pattern. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original comparison section inspired by the design evidence titled “Side-by-side speed comparison videos”. Purpose: A comparison block using three side-by-side video containers to demonstrate the relative generation speed of different tools. Structure: Header block on top left with three equal-width vertical media containers displaying progress bars below.. Source layout label: Header block on top left with three equal-width vertical media containers displaying progress bars below.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Three vertical frames showing a dog generating, with progress bars at the bottom of each. Components: video player, progress bar, heading, badge. Style direction: minimal, photographic, bold. Observed crop: 1440×1117px (1.289:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"132px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.","sampleId":"font-34","confidence":1,"lineHeight":"116.2px","letterSpacing":"-2.6px"} {"role":"heading","size":"100px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-3px"} {"role":"body","size":"20px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.","sampleId":"font-19","confidence":0.95,"lineHeight":"28px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.","sampleId":"color-4","confidence":1} {"hex":"#2E6CF6","name":"primary action","role":"primary-action","source":"computed","evidence":"color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.","sampleId":"color-31","confidence":1} {"hex":"#111111","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).","sampleId":"color-5","confidence":0.9} {"hex":"#737373","name":"muted text","role":"muted-text","source":"computed","evidence":"color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.","sampleId":"color-17","confidence":0.9} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.","sampleId":"color-32","confidence":0.8} Typography measured inside this section: {"id":"font-4","size":"72px","count":2,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":8386,"text":"A new sceneThe same character","property":"font"},{"tag":"h2","top":10428,"text":"Same editsLess waiting","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"69.1px","letterSpacing":"-2.2px"} {"id":"font-17","size":"16px","count":9,"family":"Suisse Intl","traits":"Regular","weight":"400","contexts":[{"tag":"figcaption","top":11272,"text":"Editing: A pink backdrop","property":"font"},{"tag":"figcaption","top":11272,"text":"Editing: A cobalt-blue backdrop","property":"font"},{"tag":"figcaption","top":11272,"text":"Editing: A cobalt-blue backdrop","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"24px","letterSpacing":"normal"} {"id":"font-20","size":"12.5px","count":5,"family":"Suisse Intl","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":11313,"text":"Pre-generated outputs, not a live benchmark. Krea 3 uses an illustrative playback time of 8s per edi","property":"font"},{"tag":"span","top":16509,"text":"precision*","property":"font"},{"tag":"span","top":16509,"text":"precision*","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"18.8px","letterSpacing":"normal"} {"id":"font-21","size":"20px","count":4,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":8447,"text":"Change the styling, setting, and mood while keeping the face familiar. Explore character consistency","property":"font"},{"tag":"span","top":8470,"text":"keeping the face familiar.","property":"font"},{"tag":"p","top":10466,"text":"One image. Twelve identical prompts. Watch Krea 3, Nano Banana Pro, and GPT Image 2.5 work through t","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"24px","letterSpacing":"-0.5px"} {"id":"font-27","size":"14px","count":69,"family":"Suisse Intl","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":5024,"text":"Krea 3","property":"font"},{"tag":"span","top":5032,"text":"Change to a copper dripper","property":"font"},{"tag":"span","top":11254,"text":"/ edit","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"20px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-3","hex":"#000000","alpha":0.050980392156862744,"count":15,"contexts":[{"tag":"button","top":2087,"text":"$0.06","property":"control-background"},{"tag":"video","top":8572,"text":"","property":"background"},{"tag":"div","top":10651,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.05)"} {"id":"color-28","hex":"#000000","alpha":0.6,"count":9,"contexts":[{"tag":"div","top":11235,"text":"","property":"background"},{"tag":"button","top":13226,"text":"“Make it snow outside the window.”","property":"text"},{"tag":"span","top":13244,"text":"","property":"background"}],"cssValue":"oklab(0 0 0 / 0.6)"} {"id":"color-37","hex":"#FFFFFF","alpha":0.8196078431372549,"count":3,"contexts":[{"tag":"div","top":10667,"text":"Krea 3Krea 3 < 8 sec<8s","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.82)"} {"id":"color-40","hex":"#000000","alpha":0.10196078431372549,"count":19,"contexts":[{"tag":"span","top":3278,"text":"","property":"background"},{"tag":"div","top":11235,"text":"","property":"background"}],"cssValue":"oklab(0 0 0 / 0.1)"} {"id":"color-47","hex":"#2B7FFF","alpha":1,"count":12,"contexts":[{"tag":"span","top":434,"text":"3","property":"background"},{"tag":"div","top":11235,"text":"","property":"background"}],"cssValue":"oklch(0.623 0.214 259.815)"} {"id":"color-48","hex":"#FFFFFF","alpha":0.7490196078431373,"count":2,"contexts":[{"tag":"button","top":11147,"text":"Real","property":"text"}],"cssValue":"oklab(0.999994 0.0000455678 0.0000200868 / 0.75)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":10368,"width":1440,"height":1117},"padding":{"top":"60px","left":"32px","right":"32px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,8],"representativeContentWidthsPx":[1312,797,520,472,451,429,390,335]}; surfaces {"radii":["3.35544e+07px"],"borders":[],"shadows":["rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 12px 32px -12px","rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px"]}; media [{"tag":"img","rect":{"x":484,"y":10622,"width":472,"height":630},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 0%","radius":"0px"},{"tag":"img","rect":{"x":925,"y":10622,"width":472,"height":630},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 0%","radius":"0px"},{"tag":"img","rect":{"x":64,"y":10651,"width":429,"height":572},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 0%","radius":"0px"},{"tag":"canvas","rect":{"x":64,"y":10651,"width":429,"height":572},"aspectRatio":0.8,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-1444","tag":"img","rect":{"x":64,"y":10651,"width":429,"height":572},"role":null,"label":"develop size-full object-cover object-top svelte-13usfou"},"delayMs":0,"durationMs":650,"easing":"linear","keyframes":[{"scale":"1.04","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)","filter":"blur(14px) brightness(1.35) saturate(0.55)","offset":0,"composite":"auto","computedOffset":0},{"scale":"none","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)","filter":"none","offset":1,"composite":"replace","computedOffset":1}]}] Motion evidence: observed sequence: Side-by-side video comparisons of editing speed. (91% confidence) Transfer these principles: Three-column equal-width comparison grid; Badge + timer + progress bar per-item pattern; Header/subcopy split layout with left headline, right description. Dependencies: Pre-rendered comparison videos per competitor tool; Specific cost-per-edit and timing data; Speed toggle control (Real/5x/10x) tied to playback logic. Adaptation guidance: Keep the column grid, badge, and progress-bar scaffold; swap in new comparison subjects, timing data, and video assets while preserving the toggle control and footnote disclosure pattern. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.