LM-35Restaurants

Sear

A smash burger built layer by layer in live 3D, then smashed on the steel as you scroll.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A one-page site for Sear, a made-up smash burger restaurant, built in live three.js, where the burger itself rides down the page with the visitor. It opens on a butter-yellow page with a cobalt headline and an orange stage that wraps round the words: a double smash burger turns in the light with onion rings, crinkle-cut pickles, drops of house sauce and sesame floating round it, leans toward the pointer and turns when you drag it. The signature card's dots swap the burger itself, from Double trouble to The hot one with jalapeños to a Single, and the plus puts it in the order. Scroll, and it comes apart into its eight layers and stacks itself back up heel first, each layer named as it lands: toasted brioche heel and house sauce, crusted smashed patties, melted cheddar running down in drips, the pickles, a nest of crispy onions, the glazed sesame crown. Then the griddle: a cold ball of beef drops onto black steel, a weighted press squashes it flat, the edges sear to lace, a spatula flips it crust up and a slice of cheddar slumps over it, with fat spitting, steam rising, and the steel's temperature and the clock on a readout. After that, a small burger keeps you company beside the menu (three tabs, a picture of every dish rendered from the same 3D, a bag for pickup), the story, three locations on a drawn map that know if they're open, and the Smash Club sign-up, and lands on the wordmark at the foot of the page. Every word, price and opening hour sits in one file. The public demo runs in the browser and sends nothing. A buyer's copy runs live on any host: each pickup order goes to that location's own ordering link, and Smash Club sign-ups go to your own Base44 app (an admin-only list at /club with a CSV download) or to a form endpoint you name. For burger joints, restaurants and food brands that want the food to be the show.

How it's made

  1. The mockup, made live

    The hero keeps the mockup's bones: the butter-yellow page, the cobalt headline, the signature card, the badge and the three menu cards. The orange stage's edge is traced from where the headline's words actually sit, so it hugs them at any width, and the burger on it is real 3D you can turn.

  2. A burger built the way it's stacked

    Every layer is a closed surface turned from a profile and pushed out by noise: a glazed brioche crown and a toasted heel, patties with a crowned top and a thin lacy edge, crinkle-cut pickles with ridges about 5 mm apart, crispy onion strings piled in a nest, sesame spaced on the dome.

  3. Cheese that melts, sauce that runs

    The cheddar and the house sauce are draped over what's under them and hang where they run past the edge. A drip isn't stuck on: the sheet itself runs further at that angle, a finger with a round end that gathers into a glossy bead.

  4. Food that reads as food

    No texture maps: each surface is a shader of its own position, packed crumbs for the beef and the batter, pores in the crumb, gloss on the egg wash and the fat. Light soaks into the bun, the cheese, the sauce and the pickles and glows at thin edges, and once the burger is built its own occlusion is baked into every vertex, so the patties sit dark on the heel and the onions have depth.

  5. One burger, the whole way down

    The burger is drawn once, on its own transparent canvas over the content. Each section only says where it wants it (on screen, how big, its angle and tilt, how far apart), and the scroll blends one shot into the next: the hero, apart and stacking in the build chapter, away before the griddle, then small in the margin down to the footer's wordmark.

  6. Ninety seconds on the steel

    The griddle is a second scene behind the content. The ball of beef is the patty with its vertices pulled onto a lumpy sphere, so the press squashes one mesh into the other, the crust grows from the edge in, and the cheddar morphs from lying flat to slumped. It's built in a worker and compiled ahead, so it's ready when the chapter pins.

  7. Off the main thread

    All the food is built in web workers and sent back as raw buffers, so the page never freezes while a burger is made. The other two signatures build quietly once the first is up, and phones get a lighter mesh and a lighter occlusion bake.

  8. A list that holds up

    The Smash Club form goes through a backend function into an admin-only table: field checks, a bot trap, a flood brake, and the same address signing up again only counted, never renamed or reactivated. The team reads it at /club, with a CSV download.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • base44/

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • index.html

  • bench.html

  • package.json

  • package-lock.json

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • README.md

    Start here. What's inside and how to run it.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.3 · React 18.3 · React Router 7.18 · three.js 0.171 · Tailwind CSS 3.4 · Lenis 1.3 (smooth scroll) · Base44 SDK 0.8 (database / functions / sign-in) · One Base44 backend function (Deno) · Web Workers (food geometry and baked occlusion) · GLSL shaders · Procedural geometry · Google Fonts (Archivo / Fraunces / Nunito Sans)
File size
0.7 MB
Triangles
1,161,640
Browser
Needs WebGL 2 for the 3D: current Chrome, Edge, Firefox and Safari, on desktop and phones. Phones (and any screen with ?q=low) get a lighter burger, about 390,000 triangles against 1.16 million in the desktop hero; any device steps its resolution down if the frame rate falls, measured against its own screen rate. The griddle is built and its shaders compiled while the visitor is still in the build chapter. Without WebGL 2 the stage shows its poster and every section, the menu, the bag and the form still work. Reduced motion stills the float, the sway and the spitting fat. The Smash Club form needs your Base44 app or a form endpoint of your own, and the /club list needs Base44. Tested in headless Chrome at 1440 x 900, 1280 x 800 and 390 x 844, with no sideways scroll and the pinned chapters holding through their whole length; Safari, Firefox and real phones weren't part of the tests.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

Built in code: every piece of food is geometry and shaders written for this kit, the bun, the sesame, the patties, the cheese, the pickles, the onions, the sauce, the fries, the shakes, the onion rings and the griddle, with no model files, scans or photos of food. The dish pictures on the menu are renders of the same 3D. The landing page mockup the hero follows and the orange stage backdrop were made for this design and supplied by Parallel; the backdrop is an AI-generated image. Fonts load from Google Fonts under the SIL Open Font License; three.js and the other libraries are listed in THIRD_PARTY.md. Written with an AI coding assistant (Claude Code) under Parallel's direction. Sear, its locations, menu, prices and hours are made up.

Buy LM-35 Sear

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.