# Pixel precision drag comparison

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 9de399f7-dca0-4a03-8cce-b2b6852f1a1b
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The orange heat overlay visualises the exact metric being claimed, so the image and the argument are the same thing.
- A two-tone display headline (black over gray) sits left-aligned above a full-bleed split image, with a small caption and tab switcher integrated into the frame.
- Huge percentage numbers in the bottom corners echo the headline scale and leave generous negative space in the middle.

What a screenshot can't show:
- The recording shows only a draggable slider moment around 29-33s, with no timing or easing details, and no CSS animations were detected.
- The caption is small: 12.5px Suisse Intl at weight 400 with 18.8px line height. Section padding is 60px top and bottom, and content widths range from 289px to 1312px.

Borrow: Make the comparison visualise the claim itself, using an overlay and large corner metrics so the proof is readable at a glance.
Leave alone: Don't copy the orange-coat illustration, the heat-map orange, or Suisse Intl; use a free neutral grotesque and your own imagery and metric.

## Classification

- Type: comparison
- Layout: Left-aligned text header over a large split-screen image block with a drag handle and prominent metric numbers at the bottom corners.
- Styles: illustrative, bold, minimal
- Confidence: 100%

## Purpose and structure

A slider comparison tool highlighting pixel-level changes between different models, featuring large overlay percentage numbers.

Visual signature: Split screen illustration of a woman in an orange coat with huge percentage numbers in the bottom corners.

## Components

- image slider
- large percentage
- floating UI
- draggable handle

## 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

- 29.0–33.0s — Interactive slider showing 'Only what you asked' in a pixel precision comparison. (90% confidence)

## Section quality

Overall: 67.41/100 (Good)
Scored coverage: 85%

- Typography: 66 — Strong two-tone display headline (black over gray) sets clear hierarchy against a small caption block; large precision percentages at the bottom echo the display scale, giving a confident, legible type system consistent with the site's tokens. Next tier: Typographic pairing is competent and clean but doesn't introduce any novel treatment beyond scale and color contrast already used elsewhere on the site.
- Composition: 72 — The left-aligned header, right-aligned explanatory caption, full-bleed split-image comparison, and bottom-corner percentage callouts form a deliberate, asymmetric grid that balances large negative space with dense data points at the edges; the heat-map overlay and tab switcher are integrated into the image frame rather than floating arbitrarily. Next tier: Needs a more unexpected spatial idea or layered depth (e.g., overlapping data visualizations, dynamic framing) to move past a well-executed but standard two-column comparison layout.
- Motion: inconclusive — Gemini only notes a generic interactive slider moment without describing specific visible transitions, easing, or state changes within the 29-33s window. Next tier: Needs timestamped detail on how the drag handle animates, how the heat-map crossfades, and how the tab switch transitions to assess motion quality.
- Content: 70 — Content is tightly fused to the visual device: the orange heat-overlay literally visualizes the metric being claimed, and the caption directly explains the methodology, making the data and image inseparable from the argument being made. Next tier: Would need more layered proof points (e.g., multiple prompts/examples, additional model comparisons) to feel like a more exhaustive, landmark-level content system rather than a single illustrative example.
- Originality: 68 — Framing precision as a measurable 'pixel heat-map' percentage is a distinctive, benchmark-like device that goes beyond a generic before/after slider, giving the section a specific point of view tied to the product's claim. Next tier: The underlying mechanic (drag-to-compare slider with overlay) is a known UI pattern; the heat-map metric is clever but not transformed into a wholly new interaction model.
- Adaptability: 60 — Structure separates cleanly into header text, tab switcher, split-image layer stack, and corner metric labels, all independently stylable components with clear roles (tablist, image layers, labels). Next tier: Reliance on three custom heat-map image assets per comparison state ties the visual payoff tightly to bespoke content, limiting reuse without equivalent processed imagery.

Strengths:
- Clear, scale-based visual hierarchy pairing a bold two-tone headline with a small explanatory caption
- Heat-map overlay directly visualizes the claimed metric, tying content and visual together convincingly
- Large percentage callouts at image corners reinforce the key statistic without needing extra UI chrome
- Clean full-bleed image treatment with large rounded corners consistent with the site's design language

Weaknesses:
- Core interaction (drag-to-compare slider) is a well-worn UI pattern not reinvented here
- No timestamped motion detail available to assess transition/easing quality of the slider or tab switch
- Single example limits the perceived rigor of the comparison claim
- Heavy dependency on custom-processed heat-map imagery limits template reuse

Why it does not reach the next tier: The section executes a familiar comparison-slider pattern with above-average polish and a genuinely clever metric visualization, but it doesn't introduce a structurally new interaction or compositional idea, and motion quality can't be verified from the evidence provided, capping it below the 'strong/memorable' threshold.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the header/caption layout and corner-label metric pattern broadly; the drag-to-compare slider and tab switcher are generic enough to reskin, but the heat-map visualization requires generating comparable processed imagery for any new dataset.

