Wardrobe Doll
Dress-up for ages 6+ — pick a friend, pick a costume, dress in the right order.
- Controls
- Status
- Difficulty
- Session
- Stack
- GSAP + layered SVG
- Generations
- 1
- Bundle
- games/wardrobe-doll/index.html
About the machine
A gentle dress-up game for kids age 6+. Pick one of four friends, choose a profession costume — Doctor, Firefighter, Astronaut, Chef, Officer or Soccer player — and dress the doll one piece at a time in the right order (socks before shoes, shirt before jacket). Tap or drag each garment; the next correct item glows, wrong picks get a friendly hint rather than a buzzer, and there is no way to lose. Every character and costume is original layered SVG art on one shared body skeleton; all sound is synthesized procedurally via the Web Audio API. Runs offline with GSAP bundled locally.
Generations
Generations
PromptPromptwardrobe doll. a game where I can select a character, chose a costume from a rack of many profession outfits, and put the costume on in a particular order like socks before shoes, designed for kids 6+. implement js animations galore like greensock animation platforms, specialize in using sprites and find generic images online for assets.
What changed
The original zero-shot build, then rebuilt to excellence. Layered SVG paper-doll dress-up: four diverse characters and six profession costumes on one shared body skeleton, with drag-or-tap dressing and gentle order enforcement (socks before shoes). GSAP (bundled locally) drives the choreography; a dedicated Audio department synthesized every cue procedurally via Web Audio — a pentatonic chime that climbs the scale as you dress, a friendly two-note 'not yet,' and a fanfare finale.
QA'd by eye, not only by structure: every costume was rendered as a settled frame and inspected on multiple characters, which caught and fixed three real defects — base underclothes peeking through costumes at the pelvis, a rack tile that rendered invisible (an entrance tween killed a frame early), and underwear that did not follow the body silhouette. A performance pass then moved all continuous motion to GPU-composited CSS, capped the frame rate, and pauses when the tab is hidden — so it stays cool instead of pinning a core.