WORK FROM HOME WITH THIS SKILL

Here is my product. [attach one product photo]

Interview me with exactly four questions, one at a time:
1. What is the product or brand, in one line?
2. Who is it for, and what should they feel?
3. What is the one thing they should remember?
4. Do I have an AI render tool connected for footage, or should we use stock video and images?

Then distill my answers into one thesis line the whole site will serve. Short. Specific. No filler.

Create version one of the site: a single index.html with the brand name, the thesis line, and a two-sentence lede. Plain readable type, no styling yet. Put my product photo in an assets/ folder. Serve it locally and give me the URL. We will upgrade this same file five more times, so keep it clean.

Look at the product and thesis in index.html. Pick ONE scroll style and defend the choice in a single line:

A · Ambient loop: a hero object that just looks beautiful
B · Scroll-scrub: the product transforms or rotates as you scroll
C · Cursor-spotlight: revealed out of the dark by the cursor
D · Horizontal pan-lock: a place or lineup you move sideways through
E · Exploded view: a built object worth taking apart
F · Push-through: a space the camera flies into
G · Scrollytelling: a process worth watching unfold

Ask: what does scrolling MEAN for this product? Match the motion to the thing, not to taste.

Then upgrade index.html: add smooth inertia scrolling (Lenis) and scroll-triggered reveals (GSAP ScrollTrigger), and lay out the full page top to bottom: hero, thesis, two feature blocks, a gallery band, three detail rows, a CTA. Use clearly labeled placeholder blocks where the two videos and three images will go. Same file. Tell me to refresh.

Write one sentence: who is using this product, where, and in what light. Choose dark or light from that scene.

Then build the palette from the scene, never the category:
- Tint every neutral toward the brand hue. No flat grays.
- Commit to ONE saturated accent. Everything else stays quiet.
- The accent leads exactly once, on the thing you want clicked.
- Reduce saturation as a color approaches pure black or pure white, or it turns garish.

Apply the four tokens (bg, ink, muted, accent) to index.html, and add the fonts: one display face for headlines, one clean body face. Then show me the scene sentence next to the live page so I can judge whether the colors tell that story.

Write the full site copy and put it straight into index.html, replacing every placeholder line:

- Headlines short. Captions 3 to 5 words, one accent word each.
- Specific beats generic: "live in 20 minutes" beats "fast and easy."
- Kill spec-sheet clutter. No feature lists, no jargon.
- No restated headings, no intro that repeats the title.
- No em dashes. Anywhere. Ever.
- Every claim concrete enough to be falsifiable.

The page needs: one eyebrow line, one lede, one thesis line, three captions, two feature blocks (heading + 2 sentences), three numbered detail rows, and one CTA line. Nothing else. Tell me to refresh and read it on the page, not in chat.

Write 5 render prompts for my product: 2 videos + 3 vertical images. Each asset appears on the site exactly once.

Video laws:
- Lock the camera to the scroll axis. No drift, no zoom.
- Constant velocity. Motion blur OFF: the user controls time.
- The two videos are siblings: copy the hero prompt's lighting and material language, change only the motion or framing.
- For a transform: the START object must equal the END object, or fall back to a loop. Consistency over spectacle.

Example hero render:
"A woman's hands typing steadily on a laptop keyboard in a warm home office at night, one warm lamp off to the left, deep navy shadows behind her, a molten orange screen glow across her knuckles, shallow depth of field, real skin texture, 16:9. Motion: she types at an even rhythm, locked camera, constant speed, no zoom, no motion blur."

Images: one context shot, one extreme macro, one hero still. All vertical. Same rule as the videos: reuse the hero's lighting and material language so all five assets read as one shoot.

Example hero still:
"A woman seated at a wooden desk in a warm home office at night, seen from behind, hands resting on a glowing laptop, deep navy walls and shadows, one warm lamp off to the left, a molten orange screen glow washing across the desk, shallow depth of field, natural film grain, vertical."

Now GENERATE all five with my connected image and video tool. If I have no render tool, find five matching stock assets instead. Save them as assets/hero.mp4, assets/middle.mp4, assets/g1.jpg, assets/g2.jpg, assets/g3.jpg and wire each one into its placeholder in index.html. Tell me to refresh.

Final pass. Rebuild index.html into this exact section order: Hero (hero.mp4 full-bleed), Thesis line, two Feature pairs (g1 and g2), Gallery band (image, middle.mp4, image), three numbered Rows, the CTA, an animated footer.

Hard rules:
- 2 videos + 3 images, each used exactly once. No card grids, no gallery walls, no reused frames as filler.
- One committed accent, used once where it counts. Never flat #000 or #fff.
- Hero text sits on a soft dark halo so it never washes out.
- The hero must be moving before the first scroll.
- Final gate: if someone could look at it and say "AI made that," it failed. Gradient text, glassmorphism, identical cards, the big-number hero metric: all banned.

Serve the finished site, give me the URL, and list what changed in this pass. This is the site we ship.