Shoe brands love an exploded view: the outsole, the foam, the plate, all floating apart in a keynote. It is always a video. I wanted one you drive yourself, where the parts are the product page: every part has its price, you can change its colour, and when you are done it snaps back into your shoe. Scroll it at avivashishta.com/lab/exploded.
The short version: Codex makes one picture of the shoe already exploded: five parts floating in a stack with white between them. A script cuts it out and splits it into the five parts by finding the empty rows. Six more Codex pictures are the same picture with one part recoloured. The page stacks the parts back into a shoe, and the scroll moves each one between where it sits in the shoe and where it floated in the picture, in 3D.
Step 1: one picture, already apart (Codex)
The trick is to never ask for the parts one by one. Five separate pictures would never line up. One picture of the whole stack lines up by itself, because Codex drew the parts to fit each other.
A technical exploded view of a premium carbon-plated running shoe, side profile view (toe pointing right), its five parts floating in a vertical stack with clear, even gaps of white space between them so no part touches or overlaps another: at the top the off-white engineered knit upper with cobalt blue heel tab and laces, below it a thin pale grey sockliner insole, below that a thick white translucent foam midsole with a rocker shape, below that a thin black carbon fibre plate, and at the bottom a cobalt blue rubber outsole with grip pattern. All parts perfectly aligned heel over heel and toe over toe, same scale, as if lifted straight up off each other. Centered, generous margin, pure seamless white background (#FFFFFF), soft studio light, no shadows between parts, product render quality, photoreal. No text, no logos, no brand marks. Square 1:1, 1024x1024.
"Clear, even gaps of white space so no part touches" is the line that makes the rest possible.
Step 2: the colours are edits
Each colour is the same picture with one part changed, made by attaching the first picture:
The attached image is an exploded view of a running shoe with five floating parts. Change only the colour of the thick foam midsole (the third part from the top) to bright sunflower yellow foam. Keep EVERYTHING else exactly identical: every other part unchanged, the same positions, the same gaps, the same sizes and shapes, the same framing, the same light and the same pure white background. No text, no logos. Square 1:1, 1024x1024.
Three uppers, three foams, three outsoles: six edits. Codex redraws a little each time (the yellow foam came back a touch thinner at the heel), but only the changed part is ever used from an edit, so it doesn't matter.
Step 3: split it into parts
The prep script cuts each picture out, then walks down it row by row. Where a row is empty, one part has ended. Five runs of solid rows are the five parts:
while (y < S) {
while (y < S && rows[y] < 3) y++; // skip the white between parts
const y0 = y;
while (y < S && rows[y] >= 3) y++; // a part
if (y - y0 > 12) found.push({ y0, y1: y });
}
Each part is saved as its own WebP with the rectangle it sat in. That rectangle is where it floats when the shoe is apart.
One surprise: macOS Vision, which cut everything out perfectly on my other pages, left out the black carbon plate. It reads a thin dark shape under a white one as a shadow. So the matte here is Vision's or "not white", whichever is more solid: Vision keeps the white foam, "not white" keeps the plate.
bun scripts/prepare-exploded.mjs ./raw
Step 4: put it back together
Where each part sits in the finished shoe is worked out from the rectangles, from the bottom up: the foam sinks two thirds into the outsole's cup, the plate sits inside the foam, the sockliner on top of the foam, and the upper's bottom edge a third of the way down the foam. Then they are drawn back to front (sockliner, upper, plate, foam, outsole), so the foam hides the plate and the bottom of the upper, exactly as a real shoe does.
Step 5: the scroll
The page is four and a half screens tall with one sticky screen. The scroll only sets one number, how far apart the shoe is:
// Apart over the first third, held while you choose, back together at the end.
let e = ease(clamp((p - 0.04) / 0.3)) * (1 - ease(clamp((p - 0.8) / 0.14)));
el.style.transform = `translate3d(0, ${(D[id] * (1 - e)) / 10.24}%, ${DEPTH[id] * e}px)`;
Each part moves between its place in the shoe and its place in the picture, and out towards you or away from you in depth. The whole stack tilts back as it opens and turns with the pointer, so the depth shows: the upper slides across the outsole as you move the mouse.
The small things
- It snaps together on load. The parts start apart and come together over a second and a half: the first thing you see is the shoe being made.
- Callouts with prices. When the shoe is apart, each part gets a leader line, its spec and weight, and its price. The total is the sum of the parts.
- New colours wipe in from the heel with a
clip-path, over the old colour, so it looks like the part is being repainted, not swapped. - Back together at the end of the scroll, with your colours named under the headline and the price bar outlined in blue.
Build your own
Build a scroll-driven exploded product page (React, CSS 3D, no libraries). Assets: one WebP per part of a product, cut from a single exploded-view picture, with the rectangle each part sat in (x, y, w, h in the picture's frame), plus colour variants of some parts. Make the page 4.5 screens tall with a sticky full screen. In the middle, a square stage the size of the source picture with perspective; inside it, one absolutely positioned image per part at its rectangle.
Work out where each part sits in the finished product (stacked from the bottom, each overlapping the one below) and draw them back to front so hidden parts are hidden. Map scroll progress to e: 0 at the top, 1 from a third of the way down, back to 0 at the end. Move each part between its finished position (e = 0) and its picture position (e = 1), and push it out in Z by a different depth each. Tilt the stack back by 16 degrees times e and turn it with the pointer. Snap it together on load. When apart, show a callout per part (name, spec, weight, price) right of the product, and colour swatches that swap the part with a clip-path wipe. A price bar at the bottom with Add to bag.