PromptLens

FreeBuild sheet 02 of 08 · Concept site · fictional company

QuiebreHow the site was made

Scroll, and the pod becomes the bar.

How we made a concept site for a fictional bean-to-bar chocolate maker: every prompt exactly as it was sent, the steps in order and how long it took.

Open the live demo Read every prompt
THE FILM · 8 SECONDSFOUR PICTURES
A ripe red cacao pod with a hairline crack lies on dark slate dusted with cocoa.Film frame 46: the pod lies split open, full of pale beans.Film frame 86: the beans have melted into a glossy pool of chocolate.Film frame 192: a dark chocolate bar lies snapped in two beside a few cacao nibs.Generated with AI
A video model was given two pictures, the first frame and the last, and made the 8 seconds between them. Pictures and film generated with AI.
01 · The idea

One idea, one moment, one job.

The idea is what the page is about. The moment is the one thing built for this business alone. The job is what it does for the owner.

The idea

Scroll, and the pod becomes the bar.

The hero is one continuous 8-second film: a cacao pod on dark slate splits, the beans tumble out and darken as they roll, melt into one glossy stream, set into a bar, and the bar snaps in two. Before anyone scrolls, the pod strains at its seam. Scrolling plays the film, and the last moment plays through on its own.

The one moment

Tap to snap

Tap the bar and it snaps, and you hear it. Two pictures from one fixed camera, whole and snapped; the snapped right half is its own layer and springs apart. The sound, a short crack, is made in the page itself, and nothing plays until the first tap. Tap, click, Enter or Space snap it and put it back.

What it does for the owner

Order the box

  • A tasting box of six, built from four bars
  • Pickup, or Miami delivery with a zone check
  • A Saturday tasting booking
  • Call or text, and open now
02 · The steps

In the order we did them.

