Take It Apart: a toy whose launch campaign is printed on its circuit board
The story behind Take It Apart
Premise A toy that unveils a launch campaign: a pocket synth you play, then take apart, for Partwise, a fictional AI advisory. Audience: web-literate visitors arriving from X or the archive. Perf target: under 5 ms a frame on an M4, with the machine staying quiet
Reference Studio product photography of pocket synths, and the exploded-view diagrams that come with them
Built with Three.js 0.186 (WebGL2), pmndrs postprocessing, N8AO, WebAudio
Techniques Procedural product modelling in centimetres; physical materials with bead-blast roughness; a campaign poster drawn as PCB silkscreen on a canvas texture; a staged exploded-view choreography; a camera fitted to the exploded stack; a synthesised key sound; a pixel budget, a 30 fps idle and a pause when hidden
Direction A cool pale sweep, bead-blasted aluminium, graphite keys and one signal-orange key; a green-black circuit board with copper traces and white silkscreen. Archivo, wide and heavy, for the headline, and IBM Plex Mono for the silkscreen and the screen
The Story
Most launch campaigns arrive as a poster or a film, and the brand tells you something about itself. This one is for Partwise, an invented AI advisory whose whole pitch is that nothing is hidden: no black boxes, show the working, talk to a human. So instead of a poster, the campaign is a toy, and the message is inside it. You only read it after you’ve taken the thing apart.
The toy is a small grey synth with sixteen keys, four knobs, a tiny screen and one orange key. It looks like a product photograph, and it plays like an instrument. The campaign line, “Take it apart.”, is also the instruction.
The Take
The page opens on a pale studio sweep. The device drops a few millimetres onto it and settles, and its screen boots. Before you touch anything, it taps out a little pattern on its own keys, and its screen answers each one.
- Press a key and it travels down with a click and plays a note. The screen flashes one word from the campaign, like JUDGEMENT or TALK TO A HUMAN, and the matching label on the board lights up.
- Turn a knob by dragging it. The four knobs set the tone, the speed of the screen’s little sequencer, the colourway and how far the parts spread.
- Hold the orange key. The screws back out first, each turning two full turns before it lifts away. Then the faceplate rises, the keys hover in their grid, the silicone key mat floats off, and the circuit board tilts up toward you on dashed guide lines, like a technical illustration.
- Read the board. PARTWISE runs across it in heavy white silkscreen, with “Take it apart.” and “AI advisory, part by part.” beside it. Its components are labelled with the campaign: NO BLACK BOXES, YOUR DATA STAYS YOURS, MEASURED, NOT HYPED, WHAT TO AUTOMATE / WHAT NOT TO. Press a key while it’s apart and its label lights up orange on the board.
- Drag to look around, then let go, and it goes back together in reverse, screws last.
The Tech
Modelled in centimetres. The device is built from simple machined forms: rounded boxes, cylinders and a faceplate with real cut-outs for the keys, knobs, screen and speaker grille. Every part sits on the same layout as the circuit board, so when the stack comes apart, each key lifts off its own switch footprint and each knob off its own encoder. Materials do most of the work: the aluminium uses a fine bead-blast roughness texture tiled several times across the plate so it catches one soft, broad highlight; the keys are matte with a faint smudge texture; the orange key has a little clearcoat so it stays saturated under the grade.
The poster is the silkscreen. The board’s top face is a 2048-pixel canvas drawn the way a real board is printed: a green-black solder mask, copper traces in 45° runs, vias, pads, a chip footprint, test points and mounting holes, with the campaign set in white silkscreen on top. A second, half-size canvas holds the glow mask, so pressing a key repaints only the rectangle of its label. The screen is a third canvas, redrawn only when something changes, at most 30 times a second.
A staged explode. One value from 0 to 1 drives the whole sequence. Each layer has its own window inside that range, with an out-expo ease and a slight tilt, so the parts separate in order rather than all at once, and coming back runs the windows in reverse. On load, the camera measures the fully exploded stack once and works out how far back it has to sit to fit it, so the exploded view fits whether the screen is wide or tall. The whole exploded state is also rendered once, off screen, under the opening white fade, so no shader compiles at the moment you first hold the key.
Springs that survive a slow frame. The keys sit on stiff springs that bottom out hard, which is what makes them feel mechanical. A spring that stiff becomes unstable when the frame rate drops, so it’s stepped at 240 Hz inside each frame, whatever the display does.
Quiet by default. The canvas is capped at 2.6 megapixels on desktop and 1.6 on phones, and the render scale adjusts to a measured frame time. When nothing is moving, it drops to 30 frames a second, and when the tab is hidden, it stops. The sound is synthesised on the spot, with a square and a triangle wave through a resonant filter, and it starts on your first press.
Partwise is fictional: a name, a line and a campaign, made for this piece.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.