Happies, part two · How I built the site and the scroll

01BEFORE THE BUILD

Pick three sites for three different jobs.

// what this step gives youA brief you can hand to a machine in one sentence, and a page that doesn't look like anyone else's.

// what I didChomps for how the product should feel (honest, meaty, no nonsense). Bloom for how the page should look (bright, fun, big type). Olipop for how the scroll should move (a bag lands in each flavor scene, the color flips, you keep going). Then one sentence to Claude with all three in it, plus the brand folder from part one.

// the brief, in the words I used

Build the Happies site from the brand folder. Olipop-style hero, then one scene per flavor where the bag tumbles in and the real ingredient sits behind it, bold field then light field then bold, a lifestyle shot of a Great Dane courtside, and a find-us footer. Fonts and colors from brand/tokens only. All motion in CSS and JavaScript, no video yet.

Happies site hero: five bags, treats she'll beg for — the hero after round two: five bags side by side, the line from the brand folder, nothing else

"Olipop for tempo" is the whole trick. You're not copying their page. You're borrowing how fast it moves.

// you'll know it worked whenThe first version already looks like the brand, not like a template, because it read the folder before it wrote a line.

Done, brief given next: the scroll ↓

020 CREDITS

The scroll engine, in plain English.

// what this step gives youThings move when you scroll, and stop when you stop. No video, no library, no plugin. About 40 lines of code you never have to read.

// how it worksEach flavor section is taller than the screen. Inside it, a panel is pinned so it stays put while you scroll past. A tiny script watches how far you've scrolled through the section and turns that into a number from 0 to 1. That number is handed to the page as a few timers: the bag lands between 8% and 50%, the ingredient drifts in between 20% and 60%, the words fade up between 28% and 58%. The styling does the actual moving. If someone has "reduce motion" on, everything just appears.

// how I asked for it (you can say this to Claude word for word)

Make each flavor section 125% of the screen height with a pinned panel inside. Measure how far the reader has scrolled through the section, from the moment it enters the screen to the end of the pin, as a number from 0 to 1. Set that number as a CSS variable on the section, and set four more for the bag, the prop, the copy and the claims with staggered start and end points. Do the movement in CSS with those variables. Respect prefers-reduced-motion. No libraries.

Sunday pot roast scene mid-scroll, bag landed, copy in — the pot roast scene mid-scroll. bag landed, words in, claims still arriving

The one bug that ate an hour: I let it cap the pinned panel at 820 pixels tall inside a section that was 118% of the screen. On a big monitor the panel un-pinned early and left a blank band. The rule now: never cap a sticky panel below the height of the screen.

// you'll know it worked whenScroll fast, scroll slow, scroll backwards. The bag is always exactly where the scroll says it should be.

Done, it scrolls next: solo shots ↓

033 CREDITS EACH

Shoot every object solo, with a real transparent background.

// what this step gives youBags and ingredients that sit on any color without a white fringe, a fake shadow, or a cut-out look.

// what I didRound one used crops from the character sheets. On the page they looked cut and pasted, because they were. So every bag got reshot on its own, filling the frame, in Seedream 5.0 Pro with the transparent-background option on, referencing its locked sheet. Same for one hero ingredient per flavor. To make all five bags match, each one was edited with the single best bag as the shape reference in the same call.

// the ask, per bag

Re-render this exact pouch from the locked sheet, solo, filling the frame, front three-quarter, matte metallic, transparent background. Match the shape and proportion of the reference bag exactly. Keep every word on the pack as printed.

Pot roast bag with true transparency — the pot roast bag as it sits on the site. no edges, because the model cut it out, not me

Two things I'll never do again: crop a six-up sheet for a hero image, and knock out a background by hand. The knockouts left white fringes and a gray blob under the blueberry bag that took a whole round to find.

// you'll know it worked whenDrop the bag on the brightest and darkest color you have. No halo on either.

Done, solo set next: the spin ↓

0445 CREDITS

The bag that spins when you scroll.

// what this step gives youFive seconds of video that reads like a product turntable, scrubbed by the reader's thumb instead of playing on its own.

// what I didOne clip, Seedance 2.5, five seconds, 1080p. The end frame is a still of the bag three-quarter on its red field. The references are the five-view sheet and the solo bag. The prompt says: locked-off turntable, start on the full back of the bag, turn 180 degrees at constant speed, settle into the end frame. First try was clean, no drift, 45 credits. Then the site scrubs it: as you scroll through the pot roast scene, the video's playhead is set to match your progress, so the bag turns with your thumb. Only the last 42% of the clip is used, so it settles onto the front as the words arrive.

// the clip prompt

Locked-off turntable shot of this exact pouch. Start on the FULL BACK view. Rotate 180 degrees clockwise at constant speed and settle into the end frame. Studio light, no camera move, no extra objects, no text changes.

// how I asked for the scrub