What transfers:
- Two-tone scaled headline over small caption pairing
- Full-bleed split-image comparison frame with corner metric labels
- Tab-style switcher for toggling comparison targets

Dependencies:
- Pre-rendered heat-map overlay images per comparison state
- Precise drag-slider interaction logic
- Specific precision percentage copy tied to proprietary benchmark

## 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%)
- No animation timing or easing data available to assess motion quality
- Single comparison example shown, can't verify depth of the broader interactive relationship
- Evidence doesn't confirm hover/drag feedback details beyond static layout

## 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: two-column
- Layout: Left-aligned text header over a large split-screen image block with a drag handle and prominent metric numbers at the bottom corners.
- Styles: illustrative, bold, minimal
- Components: image slider, large percentage, floating UI, draggable handle
- Purpose: A slider comparison tool highlighting pixel-level changes between different models, featuring large overlay percentage numbers.
- Visual signature: Split screen illustration of a woman in an orange coat with huge percentage numbers in the bottom corners.
- Place on the page: 17 of 22, after Feature collection (`krea-ai:C16`), before Logo strip (`krea-ai:C18`)

### Crop and composition

- Crop: 1440×1101px; aspect ratio 1.308:1
- Page bounds: 15576–16677px of 21224px
- 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": "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"
    }
  ],
  "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": "oklab(0 0 0 / 0.55)",
      "alpha": 0.5490196078431373,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 92,
      "sourceId": "color-20"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "control-background",
        "text",
        "svg-fill"
      ],
      "occurrences": 14,
      "sourceId": "color-38"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.6)",
      "alpha": 0.6,
      "appliedAs": [
        "text"
      ],
      "occurrences": 4,
      "sourceId": "color-43"
    }
  ],
  "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×1101px; block; padding {"top":"60px","left":"0px","right":"0px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 7px.
