# LOTSFÅGEL — two distinct 20-second drafts

The IKEA direction and build are approved. These are silent source drafts for separate deliverables: a 1440 × 900 CRO demonstration (`cro.html`) and a 1080 × 1920 product ad (`ad.html`). Both use a deterministic 20-second timeline at a declared 30 FPS. Official `assets/product.jpg` and `assets/lifestyle.jpg` are present; the parent will render and review. This plan does not claim a measured experiment or a finished export.

## Evidence and scope

- Source: [IKEA Mexico LOTSFÅGEL](https://www.ikea.com/mx/es/p/lotsfagel-vela-aromatica-en-vaso-vainilla-beige-claro-40608464/). Verified facts supplied for this task: vanilla scented candle, clear glass, light beige wax, 20 hr advertised duration, displayed MXN79 including IVA, and displayed delivery status “Disponible.” Availability is a captured page state, not a regional delivery promise.
- Observed desktop screenshot window: 1200 × 1006. Actual page viewport was not measured. Recognizable structure: black service strip; white navigation with blue/yellow IKEA mark and pill search; breadcrumb; thumbnails and large white-background candle image on the left; product name, description, price, availability box, and blue pill purchase CTA on the right.
- The CRO page is an **illustrative reconstruction** at 1440 × 900. Its layout is based on the observed structure; exact pixel fidelity and any generic interface wording need review against the captured page. The added fact panel and sticky purchase summary are explicitly proposed states.
- The ad uses the two official local photographs and **starts with the product creative, never an ecommerce page**. It contains no recreated webpage or CRO notation. The product photo shows an unlit candle; the lifestyle photo already shows the candle lit in a kitchen scene. That photographic flame is source imagery, not a simulated effect. Price and reviews are absent from the ad.

## Storyboard A — CRO proposal (`cro.html`, 1440 × 900)

| Time | Purpose and on-screen state | Exact key copy | Motion and viewer takeaway |
| --- | --- | --- | --- |
| 0–5 s | Recreated baseline desktop product page, labeled “Recreación · estado base.” Show product image, LOTSFÅGEL, vanilla/beige description, $79 with IVA note, observed availability, and “Agregar al carrito.” | “Recreación · estado base”; “LOTSFÅGEL”; “Agregar al carrito” | Hold the page, then prepare the purchase column for a proposal. No cart click or purchase outcome is shown. |
| 5–11.7 s | Label switches to “Propuesta CRO.” Add a compact information panel immediately beside the purchase area. | “Datos clave junto a la compra”; “Detalles de esta vela”; “Vainilla”; “20 h”; “Vidrio” | Panel expands and settles. Its contents are sourced facts, rearranged as a proposed hierarchy. A brief outline calls attention to the changed area. |
| 11.7–17 s | Simulated page scroll reveals more product content. A compact purchase summary stays in view at the bottom. | “Compra visible al explorar”; “LOTSFÅGEL”; “Vainilla · 20 h · vaso de vidrio”; “$79”; “Agregar al carrito” | Scroll and summary entrance show the proposed persistence. The CTA remains visible without implying it was clicked. |
| 17–20 s | Hold the proposed scrolled state with the compact summary and “Propuesta CRO” marker. | Same summary and CTA | Give the viewer time to inspect the change. No fake checkout, delivery calculation, review, or conversion result. |

**CRO hypothesis:** Placing verified fragrance, advertised duration, and glass material beside the purchase control, then keeping a compact product/CTA summary visible during scroll, may make product information and the add-to-cart action easier to find. Evaluate add-to-cart rate and purchase completion against the existing page; this draft asserts no lift.

## Storyboard B — performance ad (`ad.html`, 1080 × 1920)

| Time | Purpose and composition | Exact Spanish screen copy | Choreography |
| --- | --- | --- | --- |
| 0–4 s | Warm opening with generous whitespace and the official product photo. | “Un aroma para tu espacio.” | Subtle product drift; hold the hook long enough for a silent read. |
| 4–10 s | Candle photo becomes the large hero on a layered warm field. | “Aroma a vainilla.” | Gentle scale/reframe, then a settled close view. No flame or invented product effect. |
| 10–15 s | Official lifestyle photo shows the photographed candle lit on a kitchen wood surface and provides a calmer visual pause. | “Haz espacio para una pausa.” | Slow image movement under a restrained contrast gradient; preserve the candle and photographed flame in the crop, and keep the words readable. |
| 15–20 s | Clean product end card. | “LOTSFÅGEL”; “Vela aromática en vaso de vidrio”; “Conoce la vela” | Return to the source product photo, reveal title and CTA, hold through the final frame. |

**Ad direction:** Editorial serif display type with plain sans supporting type, cream/sand palette, warm photographic layering, sparse rules, and quiet crossfades. The ad is silent-first; no narration or paid audio is part of this build. Its CTA is visual copy, not an asserted purchase or page interaction.

## Parent verification criteria

1. Confirm the local official images load in both drafts. The product photo is an unlit clear-glass candle with beige wax; the lifestyle photo shows the same candle lit on a kitchen wood surface. Preserve the photographed flame in the lifestyle crop without adding a generated flame elsewhere.
2. Compare the CRO opening against the captured IKEA desktop page. Check the 1440 × 900 reconstruction for recognizable header/gallery/details structure and remove or correct any generic UI wording that could be mistaken for an exact capture.
3. Review stills around 0, 5, 7, 11.7, 13.5, 17, and 20 seconds in the CRO draft. Confirm the baseline has no proposal panel space, the proposal label is visible, the fact panel lands next to purchase, and the sticky CTA is legible during the simulated scroll.
4. Review the ad at each beat and at crossfades near 4, 10, and 15 seconds. Check image crop, text safe area, contrast over lifestyle imagery, line wraps, source-photo continuity, and the full final hold on a phone-size preview.
5. For both pages, compare direct `window.seek(t)` with sequential playback and backward seeking at the same timestamp. Confirm `?render=1` hides controls and displays the fixed-size frame. Inspect the eventual encoded outputs separately; source readiness is not export verification.

## Current limitations

- The local JPGs and `sources.md` are now present and were inspected. The parent will perform visual QA. No browser preview or encoder run was performed here.
- The desktop source window size is known, but the page viewport and exact computed styles were not measured. The CRO baseline remains a recognizable recreation rather than a pixel-validated clone.