Each step says what we did and why. Open Details under a step for the tools and the numbers behind it.

  1. Write the plan before anything runs

    Write every prompt out in full before you make anything, so nothing is decided halfway through.

    Details
    • plan

    Every still and film prompt was written out word for word before a single call, for this site and Oro Lento together. It was approved, then run.

  2. Make the first frame and the whole bar

    Ask an image model for the opening picture, a cracked cacao pod on slate, and for one whole chocolate bar; a third picture, hands tempering chocolate, is made the same way.

    Details
    • nanobanana-pro
    • 2K
    • 1:1

    Calls 01 and 02, no reference: the cracked pod that opens the film, and one whole bar, half of the snap pair. Call 04, also without a reference, is the tempering photo.

  3. Edit the pictures that must line up

    Send pictures back to the model and change one thing each time, so the pairs line up: the pod becomes a snapped bar (the film's last frame), and the whole bar becomes the same bar snapped in two.

    Details
    • nanobanana-pro
    • edit

    Call 05 sends picture 01 back and puts a snapped bar where the pod lay: the film's last frame. Call 06 sends picture 02 back and snaps that bar between the fourth and fifth segments: the snap pair, measured to move 46 px.

  4. Redo one still

    The photo of four bars was made twice; the second time the whole bar went along with the words, so every bar comes from the same mould.

    Details
    • nanobanana-pro

    The four-bar photo was made twice. Call 03 had no reference; call 07 sent picture 02 so that every bar comes from the same mould. The site uses call 07, and both are in the call log.

  5. Film the gap between the two

    Give Kling, a video model, the pod as the first frame and the snapped bar as the last, and ask for the 8 seconds in between (the length is a setting you choose).

    Details
    • kling-3.0-pro
    • 8 s
    • first + last frame

    Call 08: first frame 01, last frame 05, one continuous take written second by second.

  6. Cut the frames the scroll plays

    Turn the film into still frames for the scroll, keeping every frame where something happens and fewer where nothing moves.

    Details
    • ffmpeg
    • Python
    • AVIF

    193 frames at 24 fps; 138 kept at 720 × 720 AVIF, 2.46 MB. The still stretches are thinned (frames 0 to 33 every 3rd, 112 to 154 every 5th), every frame of the split and the melt is kept, and frames 154 to 192 play through on their own. Tried and dropped: AVIF at 600 px (soft), all-keyframe H.264 (banding on the bar), VP9 (9.3 MB).

  7. Paint the poster first

    Show the pod as a small still first, so the page opens on a picture while the rest loads.

    Details
    • AVIF

    The pod still paints first: 1,440 px AVIF, 45 KB. The first view weighed 137 KB on 22 Sep, before the seam at rest was added.

  8. Build the snap

    Cut the snapped half of the bar out as its own layer, so a tap can pull the two halves apart, and make the snapping sound in the page itself.

    Details
    • Python
    • Web Audio

    The right half of the snapped picture is cut out with a soft edge and laid over the same picture, with the gap under it filled from its own slate. At rest the layers put the photograph back together. The sound is built in the page; no audio file exists.

  9. Make it move before anyone scrolls

    Before anyone scrolls, let the pod strain at its seam: a short piece of the film opening a little and closing again, on a loop.

    Details
    • canvas
    • added 25 Sep

    At rest the pod strains at its seam: frames 33 to 35.6 of the film, the first give of the split, open and ease shut while the camera breathes with them. Those frames are decoded at 1,440 and 960 px so the still stays sharp. Scroll takes over from the frame the seam is on. Never with motion off.

  10. Make it work with motion off

    For visitors who turn motion off, show four stills instead of the film, and the whole and snapped bars side by side with a button to hear the snap.

    Details
    • prefers-reduced-motion

    With reduced motion the film becomes four stills (frames 0, 46, 86 and 192) and the snap becomes the whole and snapped pair side by side, with a button to hear it.

  11. Audit twice, then fix what filing found

    Check the finished page on a phone and a laptop, then fix what turned up afterwards: a comma touching the letter below it, and a hard edge in a shadow.

    Details
    • site walk
    • Lighthouse
    • copy_check

    Lighthouse on a phone: speed 100, accessibility 100, best practices 100; main image in 1.8 s; layout shift 0. Two defects were found afterwards and fixed: the comma after SCROLL touched the capital below it on a phone (line height 0.92 to 1.15), and a hard edge showed in the shadow under the snapped half (both layers rebuilt).

03 · The calls

Every prompt, exactly as sent.

A call is one request to an AI model: the words, plus any pictures sent with them. Each prompt is copied from our records, never retyped, beside what it made. The exact settings sit under each one. One call made a picture the site does not use: it is listed, and its prompt is left out.

Call 01: The pod: the film's first frame

A picture, from words alone

A ripe red cacao pod with a hairline crack lies on dark slate dusted with cocoa.Generated with AI
Made: picture 01The film's first frame, and the page's first paint.

Nano Banana Pro, an image model, made this picture from the words below alone.

The prompt, exactly as sent

Square photograph, macro product photography, 29 degree field of view, camera 35 cm away looking down at 30 degrees. Exactly ONE ripe cacao pod, deep red-orange with long ridges, lying on exactly ONE slab of dark slate. A single hairline crack has just opened along its length, showing a sliver of white pulp. Low warm light from the right, deep soft shadows, a fine dust of cocoa on the slate. Palette: cacao brown, pod red, slate black, cream pulp. No hands, no people, no text, no logos, no packaging, no other fruit, no watermark.

The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
1:1
resolution
2k
referenceImageUrls
none
sent
22 Sep 2026, 03:34:09 UTC
prompt length
534 characters

Call 02: One whole bar

A picture, from words alone

One whole dark chocolate bar of eight segments lies on dark slate, seen from above.Generated with AI
Made: picture 02The unbroken bar of the snap pair (cropped a little).

Nano Banana Pro, an image model, made this picture from the words below alone.

The prompt, exactly as sent

Square overhead photograph, 29 degree field of view, flat light with one soft shadow. Exactly ONE whole bar of dark chocolate, eight square segments, glossy, lying straight on a slab of dark slate at the centre. No lettering, no logo, no wrapper, no crumbs, no text, no watermark.

The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
1:1
resolution
2k
referenceImageUrls
none
sent
22 Sep 2026, 03:34:11 UTC
prompt length
280 characters

Call 03 · not usedThe first version of the four-bar photo, sent without a reference. Not used: call 07 made it again with the whole bar as the mould reference.

Call 04: The tempering hands

A picture, from words alone

Hands spread melted dark chocolate across a white marble slab with a palette knife.Generated with AI
Made: picture 04The making photo, by the pod-to-bar steps.

Nano Banana Pro, an image model, made this picture from the words below alone.

The prompt, exactly as sent

Square photograph, 47 degree field of view. Exactly ONE pair of a chocolate maker's hands, no face in frame, spreading glossy melted dark chocolate across a white marble slab with exactly ONE steel palette knife; a copper bowl at the edge of frame. Warm side light. No text, no logos, no watermark, no rings or jewellery on the hands.

The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
1:1
resolution
2k
referenceImageUrls
none
sent
22 Sep 2026, 03:34:18 UTC
prompt length
334 characters

Call 05: The snapped bar: the film's last frame

A picture, from words and an earlier picture

A dark chocolate bar lies snapped in two beside five cacao nibs on dark slate.Generated with AI
Made: picture 05The film's last frame, and the still shown with motion off.

Nano Banana Pro, an image model, made this picture from the words below and the picture sent with them.

Sent with it: picture 01, the pod: the film's first frame.

The prompt, exactly as sent

Use the reference photograph for camera, lens, framing, slate and light exactly. Change only this: the pod is gone. At the exact spot where it lay is exactly ONE bar of dark chocolate with eight square segments and a glossy tempered surface, broken cleanly into two halves lying a finger's width apart; the break shows a clean snap edge with a matte, fine-grained interior. Exactly FIVE cacao nibs scattered beside it. No lettering, no logo or pattern embossed on the bar, no wrapper, no hands, no text, no watermark.

The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
1:1
resolution
2k
referenceImageUrls
1 picture
sent
22 Sep 2026, 03:41:32 UTC
prompt length
517 characters
name
C1 pod frame
kind
location
description
camera, lens, framing, slate and light to keep exactly

Call 06: The same bar, snapped

A picture, from words and an earlier picture

The same bar from above, snapped in two between the fourth and fifth segments.Generated with AI
Made: picture 06The broken bar of the snap pair: its right half becomes its own layer.

Nano Banana Pro, an image model, made this picture from the words below and the picture sent with them.

Sent with it: picture 02, one whole bar.

The prompt, exactly as sent

Use the reference exactly for camera, light, slate and the bar's position. Change only this: the bar is snapped cleanly in two between the fourth and fifth segments, the halves a finger's width apart, three small crumbs at the break. Nothing else changes.

The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
1:1
resolution
2k
referenceImageUrls
1 picture
sent
22 Sep 2026, 03:41:35 UTC
prompt length
255 characters
name
C3 whole bar
kind
product
description
camera, light, slate and the bar's exact position to keep

Call 07: Four bars from one mould

A picture, from words and an earlier picture

Four chocolate bars in a row on slate: plain dark, dark with guava, dark with sea salt, and a lighter milk bar.Generated with AI
Made: picture 07The four-bar band, and one crop per bar.

Nano Banana Pro, an image model, made this picture from the words below and the picture sent with them.

Sent with it: picture 02, one whole bar.

The prompt, exactly as sent

Square overhead flat lay on dark slate, 47 degree field of view, soft even light. Exactly FOUR chocolate bars side by side in a row. Every bar is cast in the same mould as the reference bar: the same size and exactly eight square segments in two rows of four. ONE very dark plain bar; ONE dark bar with small pink guava pieces pressed into the back; ONE dark bar with flakes of sea salt on top; ONE lighter milk-coffee coloured bar. No wrappers, no lettering, no logos, no text, no hands, no watermark.

The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
1:1
resolution
2k
referenceImageUrls
1 picture
sent
22 Sep 2026, 03:51:58 UTC
prompt length
502 characters
name
C3 whole bar
kind
product
description
the mould every bar must share: same size, eight square segments in two rows of four

Call 08: The film: from the pod to the bar

A film

Film frame 46: the pod lies split open, full of pale beans.
2 seconds in
Film frame 86: the beans have melted into a glossy pool of chocolate.
4 seconds in
Film frame 192: a dark chocolate bar lies snapped in two beside a few cacao nibs.
The last frame
Generated with AI
Made: film 08Played by scrolling on the page. Three moments from it above.

Kling 3.0 Pro, a video model, made this film from a first frame, a last frame and the words below.

First frame: picture 01, the pod: the film's first frame.

Last frame: picture 05, the snapped bar: the film's last frame.

The prompt, exactly as sent

ONE CONTINUOUS TAKE, 8 seconds, square. The camera holds its position for the whole take; the only movement is the cacao and the chocolate. LENS LOCK: 29 degree field of view, no lens drift. EXACT OBJECT COUNT: exactly ONE cacao pod, ONE slab of slate, ONE bar of chocolate at the end. No hands, no people, no text. 0.0-2.0s: the crack along the pod widens and the pod splits open into two halves, rocking once on the slate. 2.0-4.0s: the pale cream beans tumble out of the pod onto the slate and roll, darkening from cream to deep brown as they roll, as if roasting; the empty pod halves slide out of frame. 4.0-6.0s: the brown beans soften and melt into one glossy stream of liquid chocolate that flows into a smooth pool on the slate. 6.0-8.0s: the pool sets into ONE glossy bar with eight segments, which then snaps cleanly into two halves that separate slightly, matching the final frame exactly. PHYSICAL CAUSALITY: the pod opens because it cracks; the beans move because they fall and roll; the chocolate flows because it is liquid and pools downhill; the bar breaks along its own segment line. Nothing fades or dissolves; objects leave by moving out of frame. TEXT LOCK: no text, no lettering on the bar, no logos, no watermark. Do NOT add hands, tools, people, packaging or extra bars. Do NOT change the slate or the light. Do NOT cut. One uninterrupted take.

The exact settings
tool
generate_video
provider
kling-3.0-pro
duration
8 s
piece
QUIEBRE
endImageUrl
picture 05
sent
22 Sep 2026, 03:55:05 UTC
prompt length
1,368 characters
04 · The log and the time

Every call, and how long it took.

The log lists every call, used or not. The times come from the log and our saved versions, and say so where they are estimates.

One line per call, in the order they ran. Seven made a picture or film the site uses; one did not, and it is listed anyway.

Time

21 min

To make every picture and the film, on 22 Sep 2026.

Details

Every still and the film call: 03:34 to 03:55 UTC, 22 Sep 2026.

1 h 11 min

From the first picture to the site's first working version, built beside Oro Lento.

Details

From the first still to the site's first commit at 04:45 UTC, wall clock, built beside Oro Lento.

About 40 min

The build itself, as we wrote it down at the time. Not timed.

Details

The build itself, as written in our register. Not timed. Two fixes followed, committed at 06:40 UTC.

05 · The honest line

It took more than one prompt.

Eight prompts to two models, three of them built on an earlier picture and one of them a redo. Then the work no prompt does: the film's frames chosen and made light, a snap cut into layers and given a sound, and two audits.

Optional

The next build sheet, by email.

Every sheet is free and open like this one, whether you sign up or not.

Your address is kept for these emails only. Privacy

For business owners

A site like this, for your business.

The sites on these sheets are concepts. For a local business we build the real thing: a site that takes the order, the booking or the call.

See the websites
The other build sheets

Six more sites, taken apart.

FreeBuild sheet 01 · fine jewelerOro LentoA fine jeweler where gold pours into a ring as you scroll.FreeBuild sheet 03 · boat charterCuatro LucesA boat charter that opens in the Miami light of the moment.FreeBuild sheet 04 · trading deskNOCTILUCAA trading desk where glowing sea creatures become the portfolio.FreeBuild sheet 05 · photographer and filmmakerHALIDEA photographer's site where each photo melts into the next.FreeBuild sheet 06 · smash-burger counterFLATTOPA smash-burger counter where the burger comes apart as you scroll.FreeBuild sheet 07 · numbered jacket edition1 OF 1A numbered jacket where a crowd walks away until one man remains.

All build sheets