LM-47Restaurants

Sola

An açaí bowl shop website where the bowls 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.

Sola opens on a sunshine-yellow stage: "A little wild. A whole lot of good." in a big soft serif, and an açaí bowl in real-time 3D floating over its shadow with a strawberry, blueberries, a banana coin and mint leaves round it, its juice streaming round it in glossy ribbons; drag the bowl, fling the fruit, tap one for a burst of juice. Scroll and the fruit flies down into the cream band below, where three 3D still lifes of berries, granola and mint wait. Then the menu: six bowls on a 3D turntable that the scroll turns, each bowl's purée swirling into the next while the screen floods with its colour; a build-your-own bowl where every topping drops in live in 3D with a running price; a find-your-bowl quiz that drops your bowl in with confetti; a sunrise you scroll through for the story; an illustrated map of three shops with live opening hours; and a sunshine footer with a newsletter sign-up and a giant wordmark. A bag, a pickup checkout and an order number with a live tracker complete the flow. sola is a placeholder brand name you replace with your client's. For açaí and smoothie bowl shops, juice bars, cafés and healthy fast-casual brands that want a site as bright as their bowls, and for studios that build sites for them.

How it's made

  1. A brief and a reference

    The nav, the hero and the band under it were matched, measured and all, to a supplied design of the first screen. Every section below was designed for the site from one written contract: the reference's colours and type as tokens, shared motion standards and a designed phone layout for each section.

  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 bowl and a purée built in code

    The ceramic bowl is a lathe from a measured profile, with a speckled ivory glaze and the brand's name pressed into it. The purée is a mounded dome whose shader draws a pebbly frozen grain, frost, seeds and icy sparkles, in six flavours that swirl into each other.

  4. Fruit in pieces

    Strawberries, blueberries, banana, kiwi, granola, almonds, mint and drizzles each have their own module, with several variants at real sizes and textures painted in code. A layout lays them in neat bands like the reference bowl, and re-flows the bands for any set of toppings.

  5. Light and finish

    A warm studio drawn in code (a key softbox up left, 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 whisper of bloom.

  6. Juice and life

    Glossy ribbons of each flavour's juice spiral round the bowls with droplets and tumbling fruit. Nothing is ever frozen: glints slide over the fruit, mint trembles, sparkles wink on the purée.

  7. Motion that stays smooth

    Lenis smooth scrolling, scroll read in the scroll event against measured offsets, everything off screen paused, and a safety brake that switches the 3D off if it ever holds the page up. Only transform and opacity animate.

  8. Phones and fallbacks

    A designed phone layout for every section and a lighter 3D build (smaller textures, fewer pieces). Without WebGL2 every bowl is a drawing; 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.

  • 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 · framer-motion 11.18.2 · canvas-confetti 1.9.4 · 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 (Fraunces and DM Sans)
File size
36.6 MB
Triangles
453,704
Browser
Current Chrome, Edge, Firefox and Safari 16.2 or newer, on desktop and phones (WebGL2 for the 3D, drawings 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 design supplied for the brand. The brand's pictures (the yellow studio backdrop, the leafy branch and the bowl pictures) were generated with ChatGPT for this kit by Designed by Parallel, LLC; their trimmed and half-size copies and the five recoloured bowls 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, every 3D object is built in code with three.js (no scans, downloaded models or photo textures) and matched against those pictures, the six model files are exports of that code, and every mark and illustration is drawn in code. The fonts are open-source Google Fonts.

Buy LM-47 Sola

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.