# Store Design Cards — Agent Handoff

Prepared: 2026-08-14 (America/New_York)

## Mission and current state

This project recreates the conversion structure of five reference App Store screenshots using original Danceclone concepts and imagery. The user asked for direct equivalents shown side by side with the references, not loose visual inspiration.

All five cards are complete, downloadable, independently QC-passed, and live:

- Live project: https://viralpatterns.tech/projects/store-design-cards/
- Handoff page: https://viralpatterns.tech/projects/store-design-cards/handoff/
- Main source: `project/index.html`
- Assets: `project/assets/`
- Export helper: `project/html2canvas.min.js`

The source is a standalone static page. There is no dependency install or build step. `index.html` contains the layout, card markup, CSS, comparison assembly, and PNG download behavior.

## Non-negotiable creative rules

1. Work on one explicitly named card at a time.
2. Keep the other approved cards locked.
3. Compare the reference and Danceclone card directly side by side.
4. Match the reference's conversion signals, not merely its broad composition.
5. Keep the generated joke or transformation instantly understandable.
6. Keep feature names semantically accurate.
7. Preserve premium typography and high-resolution imagery.
8. Validate both full-size and at exactly 220 pixels wide.
9. Use an independent adversarial reviewer for a material revision.
10. Do not publish until the revised card passes QA.

The successful formula is: an ordinary or serious setup, one absurd and unmistakable visual action, and clear product-UI proof.

## Approved card map

The DOM IDs are legacy names. Do not rename them unless all associated CSS, markup, and download hooks are updated together.

| # | Reference feature | DOM ID | Approved Danceclone concept | QC |
|---|---|---|---|---:|
| 1 | AI Video Generator | `card-ai-dance` | Animated corgi and black cat dancing salsa above a city | 8.8 |
| 2 | AI Dance Generator | `card-anyone` | The same elderly man transformed into an extremely silly viral dancer | 8.6 |
| 3 | Gangsta Dance Generator | `card-one-photo` | `VOGUE DANCE / VIDEO GENERATOR`: grandmother changes from a neutral laundromat portrait into a vogue-style pose | 8.6 |
| 4 | Turn Text to Video | `card-photo-video` | Fashionista capybara shops for tiny sunglasses in a luxury boutique | 8.8 |
| 5 | Baby Interview Maker | `card-viral` | Reporter interviews a corgi dressed as a serious business executive | 8.8 |

Reference images are `project/assets/reference-01.webp` through `reference-05.webp`. A `referenceCards` JavaScript array near the bottom of `index.html` maps them by section order; if sections are reordered, update that array too.

## Approved live imagery

### Card 1

- `assets/corgi-cat-salsa-hero.png`
- `assets/corgi-cat-salsa-frame-01.png` through `frame-05.png`
- `assets/corgi-cat-salsa-hero.prompt.txt`

### Card 2

- `assets/card-anyone-silly-main.png`
- `assets/card-anyone-silly-thumb-01.png` through `thumb-05.png`
- `assets/card-anyone-silly-main.prompt.txt`

### Card 3

- `assets/card3-laundromat-before.png`
- `assets/card3-laundromat-dance.png`
- Corresponding `.prompt.txt` files

Known terminology debt: the approved headline says `VOGUE DANCE`, while an older prompt and current hero alt text may still say “hip-hop.” If Card 3 is revised, align prompt, image semantics, headline, and alt text.

### Card 4

- `assets/card4-fashion-capybara.png`
- `assets/card4-fashion-capybara.prompt.txt`

The tiny sunglasses in the capybara's raised paw are important because they visually prove the prompt.

### Card 5

- `assets/card5-pet-interview.png`
- `assets/card5-pet-interview.prompt.txt`

## Editing and QA workflow

1. Inspect only the target card and its reference.
2. State the direct-equivalent concept in one sentence.
3. Confirm the feature name is literally true.
4. Edit only the target card's assets, markup, or CSS.
5. Wait for `document.fonts.ready` before capture.
6. Confirm all images are complete and have `naturalWidth > 0`.
7. Check browser console and request errors.
8. Capture the full card.
9. Resample a capture to exactly 220px wide and verify its pixel dimensions.
10. Check headline truth, prompt-to-result correspondence, critical crop/props, and instant readability.
11. Get an independent hard-gate review and fix material blockers.
12. Publish only the validated files, then verify the live page and hashes.

Example local server from the package root:

```bash
cd project
python3 -m http.server 8080
```

Then open `http://localhost:8080/`.

Example exact-size check on macOS:

```bash
sips --resampleWidth 220 card-qc.png --out card-qc-220.png >/dev/null
sips -g pixelWidth -g pixelHeight card-qc-220.png
```

Expected width: exactly 220 pixels.

## Export behavior

Each card has a `Download PNG` button. The page clones the target card into an offscreen fixed `440 × 956` element and renders it with `html2canvas` at scale 3.

Known filename-only debt:

- Card 2 downloads with an old `01-...` prefix.
- Card 3 downloads as `03-one-photo-endless-moves.png`.
- Card 4 downloads as `04-turn-photos-into-videos.png` although its live feature is Turn Text to Video.
- Card 5 downloads as `05-ready-to-go-viral.png` although its live feature is Pet Interview Video Maker.

The visual cards are correct; these are download-name cleanup items only.

## Legacy files

The asset folder intentionally includes superseded experiments and source images. QA images in the project root are review artifacts rather than deployed assets. Do not delete either group during an ordinary revision: some files may be useful for rollback or iteration. If cleanup is requested, first build an explicit list of files referenced by `index.html`, make a backup, and remove only verified-unused files.

## Approved snapshot hashes

These hashes identify the approved state copied into this package:

```text
38843c455074c043c8e260faede8cd647a7386c47ba7363600cabb9bb4d34170  project/index.html
f06ae56051c3fda43e05786f7255c06c878122410d05e76f0404cda1a4bcbdf5  project/assets/corgi-cat-salsa-hero.png
eb4c7f5f6137f46837b39a17cbe3b3de1e1dd22ffa59703ccbc1434b4fb45873  project/assets/card-anyone-silly-main.png
6f3e2da72f974b2cd769259e92a269ecf6eeae87d9724f7ce1ec951c4106398f  project/assets/card3-laundromat-dance.png
ad226bb83b4223e2d85ae13e37135163f20b1b333b3d94cc61204a6b8f7766df  project/assets/card4-fashion-capybara.png
0200cbae652277ccb3116a23a41108f01b7043e6ad8081ba0f69323dc67a6e4c  project/assets/card5-pet-interview.png
```

## Access and deployment

No passwords, tokens, SSH configuration, or private deployment environment are included in this public package. Obtain access privately from the project owner. Deploy only to the existing Store Design Cards target; this hosting account may contain unrelated projects.