MattressBuilder

Preview

Web app

A website for designing your own mattress in 3D. You stack layers of wool, latex, foam and coils, drag them into the order you want, and watch the bed and its price change as you go.

Parked. The 3D builder shown here was online from 13 June to 25 July 2026, and nothing was ever for sale. A plainer planner replaced it at the same address.

What it is

A mattress is a stack of layers inside a zip cover: a support core of coils or firm foam at the bottom, softer latex or foam on top. Small online shops sell each of those layers on its own, and some people use them to build their own beds. MattressBuilder was a site for designing one before you buy.

It had three pages. The home page explained the idea. A survey asked five or six questions about how you sleep and put together a starting stack as you answered. The builder then showed that stack in 3D.

The builder had seven kinds of layer: a quilted cover, wool, latex, memory foam, pocketed coils, base foam and a wood foundation. You could add, remove and swap them, pick a thickness for latex and foam, and choose Twin, Queen or King. On a desktop you could pick a layer up in the 3D view and drag it to a new place in the stack. A list beside it priced each layer and kept a running total.

It was a prototype. Nothing was for sale, and the prices were round numbers typed into the code, not quotes from any shop. It was online for six weeks. Then I rebuilt the site as a plainer planner on real parts and real prices, and that planner is what the address shows today.

What it looked like

The builder in June 2026. Every layer is drawn in the browser, and the coil layer alone is 126 cylinders. The card at the bottom wears an AI badge, but a fixed scoring rule wrote it.
The survey. It reads like a chat, and the build on the right changes with each answer.

Why I started it

MattressBuilder starts from one complaint. It is hard to find out what is inside a brand-name mattress and what those parts cost. The parts are not secret, though. Shops sell them openly, by thickness and firmness, at prices anyone can look up.

A bed built from loose layers is also not glued shut. If one layer wears out or turns out too firm, you replace that layer and keep the rest.

My plan from December 2025 gave one more reason. Few people knew you could buy a mattress this way at all. So the first job in the plan was a site that made it easy to see what you were building.

The plan was to start as a front door. The site would pass each order to an existing shop, and later it would make its own layers. It never got that far.

How it got here

This is the oldest idea on this site. It spent a year as sketches and plans before it was a page anyone could open.

June 2025First sketches. Three static mockups and a logo, then four prototypes that drew the layers with CSS.
December 2025A three-page plan for the business. It already describes the site: a chat that helps you choose, and a page where you drag layers and see what they cost.
April 2026The first builder in Three.js, a library for 3D in the browser. 3,055 lines in one file, from about a day of sessions with Claude.
May 2026A repository, the survey, and a catalog of seven layer types. Several experiments stayed on side branches.
13 June 2026Online at mattressbuilder.redfinch.dev. The next day took 15 commits and 30 releases to make it work on a phone.
25 July 2026Replaced by the planner, a rebuild on a catalog of real parts.

The hard parts

A 3D view that works on a phone

On the day after launch the builder turned out to be unusable on a phone. The 3D view took only mouse input. Layers moved by drag and drop, which a touch screen does not support. The canvas also took its size from the wrong box, so the mattress was drawn 686 pixels wide and 2,596 tall, then squeezed into a view of 343 by 320.

Fixing the shape showed the next problem. The camera was set up for a wide screen, so on a phone the bottom of the stack was cut off. The fix made the camera's distance and height follow the shape of the canvas. It overcorrected: in the builder's last version the top of the stack is cut off on a phone instead. The 3D view on this page has a new camera that keeps the whole stack in the frame.

Phones also got arrow buttons to move a layer, pinch to zoom, and a bar at the bottom that kept the price in view while you changed the stack.

A builder nobody could reach

For its first 28 hours online, every link to the builder led back to the home page. The links pointed at a file the host had been told to skip, and the host answered any unknown address with the home page.

The same fix made the survey's result arrive. Until then the builder ignored it and opened its default stack.

Pages that said things that were not true

The first pages promised free shipping, a 100-night trial and a lifetime warranty. They showed three customer reviews and a monthly payment price. Two features wore an AI badge and ran on fixed rules. None of this was real. AI agents wrote the pages, and where a fact was missing they wrote what a mattress site usually says.

Nothing was for sale, so nobody paid for a promise. But the site was public for six weeks with those lines on it. One was caught at launch: the sign-up form said a copy had been emailed, and no email was ever sent.

The rebuild started from one rule: never estimate a price. Every price in it was read from a shop's own page.

Work that never reached the main branch

In May most of the work happened on side branches, one for each session with an AI agent. They held a way to save designs, a coach panel, and a sign-in and email system. Four of those branches were never merged, and several more sessions left no commit at all.

So the builder that went online in June came from the plain version of 10 May. The link that carries a survey result into the builder was written three times, because the first two versions stayed on branches that were never merged. Most of that work exists only on my laptop.

Reduced motion that still moved

Some people set their device to cut down on animation. The first attempt to respect that changed the default length of every animation. But nearly every animation on the site set its own length, 17 of them in the builder alone, so everything still moved. The fix speeds up the whole timeline, so each animation ends at once.

What replaced it

In July 2026 I rebuilt the site from scratch as a planner. It dropped Three.js and draws the stack with CSS. Its catalog holds 221 parts and 1,315 prices from seven shops, each read from the shop's own page on 25 July 2026, and its result is a parts list you can order from.

The planner is at mattressbuilder.redfinch.dev. I have not worked on it since July, so many of its prices will have changed.

What it ran on

This is what the 3D builder ran on while it was online.

Layer	What	Notes
Pages	Three HTML pages, each with its CSS and JavaScript inside	7,300 lines in all. No framework and no build step.
3D view	Three.js r128	Every layer is a box with a texture drawn in the browser. No image or model file is loaded.
Motion	GSAP 3.12.5	Layers fly into place, and the stack opens and closes.
Catalog	One JavaScript file	Seven layer types with their colours, thicknesses and placeholder prices.
Survey	Plain JavaScript	One function of fixed rules turns the answers into a stack. No model is called.
Sign-ups	Firestore	An email address and the build, written once. Nobody can read them from a browser, and nothing was ever sent.
Hosting	Firebase Hosting	GitHub Actions deployed each push to the main branch.
Backend	FastAPI and SQLite	Written for a chat with a real model behind it. Never deployed.
Tests	None automated	Checked by hand and by agent passes in a browser.

days online: 42
releases: 31
commits in this first site, on every branch: 32
lines in the three pages: 7,300

Counts read from the repository and the hosting record on 5 Nov 2026.

Other projects

The Crate
Beta
A music ranking and concert discovery app. You sort the music you love into tiers, then use that crate to compare taste with friends and find concerts by those artists near you.
App · iOS · Android · Web
2,380 commitssince Jun 2026
Crate ingest pipeline
In development
A pipeline that finds concerts on the venues' and promoters' own pages and in the ticketing feeds, and turns them into one clean record for each show. I am building it to feed the concert listings in The Crate, and later to offer as a dataset of its own.
Data pipeline
570 commitssince Oct 2026
LampLit
Beta
A phone app that works like a light on your porch. Turn your light on when you're up for company, and the friends who see it can knock or text you.
App · Android · iOS in review
539 commitssince Sep 2026