0 / 0 pages shipped · hover a tile
Every page, designed then built
A one-page static site deployed from GitHub to Hostinger, the 3D house as a Spline scene, a Figma ideation file, and a cast of nine 3D characters ready for the real app.
Mission debrief · 01 / 05
kip
kip turns the rotation of people raising a newborn into one team. Its site is one page with a 3D house you can step into: every room shows one feature, and every phone in it works.
/briefing
The objective
Babies aren’t raised by one tired parent. They’re raised by a rotation: two parents, a grandparent, a nanny, a night doula. kip puts them all in one shared log, with the face of whoever logged each feed, nap, diaper and dose. The old site explained that across twelve pages. The new one is a house: tap a room and you’re inside one feature, watching June’s village use it. Grandpa gets the shift handoff at the door, Nana saves the first smile in the living room, kip catches a second vitamin D dose in the kitchen, the nursery dims for the 3am feed, and the study builds the report for Dr. Patel. Every phone in the house works. It’s a [[Test flight]]: a concept with no app yet, and the site says so.
One page, custom coded after an ideation board and wireframes in Figma. The house is a Spline scene: eight characters and a dog built from simple shapes with their own expressions, five rooms with a camera move each, a night mode for the nursery and 88 objects that react when tapped. The page owns everything the scene can’t do from inside its embed (the phones, the sounds, the mute button) and reads what happens in the house through Spline variables. Chrome’s WebGPU path dropped parts of the scene on Windows, so the viewer is forced onto WebGL. On phones the house becomes a wide card with room buttons, tested live on an Android phone, and the scene went from about 2 million polygons to 0.75 million with no visible change.
Mission parameters
/systems · 6 deployed
Systems deployed
Open a system to see what it does, why it matters and, in Engineer mode, how it works.
SYS-01
A house you can step into
Spline · camera
What it does
Tap a room and the camera glides in beside it, the other rooms dim, the people inside react, and that room’s phone slides in on the open side.
Why it matters
A list of five features is easy to skim past. Walking into the room where a feature happens, with the people it happens to, is hard to forget.
Under the hood
Each room has its own camera target and the side its phone docks on, so the room always sits beside the phone, never under it. Veils dim the other rooms edge to edge, and the camera keeps a small lean toward the cursor, never a full orbit.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Night for the nursery
Scene · state
What it does
Open the nursery and the whole scene turns to night: the sky darkens, the moon and stars rise, the yard dims and the attic window glows. Leave and the day comes back.
Why it matters
At 3am the parent needs a dim, quiet screen. Turning the lights down on the whole house shows that without any copy.
Under the hood
One room state drives everything: the open room picks the sound, the phone and the speech bubbles, and the nursery swaps the yard and house colors to their night set. The night switch is pre-warmed so it doesn’t stutter the first time.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
A 3D scene that behaves like a website
Embed · variables
What it does
The house is a 3D scene, but the phones, sounds and mute button belong to the page, so it scrolls, loads and behaves like the rest of the site.
Why it matters
An embedded 3D scene usually lives in its own box and ignores the page around it. This one scrolls, loads and plays sound with the page.
Under the hood
The embed’s HTML layer sat over the canvas and swallowed every tap, and it couldn’t send messages out. So the layer is click-through, the page owns the phones and the audio, and the scene reports the open room and each sound through Spline variables the page reads. The viewer is forced onto WebGL, because Chrome’s WebGPU path dropped the sky, roof and walls on Windows.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Poke anything
Interaction · 88 objects
What it does
Coats swing, blocks hop, the crib mobile turns, a tree sways and a robin flies off, and Biscuit wags. 88 things in the house react when you tap them.
Why it matters
People explore a house by touching things. Every small reaction rewards curiosity and keeps them in the room long enough to see the feature.
Under the hood
Every object has its own tap sensor, and one table maps each name to a small effect (hop, swing, wiggle, squash, spin, a door on its hinge). Tapping an object also opens its room, so curiosity always lands on a feature.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Phones get their own house
Responsive · touch
What it does
On a phone the house is a wide card with a button for each room, and the app phone sits below it like a sheet.
Why it matters
A full-screen 3D scene on a tall screen made the house tiny. On a phone people need big targets and the feature right under their thumb.
Under the hood
Tested live on an Android phone: the tall canvas lost, so phones get a wide card, room buttons inside it and the dock as a bottom sheet sized to half the screen. Because the card moves as you scroll, the page re-measures the canvas so taps land where you aim.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
The village, built from shapes
3D · characters
What it does
Eight people and a dog, each built from simple shapes, with mixed skin tones and a different eye color each. They blink, smile, look surprised or get sleepy, and light up when tapped.
Why it matters
A log with a face on every entry only works if the faces are easy to tell apart, and a village should look like a real one.
Under the hood
Every character shares one face rig (eyes, brows, mouth and a set of expressions on a loop), so a new character is a new look, not new code. Each was reviewed on its own: Sam’s collar took three tries, and June moved to a round baby body. The same 3D faces are the avatars inside the app phones.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
/impact · 5 problems solved
Problems solved
What the site does for the people who run it and the people who visit it.
SolvedFor visitors
One log instead of a group chat
Before
With five people caring for one baby, the group chat becomes the log, and nobody trusts it.
Now
One shared log where every feed, nap and diaper carries the face of whoever logged it.
Result
Anyone can answer “Who fed her last?” by opening the app.
Under the hood
Every entry has one shape (who, what, when), so the log, the handoff and the counts read from the same list.
SolvedFor visitors
Shift changes without lost details
Before
Every shift change loses something: the last feed time, the nap that ran long, the note about the rash.
Now
When someone comes in, kip sums up everything since they left, with a note from the parents. One tap and June’s theirs.
Result
Grandpa starts caught up, without a phone call or a note on the fridge.
Under the hood
In the house it’s the Entry: Ari hands June to Grandpa, and his phone shows the summary before he asks.
SolvedFor visitors
No double doses
Before
Two caregivers each give the morning vitamin D, because neither knew the other already had.
Now
Before logging a med, kip shows who already logged it today and asks first.
Result
A second dose only goes in if someone deliberately taps “Log it anyway”.
Under the hood
In the kitchen the sheet opens on its own when Rosa logs: Ari’s 9:02 entry, Don’t log it, or Log it anyway, which flags the entry.
SolvedFor visitors
A product you can walk through
Before
The first kip site explained the product across twelve pages, so seeing all of it meant a lot of clicking and reading.
Now
One page with a house where every room demonstrates one feature, with a working phone in each.
Result
The whole product in one scroll, and every feature has a phone you can tap.
Under the hood
The house grows from a card to full screen as you scroll, then five sections tell the same features again with the same tappable phone.
SolvedFor visitors
A concept that doesn’t pretend
Before
A concept site dressed up as an app-store listing promises an app that doesn’t exist.
Now
No reviews or users. The store buttons explain there’s nothing in the stores yet, and the early-access form says it sends nothing.
Result
The site can be shown to anyone without a caveat, because it never claims more than it is.
Under the hood
Nothing you tap is saved, and the footer says June and her village are made up.
/manifest · what shipped
Mission manifest
Everything this mission delivered, planned and mocked up in Figma first, then built.
Mission · planet
Role
Designer + developer
Platform · Year
CMS collections
Collections
Mission type
Disciplines
Drag the tags
Mission parameters
Parameters met
Status
Live
Where it lives
/telemetry
By the numbers
1
scroll to see the whole product, where the old site took twelve pages
5
rooms, each one a feature with a phone you can tap
9
characters in June’s village, Biscuit the dog included
88
things in the house that react when you poke them
/stack · 0 tools
Tools in orbit
Every tool this mission ran on. Pull one out of orbit and let go; it finds its way back.
Hover a tool
Tools in orbit
This project demonstrates
/observatory · from this mission
Observations from this mission
BN-11
·
Build notes
10
min
Building a tappable 3D house for the web (and the six things that broke)
The hero of kipvillage.com is a 3D dollhouse built in Spline. Each of its five rooms demonstrates one feature of kip, a concept app for families who share a baby's care. Tap a room and the camera glides in, the other rooms dim, and a phone with that feature's screen slides in, ready to tap. About 88 objects in the scene react when you touch them. Getting it to behave like part of a website, especially on a phone, meant moving every control out of the 3D scene and into the page, so the scene only has to look good and report what happened.
Interactive 3D
Tap vs hover
Mobile performance
Perceived speed
Reduced motion