- Representative content widths: 1312, 797, 594, 451, 420, 289px.
- Layout containers: 2; cards/surfaces: 0; media elements: 7; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 15576,
      "bottom": 16677,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×1101px",
    "position": "x 0px, y 15576px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(255, 255, 255)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      7
    ],
    "representativeContentWidthsPx": [
      1312,
      797,
      594,
      451,
      420,
      289
    ]
  },
  "columns": [
    {
      "element": "div · 🍌Nano Banana ProGPT Image 2.5",
      "size": "420×60px",
      "position": "x 920px, y 15862px",
      "display": "grid",
      "template": "205.219px 205.219px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · Krea 3",
      "size": "289×21px",
      "position": "x 100px, y 16376px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "7px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · layer rival svelte-1uxh77r shown",
    "size": "1312×738px",
    "position": "x 64px, y 15826px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/diff-coat-nbpro-heat.webp"
  },
  {
    "element": "img · layer rival svelte-1uxh77r",
    "size": "1312×738px",
    "position": "x 64px, y 15826px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/diff-coat-gpt25-heat.webp"
  },
  {
    "element": "img · layer krea svelte-1uxh77r",
    "size": "1312×738px",
    "position": "x 64px, y 15826px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/diff-coat-krea3-heat.webp"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 1166px, y 15884px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 100px, y 16378px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 963px, y 16188px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 979px, y 16188px",
    "aspectRatio": 1,
    "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-2663",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 15576,
      "width": 1440,
      "height": 1101
    },
    "role": null,
    "label": "Only what you askedNot one pixel more “Change only her coat to cobalt blue.” Orange marks every pixe",
    "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": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-2679",
      "tag": "img",
      "rect": {
        "x": 64,
        "y": 15826,
        "width": 1312,
        "height": 738
      },
      "role": null,
      "label": "layer rival svelte-1uxh77r shown",
      "media": {
        "alt": "Nano Banana Pro: changed pixels",
        "src": "https://s.krea.ai/k3-landing-final/diff-coat-nbpro-heat.webp",
        "naturalWidth": 1400,
        "naturalHeight": 786
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2680",
      "tag": "img",
      "rect": {
        "x": 64,
        "y": 15826,
        "width": 1312,
        "height": 738
      },
      "role": null,
      "label": "layer rival svelte-1uxh77r",
      "media": {
        "alt": "GPT Image 2.5: changed pixels",
        "src": "https://s.krea.ai/k3-landing-final/diff-coat-gpt25-heat.webp",
        "naturalWidth": 1400,
        "naturalHeight": 786
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2681",
      "tag": "img",
      "rect": {
        "x": 64,
        "y": 15826,
        "width": 1312,
        "height": 738
      },
      "role": null,
      "label": "layer krea svelte-1uxh77r",
      "media": {
        "alt": "Krea 3: changed pixels",
        "src": "https://s.krea.ai/k3-landing-final/diff-coat-krea3-heat.webp",
        "naturalWidth": 1400,
        "naturalHeight": 786
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2676",
      "tag": "svg",
      "rect": {
        "x": 1166,
        "y": 15884,
        "width": 16,
        "height": 16
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2692",
      "tag": "svg",
      "rect": {
        "x": 100,
        "y": 16378,
        "width": 16,
        "height": 16
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2685",
      "tag": "svg",
      "rect": {
        "x": 963,
        "y": 16188,
        "width": 14,
        "height": 14
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2687",
      "tag": "svg",
      "rect": {
        "x": 979,
        "y": 16188,
        "width": 14,
        "height": 14
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 15576,
    "bottom": 16677,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2671",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 920,
        "y": 15862,
        "width": 420,
        "height": 60
      },
      "role": "tablist",
      "label": "🍌Nano Banana ProGPT Image 2.5",
      "columns": "205.219px 205.219px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2691",
      "gap": "7px",
      "tag": "span",
      "rect": {
        "x": 100,
        "y": 16376,
        "width": 289,
        "height": 21
      },
      "role": null,
      "label": "Krea 3",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      7
    ],
    "representativeContentWidthsPx": [
      1312,
      797,
      594,
      451,
      420,
      289
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 7,
    "animations": 0,
    "elementsInSection": 24
  },
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset"
    ]
  },
  "animations": [],
  "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** — Interactive slider showing 'Only what you asked' in a pixel precision comparison. (29s–33s; 90% 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: Two-tone scaled headline over small caption pairing; Full-bleed split-image comparison frame with corner metric labels; Tab-style switcher for toggling comparison targets
- Dependencies: Pre-rendered heat-map overlay images per comparison state; Precise drag-slider interaction logic; Specific precision percentage copy tied to proprietary benchmark
- Guidance: Reuse the header/caption layout and corner-label metric pattern broadly; the drag-to-compare slider and tab switcher are generic enough to reskin, but the heat-map visualization requires generating comparable processed imagery for any new dataset.

### 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 “Pixel precision drag comparison”.

Purpose: A slider comparison tool highlighting pixel-level changes between different models, featuring large overlay percentage numbers.

Structure: two-column. Source layout label: Left-aligned text header over a large split-screen image block with a drag handle and prominent metric numbers at the bottom corners.. 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: Split screen illustration of a woman in an orange coat with huge percentage numbers in the bottom corners.

Components: image slider, large percentage, floating UI, draggable handle.

Style direction: illustrative, bold, minimal.

Observed crop: 1440×1101px (1.308: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-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"}

Colors measured inside this section: {"id":"color-20","hex":"#000000","alpha":0.5490196078431373,"count":92,"contexts":[{"tag":"p","top":3182,"text":"Krea 3 Ultra is #4 on Arena's Multi-Image Edit leaderboard, with an Arena score of 1,435. Bars use t","property":"text"},{"tag":"span","top":4900,"text":"1","property":"background"},{"tag":"span","top":15690,"text":"“","property":"text"}],"cssValue":"oklab(0 0 0 / 0.55)"} {"id":"color-38","hex":"#FFFFFF","alpha":0.8,"count":14,"contexts":[{"tag":"button","top":4565,"text":"","property":"control-background"},{"tag":"button","top":15868,"text":"GPT Image 2.5","property":"text"},{"tag":"path","top":15884,"text":"","property":"svg-fill"}],"cssValue":"oklab(0.999994 0.0000455677 0.0000200868 / 0.8)"} {"id":"color-43","hex":"#FFFFFF","alpha":0.6,"count":4,"contexts":[{"tag":"button","top":8108,"text":"Gallery giant","property":"text"},{"tag":"span","top":16509,"text":"precision*","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.6)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":15576,"width":1440,"height":1101},"padding":{"top":"60px","left":"0px","right":"0px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[7],"representativeContentWidthsPx":[1312,797,594,451,420,289]}; surfaces {"radii":["999px"],"borders":[],"shadows":["rgba(255, 255, 255, 0.2) 0px 0px 0px 0.5px inset"]}; media [{"tag":"img","rect":{"x":64,"y":15826,"width":1312,"height":738},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":64,"y":15826,"width":1312,"height":738},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":64,"y":15826,"width":1312,"height":738},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1166,"y":15884,"width":16,"height":16},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: observed sequence: Interactive slider showing 'Only what you asked' in a pixel precision comparison. (90% confidence)

Transfer these principles: Two-tone scaled headline over small caption pairing; Full-bleed split-image comparison frame with corner metric labels; Tab-style switcher for toggling comparison targets.

Dependencies: Pre-rendered heat-map overlay images per comparison state; Precise drag-slider interaction logic; Specific precision percentage copy tied to proprietary benchmark.

Adaptation guidance: Reuse the header/caption layout and corner-label metric pattern broadly; the drag-to-compare slider and tab switcher are generic enough to reskin, but the heat-map visualization requires generating comparable processed imagery for any new dataset.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.