# Before and after comparison slider

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 2b3cb942-a7ac-4dfa-a837-1ffa66867419
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A centered header, a pill tab row and one oversized image card create a clear top-to-bottom focal path, with the demo as the hero.
- The before/after pair (plain photo vs. neon relit scene) shows the feature's value at a glance, and the lowercase prompt caption card at bottom-center makes the use case believable.
- Side panels recede in the carousel to frame the central card, while the white canvas, black text and muted grey keep attention on the imagery.

What a screenshot can't show:
- The recording showed no motion, so drag response, carousel transitions and timing are unknown.
- Measured type was not captured; only the spacing is known: 6–8px gaps, 60px section padding top and bottom, and card widths from 1376px down to 256px.

Borrow: Put one large, easily understood interactive comparison at the center, framed by quiet UI and receding neighbours, so the product's effect is the focus.
Leave alone: Don't copy Krea's neon relit photo pair, its exact prompt caption card or its curved carousel panels; use your own imagery and a free neutral grotesque sans for the tight display headline.

## Classification

- Type: features
- Layout: Centered header, filter tabs, and a large horizontal carousel featuring images with a central draggable vertical divider.
- Styles: photographic, minimal
- Confidence: 100%

## Purpose and structure

An interactive before-and-after image comparison slider inside a horizontal carousel, allowing users to wipe between initial and edited states.

Visual signature: Large split image showing a plain photo and a neon lit edited version with a line down the middle.

## Components

- image slider
- tab
- button
- 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

- No section-specific authored motion was established.

## Section quality

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

- Typography: 62 — Large, tightly-tracked display headline (100px, -3px tracking) paired with a small pill tab row and a lowercase prompt caption shows clear hierarchy and restraint, but the type itself is a standard oversized sans treatment seen widely in AI/product sites. Next tier: Needs a more distinctive typographic choice or pairing beyond scale and negative tracking to feel memorable rather than templated.
- Composition: 68 — Centered header over a pill tab bar over a large central before/after card flanked by curved, receding carousel panels creates strong focal hierarchy and a satisfying perspective frame; the prompt caption card anchored at the bottom-center adds a believable layered UI feel. Next tier: The side panels and center card follow a fairly common curved-carousel pattern; tighter alignment or a more unexpected framing device would push this into strong/memorable territory.
- Motion: inconclusive — No timestamped motion evidence was supplied (motion_moments and animations are empty), so the drag-to-compare and carousel transitions cannot be scored. Next tier: Requires timestamped observation of the slider drag, tab switch, and carousel transition behavior to assess motion quality.
- Content: 65 — The before/after pairing is well-matched to the feature (relighting a scene) and the overlaid prompt text grounds the demo in a believable use case, making content and interaction feel purposeful rather than decorative. Next tier: Content relies on a single strong example; demonstrating variety or outcome context beyond one image pair would strengthen integration.
- Originality: 58 — Before/after sliders inside carousels are an extremely common pattern for AI image-editing products; the curved side-panel treatment adds a slight twist but the core interaction and layout are not novel. Next tier: Needs a genuinely distinct interaction or layout idea beyond the now-standard wipe-compare-in-carousel format to be considered original.
- Adaptability: 60 — Structure separates cleanly into header, tab filter, and slider/carousel component with clear deterministic bounds, radii, and image slots, making the skeleton reusable, though it depends on paired before/after image assets per tab. Next tier: Full separation would need confirmation that the draggable divider and tab-switching logic are decoupled from the specific image content, which isn't evidenced here.

Strengths:
- Clear three-tier hierarchy: headline, filter tabs, interactive comparison card
- Curved carousel framing creates visual depth without extra ornamentation
- Prompt caption overlay contextualizes the before/after as a real editing use case

Weaknesses:
- Before/after wipe-compare-in-carousel is a common pattern in this product category
- No motion evidence supplied, so core interaction quality is unverifiable
- Typography relies on scale/tracking alone rather than a distinctive treatment

Why it does not reach the next tier: The section is well-organized and purposeful but leans on a familiar interaction pattern (drag-to-compare) and conventional oversized display type; without verified motion quality or a more distinctive layout/typographic idea, it stays in the good/competent range rather than strong or memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the header-tabs-centered card skeleton and curved carousel framing as a generic structure; swap in any paired comparison imagery and prompt text, but implement and test the drag-compare interaction independently since its motion quality is unverified here.

What transfers:
- Centered header + pill tab filter + central media card layout
- Curved/receding side-panel carousel framing
- Floating prompt-caption card pattern anchored to the media

Dependencies:
- Paired before/after image assets for each tab
- Draggable divider interaction logic (unverified behavior)
- Specific aspect ratios and image crops used in the carousel

## 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/interaction quality could not be assessed due to lack of timestamped animation data
- Only one source crop was analyzed, so variation across the carousel's other tabs is unknown
- Exact font rendering and color values are approximations from computed CSS, not fully confirmed deterministic facts

