I put twelve 3D guests on our wedding website instead of writing "smart casual" (no 3D library)

Jean Wentzel — Fri, 13 Nov 2026 09:05:32 +0000

Shani and I get married in March 2027, in the highlands of South Africa. Every wedding website I looked at had the same dress-code section: a line that says "smart casual" and leaves everyone guessing.

So I built ours by hand, and on the "What to wear" page I put twelve guests instead of a sentence.

boomslangchips.github.io

They show what to wear on each day of the weekend. They breathe, shift their weight, look around, fold their arms, glance at each other. You can drag one to turn them round, tap to step closer, and try the wedding colours on them.

There is no game engine and no 3D library behind it: about 250 KB of plain JavaScript and WebGL 1, plus one 760 KB file for the bodies. It runs on a phone.

How it fits together

File	What it does
`atelier-core.js`	Vectors, matrices, mesh building (tubes, shells, patches) and the WebGL renderer: skin, cloth, knit, denim, satin and hair shaders, a soft shadow map, the floor's reflection
`atelier-body.js`	Reads the MakeHuman base mesh (CC0) in three body shapes, 163 bones and skin weights, and poses a body
`atelier-cloth.js`	A small position-based cloth simulation for skirts and long hair, kept out of the body by the body's own cross-sections
`atelier-figure.js`	One guest: body, face, hair, every garment cut round that body, shoes, accessories, and the arm poses
`atelier-stage.js`	The stage: day tabs, dragging, the colour swatches, and each guest's little "mind" (breath, weight shifts, glances, blinks, smiles)

The hardest part was hands

Rendering was not the hard bit. Hands were.

A hand "on the hip" that floats a centimetre away looks wrong instantly. One that sinks into the hip looks worse. Folded hands that pass through each other are the first thing anyone notices. So each resting pose is solved: two-bone IK for the arm, then a small solver that places the palm against the surface it rests on, for every body shape.

The stage also watches its own frame time and does less on slow devices, and nothing moves at all if you have reduced motion turned on.

Honest limits

The guests stand in place: no walking.
Fingers keep one relaxed shape.
Creases at elbows and knees are drawn on the cloth, not simulated.
All faces are variations of one head.

The rest of the site

Our real site is private (it has our guest list on it), so I made a twin with a made-up couple and stock photos that you can click through: the invitation gate, a countdown, the weekend day by day, a drawn venue map, where to stay, an RSVP that knows who is on each invitation, and add-to-calendar.

👉 Demo: https://demo.wentzel.wedding (the invitation code is DEMO)
👉 3D guests, MIT licence: https://github.com/BoomslangChips/wedding-guests-3d

I wrote it with Claude Code over a few very long days. Happy to answer how any part works in the comments.

DEV Community: Jean Wentzel

I put twelve 3D guests on our wedding website instead of writing "smart casual" (no 3D library)

How it fits together

The hardest part was hands

Honest limits

The rest of the site