Load the clip as a blob so seeking works on any host. As the reader scrolls through this scene, set the video's current time to the scene's progress, using only the last 42% of the clip across 10% to 72% of the scene. Give the scene the same red as the clip's background so the edges disappear.

Three flavors were quoted and one was made. If a client says yes to the others, it's two credits for the end frame and 45 for each clip. That's the line in the cost sheet, not a guess.

// you'll know it worked whenScroll up and the bag turns back. People notice that before they notice anything else on the page.

Done, it spins next: campaign shots ↓

053 CREDITS EACH

The two campaign shots.

// what this step gives youFull-screen pictures that look like a real shoot, not like the app, sitting between the flavor scenes.

// what I didA Great Dane waiting courtside next to the bag, and a kitchen scene with a hand and the treats. Both started as cheap staged frames, then got re-rendered in Seedream 5.0 Pro's edit mode, which keeps the composition and lets you write the look into the prompt: the grain, the lens, the color. That's the "make it look like a real shoot" button. Three credits each. On the page they run full-bleed with the picture drifting slower than the scroll and the caption riding up over it.

// the re-render prompt shape

Re-render this exact frame at campaign quality. Keep the composition and the pouch artwork exactly. Add: natural golden light, real film grain, shallow depth of field, 35mm lens character, warm color grade. No new objects, no text changes.

Great Dane courtside with a Happies pouch, caption in tennis-ball yellow — the court shot on the site. caption in tennis-ball yellow, moved off the bag in round five

The dog and the kitchen come last on purpose. Object before scene. The bag had to be right before anything was allowed to stand next to it.

// you'll know it worked whenSomeone asks where you did the shoot.

Done, two heroes next: proof rounds ↓

06ONE DAY

Seven proof rounds in one day.

// what this step gives youThe loop that makes it good: a link, a look on your phone, a sentence of what's wrong, a recut to the same link.

// what I didEvery version got published to the same link and I looked at it on my phone like a customer would. Then I said what was wrong in one or two sentences, and it got fixed. Round one: the crops looked fake. Round two: bone off the logo, red nav with white type, five bags in the hero. Round three: the spin. Round four: the two campaign shots. Round five: sections tightened from 17 screens to 10, the shadow blob under the blueberry bag removed, every bag replaced with the transparent set. Round six: the motion started too late, so the scene now animates from the moment it enters the screen. Round seven: the blank-band bug.

// the kind of feedback that works (mine, round two)

Take the bone off the logo. Nav should be red with white type. Put all five bags side by side in the hero. The bags and ingredients look cut and cropped and fake. Reshoot them.

Blueberry muffin scene after the transparent set — the blueberry scene after round five. that gray blob under the bag is gone

Say what's wrong, not how to fix it. "Looks fake, reshoot them" turned into the whole transparent set. If I'd said "add a drop shadow" I'd have made it worse.

// you'll know it worked whenEach round fixes one thing you named and breaks nothing you didn't.

Done, seven rounds next: read the back ↓

070 CREDITS

The "read the back" section.

// what this step gives youThe honest part of the page. What's in it is what's on it, per flavor, using pictures you already made.

// what I didOne row of five cards, one per flavor, each with the ingredient shot from the prop sheets and the two or three claims from the brand folder. No new pictures. No nutrition numbers, because there is no real formula yet, and the rule is you don't print a number you can't back up.

// the line at the top of it

what's in it is what's on it. one protein. real fruit or veg. a pinch of something she'd recognize. we'd rather you read the back than trust the front, so we made the back easy.

Read the back section with five ingredient cards — five cards, five ingredient shots, all from part one's prop sheets. zero new credits

// you'll know it worked whenThe section is the one people screenshot.

Done, the back next: put it live ↓

080 CREDITS

Put it live.

// what this step gives youA real address, in about five minutes, for free.

// what I didThe whole site is one HTML file and a folder of pictures. Preview it on your own computer first (Claude can run a little local server and open it). Screenshot every section on desktop and on a phone. Then zip the folder and drag it into Cloudflare Pages. That's the deploy. Your own domain name is a few dollars a year and points at it. The fonts load from Google, so nothing else is needed.

// how to ask for the preview

Run a local preview of the deploy folder and screenshot every section at desktop width and at 390 pixels wide. Scan the whole page for any empty viewport-height band and tell me if you find one.

I click deploy. The machine doesn't publish a client's site on its own, ever. That's a rule in the folder, not a preference.

// you'll know it worked whenYou text the link to someone and they don't ask what it's for.

Done, live only doing one step? ↓ ↓

The site, and how the scroll works.

Three things before you start.

Pick three sites for three different jobs.

The scroll engine, in plain English.

Shoot every object solo, with a real transparent background.

The bag that spins when you scroll.

The two campaign shots.

Seven proof rounds in one day.

The "read the back" section.

Put it live.

Do 2.

The site was free. The pictures weren't.

The challenge is thirty of these, on your job.

Not ready? Start free.

Next in the lab