## 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: centered single-column
- Layout: Centered header, filter tabs, and a large horizontal carousel featuring images with a central draggable vertical divider.
- Styles: photographic, minimal
- Components: image slider, tab, button, floating UI, draggable handle
- Purpose: An interactive before-and-after image comparison slider inside a horizontal carousel, allowing users to wipe between initial and edited states.
- Visual signature: Large split image showing a plain photo and a neon lit edited version with a line down the middle.
- Place on the page: 16 of 22, after Gallery (`krea-ai:C15`), before Comparison (`krea-ai:C17`)

### Crop and composition

- Crop: 1440×1073px; aspect ratio 1.342:1
- Page bounds: 14503–15576px of 21224px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### 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": "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": [],
  "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×1074px; block; padding {"top":"60px","left":"0px","right":"0px","bottom":"60px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 6, 8px.
- Representative content widths: 1376, 1063, 900, 725, 534, 331, 288, 256px.
- Layout containers: 1; cards/surfaces: 2; media elements: 12; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 14503,
      "bottom": 15576,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×1074px",
    "position": "x 0px, y 14502px",
    "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": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      1376,
      1063,
      900,
      725,
      534,
      331,
      288,
      256
    ]
  },
  "columns": [
    {
      "element": "div · Day to nightBlockoutSketchRe-skinNew skyGreen screen",
      "size": "725×60px",
      "position": "x 357px, y 14743px",
      "display": "inline-flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "button · absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "size": "1063×600px",
      "position": "x 1190px, y 14839px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "button · absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "size": "900×600px",
      "position": "x -650px, y 14839px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "999px",
      "3.35544e+07px",
      "24px"
    ],
    "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, 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, oklab(0 0 0 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · absolute inset-0 size-full object-cover",
    "size": "1063×1520px",
    "position": "x 1190px, y 14380px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-gam-05-output-png-1024.webp"
  },
  {
    "element": "img · absolute inset-0 size-full object-cover",
    "size": "900×1262px",
    "position": "x -650px, y 14509px",
    "aspectRatio": 0.7,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-09-output-png-1024.webp"
  },
  {
    "element": "img · absolute inset-0 size-full object-cover",
    "size": "900×600px",
    "position": "x 270px, y 14839px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-17-output-png-1024.webp"
  },
  {
    "element": "img · input-layer absolute inset-0 size-full object-cover svelte-tsb0t5",
    "size": "900×600px",
    "position": "x 270px, y 14839px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-17-ref-1-png-1024.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 106px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 30%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-fas-03-output-png.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 106px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 30%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-fas-03-ref-1-png-256.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 456px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-01-output-png.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 456px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-01-ref-1-png-256.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 805px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 30%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-arc-06-output-png.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 805px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 30%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-arc-06-ref-1-png-256.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 1116px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 30%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-con-22-output-png-256.webp"
  },
  {
    "element": "img · svelte-qtwgdn",
    "size": "331×221px",
    "position": "x 1116px, y 14460px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 30%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-con-22-ref-1-png-256.webp"
  }
]
```

#### 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-2538",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 14502,
      "width": 1440,
      "height": 1074
    },
    "role": null,
    "label": "New possibilitiesSame starting point Day to nightBlockoutSketchRe-skinNew skyGreen screen Input Krea",
    "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": "rgba(0, 0, 0, 0)"
  },
  "cards": [
    {
      "id": "ld-2586",
      "tag": "button",
      "rect": {
        "x": 1190,
        "y": 14839,
        "width": 1063,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-2634",
      "tag": "button",
      "rect": {
        "x": -650,
        "y": 14839,
        "width": 900,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-2578",
      "tag": "img",
      "rect": {
        "x": 1190,
        "y": 14380,
        "width": 1063,
        "height": 1520
      },
      "role": null,
      "label": "absolute inset-0 size-full object-cover",
      "media": {
        "alt": "Boss-arena key art from the same camera.",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-gam-05-output-png-1024.webp",
        "naturalWidth": 1024,
        "naturalHeight": 578
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2626",
      "tag": "img",
      "rect": {
        "x": -650,
        "y": 14509,
        "width": 900,
        "height": 1262
      },
      "role": null,
      "label": "absolute inset-0 size-full object-cover",
      "media": {
        "alt": "The same backlot with the street continued in place of the green screen.",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-09-output-png-1024.webp",
        "naturalWidth": 1024,
        "naturalHeight": 683
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.7,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2558",
      "tag": "img",
      "rect": {
        "x": 270,
        "y": 14839,
        "width": 900,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 size-full object-cover",
      "media": {
        "alt": "The same gas-station plate relit for night.",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-17-output-png-1024.webp",
        "naturalWidth": 1024,
        "naturalHeight": 683
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2559",
      "tag": "img",
      "rect": {
        "x": 270,
        "y": 14839,
        "width": 900,
        "height": 600
      },
      "role": null,
      "label": "input-layer absolute inset-0 size-full object-cover svelte-tsb0t5",
      "media": {
        "alt": "A low-angle gas-station plate in daylight.",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-17-ref-1-png-1024.webp",
        "naturalWidth": 1024,
        "naturalHeight": 683
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2390",
      "tag": "img",
      "rect": {
        "x": 106,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-fas-03-output-png.webp",
        "naturalWidth": 832,
        "naturalHeight": 1248
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 30%"
    },
    {
      "id": "ld-2392",
      "tag": "img",
      "rect": {
        "x": 106,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-fas-03-ref-1-png-256.webp",
        "naturalWidth": 171,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 30%"
    },
    {
      "id": "ld-2400",
      "tag": "img",
      "rect": {
        "x": 456,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-01-output-png.webp",
        "naturalWidth": 1568,
        "naturalHeight": 672
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2402",
      "tag": "img",
      "rect": {
        "x": 456,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-flm-01-ref-1-png-256.webp",
        "naturalWidth": 190,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2410",
      "tag": "img",
      "rect": {
        "x": 805,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-arc-06-output-png.webp",
        "naturalWidth": 832,
        "naturalHeight": 1248
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 30%"
    },
    {
      "id": "ld-2412",
      "tag": "img",
      "rect": {
        "x": 805,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-arc-06-ref-1-png-256.webp",
        "naturalWidth": 145,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 30%"
    },
    {
      "id": "ld-2420",
      "tag": "img",
      "rect": {
        "x": 1116,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-con-22-output-png-256.webp",
        "naturalWidth": 171,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 30%"
    },
    {
      "id": "ld-2422",
      "tag": "img",
      "rect": {
        "x": 1116,
        "y": 14460,
        "width": 331,
        "height": 221
      },
      "role": null,
      "label": "svelte-qtwgdn",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-presets-2026-10-08-con-22-ref-1-png-256.webp",
        "naturalWidth": 203,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.5,
      "objectPosition": "50% 30%"
    }
  ],
  "bounds": {
    "top": 14503,
    "bottom": 15576,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2544",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 357,
        "y": 14743,
        "width": 725,
        "height": 60
      },
      "role": "tablist",
      "label": "Day to nightBlockoutSketchRe-skinNew skyGreen screen",
      "columns": null,
      "display": "inline-flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      1376,
      1063,
      900,
      725,
      534,
      331,
      288,
      256
    ]
  },
  "coverage": {
    "cards": 2,
    "media": 12,
    "animations": 0,
    "elementsInSection": 86
  },
  "surfaces": {
    "radii": [
      "999px",
      "3.35544e+07px",
      "24px"
    ],
    "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, 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, oklab(0 0 0 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    ]
  },
  "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

No timestamped authored motion is attached. Use only restrained baseline transitions.

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: Centered header + pill tab filter + central media card layout; Curved/receding side-panel carousel framing; Floating prompt-caption card pattern anchored to the media
- Dependencies: Paired before/after image assets for each tab; Draggable divider interaction logic (unverified behavior); Specific aspect ratios and image crops used in the carousel
- Guidance: Reuse the header-tabs-centered card skeleton and curved carousel framing as a generic structure; swap in any paired comparison imagery and prompt text, but implement and test the drag-compare interaction independently since its motion quality is unverified here.

### Evidence readiness

- Coverage: 6/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Before and after comparison slider”.

Purpose: An interactive before-and-after image comparison slider inside a horizontal carousel, allowing users to wipe between initial and edited states.

Structure: centered single-column. Source layout label: Centered header, filter tabs, and a large horizontal carousel featuring images with a central draggable vertical divider.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Large split image showing a plain photo and a neon lit edited version with a line down the middle.

Components: image slider, tab, button, floating UI, draggable handle.

Style direction: photographic, minimal.

Observed crop: 1440×1073px (1.342: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}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":14502,"width":1440,"height":1074},"padding":{"top":"60px","left":"0px","right":"0px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,8],"representativeContentWidthsPx":[1376,1063,900,725,534,331,288,256]}; surfaces {"radii":["999px","3.35544e+07px","24px"],"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, 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, oklab(0 0 0 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"]}; media [{"tag":"img","rect":{"x":1190,"y":14380,"width":1063,"height":1520},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":-650,"y":14509,"width":900,"height":1262},"aspectRatio":0.7,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":270,"y":14839,"width":900,"height":600},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":270,"y":14839,"width":900,"height":600},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Centered header + pill tab filter + central media card layout; Curved/receding side-panel carousel framing; Floating prompt-caption card pattern anchored to the media.

Dependencies: Paired before/after image assets for each tab; Draggable divider interaction logic (unverified behavior); Specific aspect ratios and image crops used in the carousel.

Adaptation guidance: Reuse the header-tabs-centered card skeleton and curved carousel framing as a generic structure; swap in any paired comparison imagery and prompt text, but implement and test the drag-compare interaction independently since its motion quality is unverified here.

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