LM-44Restaurants

Brasa

A Mexican street kitchen website where the tacos are real-time 3D, built entirely in code.

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.

BRASA opens on a loud cream poster: STREET FOOD. and MAIN CHARACTER. in giant condensed type, orange and gold flames licking up behind them, and a carne asada taco in real-time 3D flying through the middle with a lime half, a roasted chili and cilantro floating round it; drag the taco, fling the props, or tap TAKE A BITE and a bite comes out of it. Scroll and the street takes over, one real object per section: a comal where a ball of masa presses, flips and puffs as you scroll; a hand-painted menu board of six tacos beside a pass window where each taco is plated in 3D, built in the real order; a lotería-style deck that deals you a taco; a plancha where you build your own taco in 3D while a ticket prints on the rail; a taco cart at night under a bare bulb that tells the story; three storefronts whose neon lights up when they are open, on live local time; and a steel shutter footer that rolls down with the newsletter sign-up taped to it. A bag that prints like a counter ticket, a pickup checkout and an order number with a live tracker complete the flow. For taquerias, food trucks, street-food restaurants and fast-casual chains that want a site as loud as their food, and for studios that build sites for them.

How it's made

  1. A brief and a reference

    The first screen was matched, measured and all, to a two-taco campaign poster. Every section below it was designed from one written design system: a type ramp, colour roles, one light from the upper left, real materials (paint, steel, neon, thermal paper, tile).

  2. One renderer for the whole page

    Every 3D view draws through a single WebGL2 renderer and copies its frame to its own canvas. Shaders compile once, in a queue, before a view's first frame, so the page never freezes mid-scroll.

  3. A tortilla built in code

    A grid disc folded into an even U, about 2 mm thick, with a soft curled lip and torn notches. Its masa is drawn per pixel: pebbly grain, toasted ends and about seventy charred blisters, in corn, flour and blue corn.

  4. Food in pieces

    Every filling and topping is its own module with several variants at real sizes, from steak chunks to diced onion. A layout fills the trough in recipe order over a bed of the same filling, and each piece is an instance with its own tint.

  5. Light and finish

    A studio drawn in code (a warm key softbox, a rim, a floor bounce) lights every view, with one shadow-casting key from the upper left. A finishing pass tone-maps with PBR Neutral, grades and adds a little bloom.

  6. The street front in SVG and CSS

    The cart, the storefronts, the neon, the papel picado, the shutter and six original lotería-style cards are drawn in code in one consistent hand. Things move only the way the real object would, by transform and opacity.

  7. Motion that stays smooth

    Lenis smooth scrolling, scroll read in the scroll event against measured offsets, everything off screen paused, and every section below the hero mounted after the first paint. Only transform and opacity animate, so nothing makes the browser lay the page out again while it scrolls.

  8. Phones and fallbacks

    A designed phone layout for every section and a lighter 3D build (about a third of the triangles, half-size textures). Without WebGL2 the views show photos; reduced motion gets the end states.

In this kit

  • src/

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

  • public/

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

  • models/

    3D models. The product the page is built around, ready to render.

  • tools/

    Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

  • licenses/

  • index.html

  • package.json

  • package-lock.json

  • .npmrc

  • .gitignore

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • jsconfig.json

  • components.json

  • README.md

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

  • 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.

  • ASSETS.md

    Asset list. Every image and font in the kit, where it came from and its license.

  • 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.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • LICENSE.md

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

See a real zip, opened

Specs

Stack
React 18.3.1 · Vite 8.2.4 · three.js 0.171.0 · Lenis 1.3.26 · React Router 6.30.6 · lucide-react 0.475.0 · Tailwind CSS 3.4.19 (the template's reset) · Plain CSS for the site · Node.js 20 or newer · Self-hosted fonts (Anton / Inter Tight / Playfair Display / DM Mono)
File size
31.8 MB
Triangles
148,064
Browser
Current Chrome, Edge, Firefox and Safari 16 or newer, on desktop and phones (WebGL2 for the 3D, photo stills without it); checked in Chrome.
Released
Oct 2026
Version
1.0.0

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

The first screen follows a reference poster supplied for the brand. The brand's pictures (the tacos, the chili, the lime, the cilantro and the wordmark) and its vector marks were generated with ChatGPT for this kit by Designed by Parallel, LLC; the textures cut from those pictures, the share image, the comal's first-paint renders and the six model files (which embed those textures) were made from them in this build (ASSETS.md lists each file). Everything else was made for this site: the code was written with an AI coding assistant from written briefs and a design system, every 3D object is built in code with three.js (no scans or downloaded models), and the street-front art and the six cards were drawn in code. The fonts are open-source Google Fonts and the script lettering was traced from an Apache-licensed font.

Buy LM-44 Brasa

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.