Interactive 3D Hero 3D

Built for Molde, the sample brand inside the template

A small-batch jelly maker's site whose first screen is a real 3D jelly on a gingham table: poke it and it dents and wobbles, grab it and the top leans after your hand, tap the table and it jumps.

It builds, or it's free. If this prompt doesn't rebuild the site you saw in its live demo, email us within 14 days of buying for a full refund.

Interactive 3D Hero preview: A small-batch jelly maker's site whose first screen is a real 3D jelly on a gingham table: poke it and it dents and wobbles, grab it and the top leans after your hand, tap the table and it jumps.
Open in a new tab

How it moves

The first screen is a straight-down gingham table with a clear raspberry jelly, a four-tier fluted castle, on a white plate and one title top-left. The jelly is real 3D and soft: pressing dents it where you touched, dragging leans the top after your hand while the base stays stuck, releasing flings it back into seconds of wobble, brushing past sways it and tapping the cloth makes it jump. The cloth shows through it, bent. A pinned section turns the jelly under "NOT JUST A PUDDING." and re-sets it in raspberry, lime and blood orange, each flavour's name giant behind it and its price beside it. A pinned strip of four tall photographs slides through a dashed frame. The close is the table again with the order card (flavour, size, day, name, contact); picking a flavour re-sets the jelly. All copy, flavours, the mesh and every image slot sit in one content file.

What you get

  • A tested build prompt · 10.9k wordsPaste it into Claude Code, Cursor, Codex or Lovable and it builds the landing page section by section.
  • The working projectVite + React. npm install && npm run dev and it runs, no keys or accounts.
  • The assets and their promptsEvery image and loop, plus the exact prompts that made them, so you can make your own.

Inside the prompt

A one-page site for a small-batch jelly maker (the sample is Molde Jelly Co., Bristol), on a pale raspberry-milk page in Archivo. The first screen is a real 3D jelly, a four-tier fluted castle, standing on a white plate on a pink gingham tablecloth seen from above. Poke it and it dents where you touched it and wobbles for seconds; grab it and drag and its base stays stuck to the plate while the top leans after your hand, then flings back and jiggles; brush past it and it sways the way you moved; tap the table and it jumps. The jelly is clear: the cloth shows through it, bent. Over the top left sits one big title, "Proper jelly, made in Bristol.", and one small line. Then a pinned section: "NOT JUST A PUDDING." on the left, the jelly floating in the middle and turning as you scroll, and at each third it re-sets in the next flavour (raspberry, lime, blood orange) with the flavour's name in giant letters behind it, bent through the jelly, its note and price on the right. Then a pinned strip of four tall photographs sliding through a dashed frame. The close is one scene: the jelly back on the table beside an order card (flavour, size, day, name, contact); picking a flavour re-sets the jelly; one quiet base line.

  1. What it is
  2. Style collection
  3. Build steps
  4. Assets
  5. Motion
  6. Make it yours
  7. Launch checklist
  8. Acceptance checks

More like this