Bedsgone
Mattress pickup website, with a 3D hero and bookings priced live
About the project
A client asked for a website for a mattress pickup and recycling service, and this is the prototype I built to show them the direction: the brand, the look, the pricing model and the booking flow. The pitch is simple — two flat prices, and a mattress's size, type or age never changes what you pay. It has a landing page with a hand-built three.js scene and a five-step booking wizard whose price updates live.
What I built
- 01A three.js scene built from geometry alone, no model files: the truck drives in, the mattress drops into the bed and scrolling drives it away
- 02three.js loaded through a dynamic import() and only after a WebGL check
- 03Five-step booking wizard with a live price, drafts saved to localStorage and deep links that pre-fill the form
- 04Prices, fees, time windows and service areas in one config file, with the maths in pure functions ready to run on a server
- 05A GSAP and Lenis motion system, switched off entirely under prefers-reduced-motion
- 06The brand rebuilt as SVG, colour tokens in Tailwind 4's @theme, and fully static output
At a glance
- Context
- Prototype built for a client
- Role
- Solo project — brand, design and front end
- Year
- 2026
Stack
- Astro
- TypeScript
- Tailwind CSS
- three.js
- GSAP
- Lenis
Links
A client prototype, not a live business. No booking is sent or charged, and the contact details, testimonials and service area are placeholders.