3D brand site · for Block & Brew
Coffee 3D
A voxel coffee bar built in Three.js. Scrolling flies the camera through the shop and up to the menu board.
Overview
Block & Brew is presented as a small east-side roastery, and the whole site is built around one voxel scene: a blocky street corner with the shop, its bar, chairs and plants, rendered live in the browser. The hero sets the tone with “Coffee, Cubed.” in heavy capitals over the 3D street, a roast-lot badge and three stat cards for origins, rating and daily hours.
Scrolling drives the camera rather than just moving the page. It pushes in through the shop to the menu board, then keeps the scene running behind the content while panels slide over it: the roastery story with an equipment spec card, a visit section with address, hours and a drawn street map, and an order panel. It is built with React and Vite, with the scene in Three.js r160.
Scroll-driven camera
Scrolling moves the camera through the voxel shop and up to the menu board, so the first scroll reads as walking in.
Menu in the scene
Prices live on the 3D menu board above the bar instead of in a separate list.
Panels over 3D
The story, visit and order sections are cream panels layered over the live scene, set in Archivo Black and Space Mono.
Stills from the live site
Technical specs
- Live site
- cofee3d.vercel.app ↗
- Page title
- BLOCK & BREW — Coffee, Cubed.
- Type
- 3D brand site
- Built with
- React, Three.js, Vite
- Typefaces
- Archivo Black, Space Mono
- Palette
- #F1E6CE#F8F2E2#1E120A#D2653A#6B8269
- On the page
- Coffee, Cubed. · Built for the bar · We roast in a concrete box. · Find the block. · Skip the queue. Collect in ten.
- Recording
- Captured from the live site at 1440×900 · H.264, 1200 px, 25 fps · 14 s
Related services: 3d & webgl websites.
