The court · a workshop
A live cat camera is not a wall of tiles. You stage one sitting room. You give the cat five reasons to go somewhere. Then you rebuild that room on the website as a place people can turn and look. Open the live cat cam and move around. That show is the proof. This page is how we built it.
| The question | The page that answers only that |
|---|---|
| How is the real room staged? | This page: five stations, one room, measured with a tape. |
| How does the 3D room run in a browser? | The three.js court: live camera textures, meshopt GLBs, 92 MB down to 11. |
| How does the 3D shop sell real things? | The 3D shop and print-on-demand: decals from the real print files, Printify variant ids, the Stripe webhook. |
| Why does a cat cam have a WebGL website at all? | The 3D website, plainly: 25 static pages, one renderer, a phone shell, one Node process. |
| How do the HTML shell and the scene share a page? | Page architecture: the phone gate, the overlay state machine, poster-first boot. |
| What does a visitor actually download? | Performance: the byte ledger on desktop and phone, cache lifetimes, the 17 August before and after. |
| How is the shop laid out in three dimensions? | Shop layout: the floor plan in coordinates, the locked camera rig, the pick path. |
| How do you test a WebGL site with no GPU? | Quality checks: the four scripts that gate every deploy. |
| Where did the cat mesh come from? | A 3D cat from one photo, and the 3D and image generation section. |
Why a court
Most live cat cameras dump every feed on one page. You get six rectangles and no sense of left or right. A visitor cannot tell if the fountain is across from the bowl or in another house. We wanted the opposite: you arrive in a sitting room, you turn, and you know where you are.
The live destination is a 3D court. We do not embed that app here. Go next door, click in, and walk. Water is a station. Food is a station. Treat is a station. Court is the wide. Face is the eating close-up. When she crosses the runner you can follow her because the room is one place.
Teach the court here. Send people to the show.
The 3D court is already up. Open helenthecatlive.com, then move. Turn. Look at the fountain, the bowl, the quilt. If you cannot walk the room, we have not built a court yet — we have built a dashboard.
How we build it
The work happens twice. First in the real room, with a tape and five cameras. Then on the website, as a 3D place a stranger can enter. Frigate watches the real room later. YouTube gets the cut later. None of that matters if the geography is a lie.
Five reasons
A single wide cannot do a drink, a meal, a beauty shot, a walk, and a bowl close-up. Each station is a reason she might go there — and a reason a visitor on the live cat camera might turn.
A map, not a control desk. The 3D court puts these five viewpoints in the same room a visitor can walk.
Water High over the fountain. Night is when the blue glow earns the frame.
Food Body and bowl. The approach along the runner.
Treat Closest, warmest, whiskers readable. The beauty cam.
Court The whole room. Weak for detail, strong for a walk between stations.
Face Cat-eye at the kibble. A curated frame here — not a public stream.
Four public stills refresh from the live site. Face Cam stays off this strip on purpose. See them in the 3D room, not only as pictures.
The real sitting room
If the real room is dull, the 3D copy will be a dull room with moving pictures pasted on. Dress for the camera that already has a job. Day is harder — white brick blows out, and the fountain has to work for a living. Night is when the water glow becomes the look. We do not invent a night grade. The sitting room already has one.
Season cloth is scenery. It can come down. The five reasons stay. That is how a live cat camera keeps making sense in October and in March.
Day Harder. The room has to hold without the blue doing all the work.
Night The fountain becomes the look. The 3D court should feel like this hour, not a showroom.
What we leave out
Do not model a bedroom. Do not put a person in the mesh. Do not publish the desk that aims the cameras. Frigate can watch the room; this page does not explain the desk. The visitor experience is the walk. If you need a Short after the visit, that is the cut. If you need the watcher named, that is Frigate.
This making-of does not embed the 3D app. Embedding would freeze a copy. The live cat cam should be entered, not framed. Go walk it.
The room is a three.js scene served as a normal website. Four of its walls carry live camera frames that refresh one at a time so the picture never stutters, the cat in the middle is a mesh compressed to 738 kilobytes, and the whole site is 11 megabytes where it used to be 92. The scene, the loading, the resolution loop and the byte budgets are on the three.js build page. The cat mesh itself was generated from a photograph with Tripo and then fixed by hand; that side of the story is the generated-mesh pipeline, part of what the AI models do here. The stills the walls show come through a read-only proxy in front of Frigate. The shop on the same site is a second three.js room whose products wear their real print files: how the 3D shop and print-on-demand work.
The website as a whole, the piece that makes the court a place rather than a grid, has its own section: the 3D website, plainly; then how the HTML shell and the scene share a page, what a visitor downloads on a desktop and on a phone, how the shop is laid out in a room, and how it is tested without a GPU.
helenthecatlive.com is the court you can move through. Come back here when you want the steps. The show stays the proof.