---
name: shop-site-remake
description: Rebuild a local shop's website as a premium one-page scroll site with a photoreal hero product that explodes into its layers as you scroll. Use when the user gives a shop (Google Maps listing, current site, photos) and asks for a new site, a demo to show the owner, or a "scroll animation" site.
---

# Shop site remake (scroll-explode style)

You rebuild a real shop's site as a one-page demo the owner can see. The page is driven by scroll: a photoreal product (burger, cake, ramen bowl...) lifts, explodes into its layers, then lands in a serving scene. Everything else is the shop's own facts, laid out cleanly.

Before you start, make sure these two design skills are installed and use them during the design and polish steps:
- `npx skills@latest add emilkowalski/skills` (motion and interaction polish)
- `npx skills add pbakaus/impeccable` (design direction, critique, polish), then `/impeccable init` once in the project

## Inputs (ask for anything missing, in one batch)
1. The shop's Google Maps listing text: name, rating, address, phone, hours, closed days, menu + prices, reviews.
2. The current site URL (copy the story, menu, media mentions, Instagram handle). Never invent facts, prices, awards or media.
3. 1-2 real photos of the hero product, plus a photo of how it is served (plate, basket, box).
4. Higgsfield connected as an MCP connector in Claude (Settings > Connectors > add custom connector > `https://mcp.higgsfield.ai/mcp`).

## Step 1: three stills (image model, the product photo as reference)
Make three 16:9, 2K stills that keep the SAME product in every frame (same shape, same layers, same colours):
- S1 hero: the assembled product on a dark background, lots of empty space on the left for the headline.
- S2 exploded: the product's layers flying apart in mid-air at different tilts (not a neat straight stack) on a plain light background, empty space on the right for labels.
- S3 served: the product in the shop's real serving style (basket, plate, box) on a dark table.
Describe the product ingredient by ingredient in every prompt and write "EXACTLY the product in the reference image". Gate: show the three stills next to the reference photo and fix any drift before you make video.

## Step 2: two clips (video model with start + end frame, 5 s)
- Clip A: start S1, end S2. The product lifts off, comes apart slowly, background turns dark to light.
- Clip B: start S2, end S3. The layers re-stack, the product lands in the serving scene, background turns dark again.
"Smooth continuous motion, no cuts, same product throughout, no new objects, no text." If the model ignores the end frame, generate the reverse move and play it backwards.

## Step 3: frames
Split each clip into ~120 frames (ffmpeg), export webp: desktop 1920 wide (q ~74), phone a ~900x1090 crop that follows the product (q ~56). Never upscale small frames for phones: that is what makes it look blurry.

## Step 4: the page (single index.html, no framework)
1. Header: logo or text mark, Home / Menu / Story / Access, accent button to Instagram. Burger menu on phones.
2. Sticky canvas scroll story (~700vh): hero headline over S1 > clip A scrubbed by scroll > the exploded product with thin leader-line labels per layer (the shop's real selling points) > clip B > "served" headline.
3. The shop's real sections: three pillars from their own copy, menu with exact prices, story timeline, real media mentions only, reviews, Instagram block, access (tap-to-call, hours, closed days, Google Maps embed + directions).
4. Footer with a small line "Concept redesign, not the official site" and `<meta name="robots" content="noindex">` until the owner buys it.
Look: one product hero, giant condensed all-caps headlines, plain body font, the shop's own colours plus one accent.

## Step 5: smoothness (this is where demos fail)
- Loader waits until ALL frames are decoded (`img.decode()`), with a ~15 s failsafe. Never let the scroll start with missing frames.
- Draw in a requestAnimationFrame loop with inertia (lerp ~0.15 to 0.2 toward the scroll target) and cross-blend neighbouring frames.
- Cap canvas devicePixelRatio at 2; don't reallocate the canvas when the phone toolbar shows/hides (use 100lvh for the stage).
- Put overlays on their own GPU layer (`transform: translateZ(0)`), rebuild labels only when the layout changes.

## Step 6: check before showing anyone
Desktop and phone: a new "wow" every ~1.5 s of slow scrolling, product identical in every frame, nothing overflows, all prices and facts match the shop, Lighthouse performance >= 80 on desktop. Deploy as a preview link (e.g. Cloudflare Pages) and keep noindex on.