Custom Cat Tree Studio
An interactive 3D product configurator for custom cat furniture
A product configurator exploring real-time 3D customization of cat trees: procedural geometry responds as the customer adjusts size, tiers, materials, and features, with pricing and ordering logic following the configuration.
- Status
- Functional Prototype
- Category
- 3D / AR
- Year
- 2025
- Primary stack
- ReactTypeScriptThree.js
- Demo
- In preparation
Project visualization — a designed representation, not a literal screenshot
01Overview
What this is
A product configurator exploring real-time 3D customization of cat trees: procedural geometry responds as the customer adjusts size, tiers, materials, and features, with pricing and ordering logic following the configuration.
Explores
- 3D product configuration
- Procedural geometry
- Pricing logic
- Product customization
- Ordering
- Firebase
- Geometry testing
- Responsive UI
02Explore the build
The demo and the build insight
The demo
This project is being actively developed.
Current build: functional prototype. There isn't a public application to enter yet — the verified build details sit below in Build Insight.
Build insight
- Current build
- Functional Prototype
- Architecture and features below are the real build.
- Demo
- Coming soon
- No demo url configured yet on this project.
Build insight — real project data, not a live application.
Configuration is modeled as a normalized state, and every downstream artifact — geometry, price, order payload — is a pure function of that state. There is no separate “design” and “order” that can drift apart.
03Problem · opportunity
What it sets out to solve
Custom products are hard to sell online because the customer cannot see what they are buying. A configurable cat tree could be dozens of variations, and a photo grid cannot communicate any of them accurately.
04Concept
The core idea
Give the customer a live 3D model of the exact configuration: as they change dimensions or materials, the geometry updates, the price updates, and the order reflects precisely what the builder made.
05What I built
What's actually in the code
A functional prototype: procedural 3D geometry driven by configuration, pricing logic tied to the same state, a customization flow, ordering workflow, geometry tests, and a responsive configuration UI running against Firebase.
Approach
Procedurally generating the 3D model from configuration variables so every valid combination yields a real, renderable object. Pricing logic derives from the same configuration state, and ordering captures the full spec. Firebase stores configurations and cart data.
06Key features
What's implemented today
- Procedural generation so the model always matches the specification
- Configuration state as the single source shared by model, price, and order
- Transparent pricing logic derived from configuration choices
- Ordering workflow that captures the exact built configuration
- Automated geometry tests validating generated models
- Responsive, tactile configuration UI
07Architecture
How it's structured
Configuration is modeled as a normalized state, and every downstream artifact — geometry, price, order payload — is a pure function of that state. There is no separate “design” and “order” that can drift apart.
Design notes
Procedural generation keeps the artifact count at one instead of exploding SKUs. Geometry tests validate that configurations remain physically coherent as dimensions change.
08Technology
The stack
- React
- TypeScript
- Three.js
- Firebase
- Tailwind CSS
09Challenges · lessons
Where it got hard, and what it taught me
Challenges
- Making procedural geometry robust across the full configuration space
- Keeping pricing legible enough that a customer understands what drives the total
- Enforcing physical constraints (e.g., platform spacing) inside the configurator
Learnings
- Configuration-driven forms of commerce benefit enormously from treating state as the single source of truth
- Live visualization converts a “can I even do this” product into a confident purchase
- Testing generated geometry is necessary the moment configurations become combinatorial
10Current status
Where this project sits today
Core features are engineered and demonstrable. Not yet production-hardened or deployed to real users.
Demonstrated
- Functional prototype: configuration, procedural 3D, pricing, and ordering flow run today
- Geometry tests cover the generated model space
11What comes next
Where this goes from here
- 01Broaden materials and optional features with matching procedural support
- 02Connect ordering to production-friendly spec exports
- 03Reinforce geometry testing against edge configurations