# Sol skill test — scented candles

## Setup

- Agent: GPT-6 Sol, fresh initial context with the portable `code-directed-animation` skill.
- Task: separate CRO UI demonstration and product marketing ad, clarified by the user after the initial combined concept.
- Reference: IKEA Mexico LOTSFÅGEL vanilla candle, inspected by the parent agent in Chrome. Source observations and official photographs were supplied to Sol.
- Sol authored `cro.html`, `ad.html`, and their storyboards. The parent acquired assets, authored the renderer and review page, inspected stills, and requested corrections. This was a supervised test, not a one-shot or fully independent browser-to-export run.

## Distinct outputs

| Output | Purpose | Proposed behavior |
| --- | --- | --- |
| CRO, 1440×900, 20s | Demonstrate changes to a recreated product page | Bring scent/duration/container facts next to purchase controls; retain a compact summary and CTA during scrolling. |
| Ad, 1080×1920, 20s | Present the product in a standalone marketing creative | Product hook, vanilla detail, lifestyle photograph, final product name and CTA. No ecommerce interface. |

The CRO hypothesis is that information and purchase controls remain easier to find while exploring the product. Test add-to-cart and completed purchase rates, with a check for accidental clicks and customer confusion. Two changes are bundled in this prototype; isolate them in separate experiment variants if attributing the effect to either change matters. No conversion effect has been measured.

## Findings and corrections

1. Initial concept combined a product page and ad. The user clarified the intended separation. The skill now explicitly requires separate storyboards, sources, previews, and exports when both are requested.
2. The first CRO scroll caused content to pass through the service strip; annotations also obscured controls. Sol added clipping and reserved annotation space.
3. The initial header was too generic. Sol added visible navigation/search text and corrected the logo treatment. The final UI remains a visual approximation; the actual logo and measured source CSS were not used.
4. Applying a drop shadow to a rectangular JPG created an obvious box around the candle. Sol removed it, retaining CSS multiply compositing on the source image.
5. CRO image comparisons exposed intermittent raster differences. Comparing decoded pixels isolated one failure to three rounded-edge pixels with at most 5/255 channel variation. The renderer waits for painting and records a strict tolerance of at most ten changed pixels and 8/255 channel difference; larger differences fail. This is a raster tolerance, not a claim of byte-identical output.

## Verification

- Both scenes loaded local image assets and produced no page JavaScript errors during checks.
- Direct seek, backward seek, and sequential frame advancement are compared at 8s. The ad passed exact PNG comparison; CRO checks include the small documented edge-raster tolerance.
- Stills reviewed across baseline, proposed details, scrolling, product hero, lifestyle, and closing states. Concrete overlap and photo-compositing defects were corrected.
- Renderer and machine-readable scene checks are included. Export validation results are in `out/export-checks.json`. Encoded transition frame sequences and ending frames are reviewed separately from source stills; full realtime playback is not claimed.

## Limits

- This is a reference-informed recreation, not a pixel-exact copy or deployed storefront. Purchase controls in the timeline are visual demonstrations.
- Product photographs are from the source listing. The 900px lifestyle image is enlarged for vertical delivery, so detail is softer than native-resolution footage.
- These are silent first cuts. No ElevenLabs request, narration alignment, ad deployment, or CRO experiment was performed.
- The skill's runtime was tested through this agent/environment only; portability of the written skill does not prove execution in every harness.

## Reproduce

From the parent workspace with Playwright/Chromium and FFmpeg installed:

```sh
node candle-test/render.mjs cro
node candle-test/render.mjs ad
```

Append `--stills` for stills and deterministic checks without encoding. Open `index.html` to review both exports, or the individual scene HTML files to play and scrub their timelines.