chrisrosso.dev

This site: a brick town that builds itself as you scroll.

Client: Christopher Rosso
Scope: Concept, 3D, design, build
Year: 2026
Status: Live · chrisrosso.dev (opens in a new tab)

The home page: step 1 of the booklet beside a brick baseplate with a street, a taxi and a brick figure of me waving from a stand with my name — Step 1: the street, and me waving from my stand

My own site, made as a building-instructions booklet. Each section is a step, and as it scrolls in, a brick town builds that step behind the words: the street, then Plazuela, Petzone and Purrsuit, then an empty lot that's yours to build on. Everything is drawn in code with three.js, including me, waving from a stand with my name on it.

What shipped

A town that builds itself one step per section, brick by brick, as you scroll
Every model drawn in code, layer by layer, and split into real brick sizes with staggered seams, which a switch pulls apart to show
Faces, shirts and signs printed onto the bricks from a canvas
An empty lot where visitors stack their own bricks, then share it as a link or turn it into a brief
Draws only when something moves, and the words load before any 3D
English and Spanish, and calm under reduced motion
Brick rain from the logo that lands on the page and stacks, and building instructions for every model

Tagged

three.js
webgl
3d
web design
creative development
astro
interactive

The steps

4 screens

Each section of the home page is a step in the booklet. Scroll, and its part of the town drops into place behind it, brick by brick, while the camera moves to it.

Step 2: two colonial houses with clay roofs, a fountain and a tree in flower, built for Plazuela — Plazuela: two houses on a little plaza, sign over the door

Step 3: the Petzone shop with a striped awning, a bone on the roof and Dasha the kitten by the door — Petzone: the shop, and Dasha by the door

Step 4: a fish stall on wooden docks under a Purrsuit sign, and Jinx the black cat in his purple hoodie — Purrsuit: the fish stall, and Jinx in his hoodie

Step 5: an empty lot with a hazard-striped border, a sign that says your product goes here, and a crane lowering a red brick — The last step: an empty lot that visitors can stack their own bricks on

On a phone

5 screens

On a phone the town keeps the top half of the screen and the steps scroll underneath it.

Step 1 of the home page on a phone: the brick town above, the step's card below

Step 2 of the home page on a phone: the brick town above, the step's card below

Step 3 of the home page on a phone: the brick town above, the step's card below

Step 4 of the home page on a phone: the brick town above, the step's card below

Step 5 of the home page on a phone: the brick town above, the step's card below

Things to find

4 screens

The site rewards poking around. The lot on the home page takes your own bricks, and each colour is a part, so a pile can become a brief or a link to send. Click the logo three times (it tells you so) and bricks rain down and land on the page. The brief builder stacks every part you pick and adds up a rough price, and each case study opens with its project in bricks, with its building instructions to step through.