This site uses cookies

Some keep the store working, like sign-in. Meta's pixel helps us measure our ads, and it stays off unless you accept. Cookie policy

Launch price: Lifetime is $229 for every kit and every block until Sun, Nov 15, 11:59 PM PT. Then it's $249.Get Lifetime

LM-58Restaurants

Rosmarino

A trattoria you walk into: a rainy street at blue hour in live 3D, through the door, and a printed paper menu that opens in front of you, one dish at a time.

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.

The page opens across a narrow street at blue hour in a light rain, in live 3D: an ochre facade with green shutters, a red and white awning with the name on its valance, string lights over wet cobbles and puddles, a chalkboard with tonight's special and the lit room through the windows, under "Come in. Stay late." Scroll and you cross the street, the door swings in and you walk through it into the room, "Benvenuti.", where a bi-fold paper menu printed in code rises and opens in front of you, with real letterpress relief in the card. Point at a dish and a red pencil ring circles it; click it and a dish card comes up over the menu with what it is, what's in it, a wine pairing, the price, and previous and next, with arrow keys and Esc. Scroll on and the menu goes down and the camera settles on the window table, then the visit section shows a live "Aperto." or "Chiuso." in the restaurant's own time zone, the hours card with today circled in pencil, a drawn street map, the address, reservations by phone, the contacts and a big wordmark; any other address is a 404, "Wrong door." Phones show the menu a page at a time and tap through the dishes, browsers without WebGL get a rendered still for each part of the walk and a paper menu in the page, and reduced motion cross-fades between poses instead of flying. Dish photos are optional: the card shows a drawn plate until you add them, with the prompts included. For restaurants, trattorias, wine bars and the agencies that build their sites.

How it's made

  1. One street, one room, built in code

    The facade, the shopfront, the awning, the lantern, the string lights, the olive trees and the neighbouring houses, then the room behind the door with its beams, linen tables, candles, bar and wood oven, are all geometry generated in the browser. UVs are in metres, so the CC0 stone, plaster, brick, wood, tile and linen textures from Poly Haven keep their real size. There are no model files.

  2. The scroll is a walk

    The page is a stack of tall sections whose scroll positions become one timeline value. A director turns that value into the camera path, the door's swing, the menu's pose and the light, on monotone cubic tracks so the camera glides through each boundary, with separate tracks for landscape and portrait screens.

  3. Light from the scene itself

    A fixed rig of lantern, string lights, pendants, the oven and candles lights the scene, with area lights for the shop windows and the doorway. There is no HDRI: two light probes are baked at load from the scene, one in the street and one in the room, so wet stone and glass reflect this street. A composite pass adds bloom, grade, AgX tone mapping, vignette and grain.

  4. A menu printed in code

    The menu is one continuous sheet of card folded in the middle, so the print never stretches while it opens and the cover curls as it swings. Each face is laid out from the menu data and printed on canvas as ink plus a height map for tooth, fibres and a letterpress impression, which the paper shader lights from the room.

  5. Real buttons over a 3D print

    Every frame the menu reports where each printed dish line is on screen, and the page moves one real button over it. Hover draws the pencil ring on the paper, a click opens the dish card, and keyboard users tab through the dishes in menu order.

  6. The dish card and the live hours

    The dish card is a print and a paper note laid over the menu, a bottom sheet on phones, with neighbours, arrow keys and focus kept inside. The hours card, the header and the APERTO or CHIUSO sign on the 3D door all read one clock in the restaurant's time zone.

  7. Tiers, stills and reduced motion

    A starting tier comes from the GPU and the screen, and a governor moves only the render scale, so no shader recompiles mid-scroll; the home page uses about 15 programs. Without hardware WebGL2 the page shows stills rendered from the same scene, and reduced motion cross-fades between the poses.

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.

  • scripts/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.js

  • jsconfig.json

  • tailwind.config.js

  • postcss.config.js

  • .gitignore

  • 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
Vite 8.2.4 · React 19.2.8 · three.js 0.171.0 · TanStack Router 1.170.41 · Tailwind CSS 3.4.19 (base styles only) · Plain JavaScript
File size
10.7 MB
Triangles
74,801
Browser
Tested in desktop Chrome (headless, with a GPU) at 1440 x 900 and at phone size 390 x 844 with touch, with WebGL turned off and with reduced motion. Needs WebGL2 for the 3D and falls back to rendered stills and a paper menu without it. Not tested on real phones, in Safari or in Firefox.
Released
Nov 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

Rosmarino is an invented trattoria: the name, the rosemary mark, every word, the menu, the prices and the hours were written for the kit, and the address, phone, email and Instagram handle are placeholders. The street, the room and the menu card are built in code with no model files, and the prints in the scene (awning, sign, chalkboard, door card, the menu's letterpress) are drawn on canvas. The textures are CC0 from Poly Haven, and the stills were rendered from the kit's own scene. There are no photographs and no AI-generated images: the dish card shows a drawn plate, with prompts included for making dish photos. Bodoni Moda and Jost are under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction.

Buy LM-58 Rosmarino

Single kit

Price: $49once

By buying you agree to the Terms and License.

Included with Annual and Lifetime.

Or every kit for life, $229.

Launch price until Sun, Nov 15. Then $249.