Sneaker Configurator

About this style

Product configurators let a shopper choose the color and material of each part of a product and watch the result update live, often as a 3D model that can be turned. Sneaker brands began offering custom colorways online in the late 1990s, and many now render shoes in real-time 3D in the browser. A shoe's upper is cut from separate panels, such as the vamp, toe cap, quarters, eyestay and heel counter, stitched together and joined to the sole, so each panel can take its own color. The same format is used to sell cars, furniture and bicycles.

Make a 10-second 3D product configurator for a sneaker: a cursor picks colors and materials for each part, the shoe updates live, and it spins once to show the result.

<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Tamberlo (fictional). Model: "Court Low 2"
- Title: "Build your pair"
- Starting colorway: chalk leather all over, on a gum sole.
- Picks, in order: Toe cap → Saffron suede · Heel → Ink leather · Laces → Saffron · Sole → Ice, translucent · Side band → Ink leather
- Price: $128; suede toe cap +$10; ice sole +$14; total $152.
- Buttons: "Spin 360°" and "Add to bag". Shipping line: "Made to order · ships in 6 days"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a clean, premium web configurator: a bright lilac stage where a real-looking shoe stands on a turntable, beside a white control panel. The shoe should look photographed, never toy-like.
- Palette: page #F7F6F2; stage lilac #C9C3EA lifting to #E4E0F7 behind the shoe; turntable #D8D3F0 with a soft contact shadow #6E679E at 35%; chalk leather #F1EDE4; saffron suede #E8A925; ink leather #23263A; gum rubber #C08A52; ice sole #BFD9E6, translucent; foam midsole #F4F0E7; stitching #D9D2C3 on chalk and #F1EDE4 on ink; UI ink #1D1F2A, secondary #6E6F7C, hairlines #E2E0E8, accent saffron. Saffron against lilac is the complementary pair the whole piece is built on; ink keeps it grounded.
- The shoe, an original design (1 unit = 1 cm, a 27 cm low-top court shoe for the right foot), built from a last and real panels:
  - the last: loft the upper from 28 cross-sections along the foot (superellipses that widen at the ball and narrow at the heel, a low rounded toe, an instep rising to a collar opening cut by a tilted plane), so it reads as a foot-shaped shoe and never as a capsule;
  - panels: regions of that surface in (along, around) coordinates, each its own mesh offset 0.03 outward from the one beneath, with a tiny rolled edge: vamp; toe cap with a row of 18 perforations; quarters; eyestay with six eyelets a side (punched holes with stitched rings); heel counter; heel tab with a debossed original mark (two interlocking rounded triangles); padded collar; a side band (a tilted, rounded parallelogram from the eyestay down to the sole on the outer side); and a padded tongue with a small woven label. Stitching runs along every panel edge as a 2.5 mm dashed thread (a thin instanced capsule per stitch);
  - the sole: a cupsole lofted from the footprint outline, 3.2 tall at the heel and 2.4 at the toe, with a rounded sidewall, a stitch channel 0.6 below its top edge, a toe bumper rising 1.2 onto the toe cap, and a herringbone tread underneath (a generated normal map);
  - laces: two flat laces 0.8 wide criss-crossing through the six eyelet pairs (TubeGeometry with a flattened cross-section), tied in a bow with two loops and two tails ending in aglets, lying over the vamp.
- Materials: leather MeshPhysicalMaterial, roughness 0.48, a fine pebble-grain normal map, clearcoat 0.15; suede roughness 1, sheen 1, sheenRoughness 0.6 and a soft nap normal map; rubber roughness 0.75; the ice sole transmission 0.7, roughness 0.22, thickness 2.0 and attenuationColor #9CC4D8 at distance 3, so the tread and a little lilac show through it. Every change crossfades the panel's color and material parameters together.
- How a change lands: when a swatch is picked, the new color and material sweep across that part from the edge nearest the camera over 0.45 s, along the part's own surface coordinate (a smoothstep front 2 cm wide, its leading edge 10% brighter), never as an instant swap, and the part lifts 0.15 and settles back as it changes.
- Light, bright from the first frame: an overhead softbox RectAreaLight #FFFFFF (3 × 1.5 units, intensity 5, with RectAreaLightUniformsLib); a key DirectionalLight #FFF6EC at 1.8 from the front left (elevation 45°) with soft shadows (PCFSoftShadowMap, 2048); a HemisphereLight #FFFFFF / #B9B2DF at 0.9; RoomEnvironment through PMREMGenerator at envMapIntensity 0.5; a soft contact shadow under the sole (a blurred ellipse). ACESFilmic, exposure 1.05. Chalk leather reads near white with soft shading, never grey overall.
- Stage and camera: the WebGL canvas fills the stage (x 0–1200). Camera fov 28, the shoe in a three-quarter outer-side view about 820px long, centered at (600, 600). For each pick it eases over 0.5 s (easeInOutSine) toward the part: close on the toe for the toe cap, round to the heel for the heel, above the laces, low for the sole, back to the side for the band, then back to the hero view. The spin turns the turntable one full turn over 2.0 s on cubic-bezier(0.45, 0, 0.2, 1).
- Control panel (HTML, x 1240–1800, y 120–960, #FFFFFF, 20px radius, 1px hairline, soft shadow): the model name in Bricolage Grotesque 700, 44px; the price in Overpass Mono 600, 36px, tabular figures, rolling to each new total; five part rows (Toe cap, Heel, Laces, Sole, Side band), each a label in Bricolage Grotesque 600, 22px, its current choice in 20px secondary, and six 40px swatches (leather and suede swatches show a tiny grain; Ice is a frosted swatch with a highlight); the active row expands by 10px and the chosen swatch gets a 2px ink ring at a 4px offset. Below them, an outline pill "Spin 360°", a full-width ink "Add to bag" button with white text, and the shipping line in 20px secondary.
- Cursor: a crisp arrow pointer (SVG, white fill, 1.5px ink outline, soft shadow) that glides between targets on cubic-bezier(0.4, 0, 0.2, 1) over 0.35 s and presses (scale 0.9 for 0.08 s) on each click; the clicked element answers with a 0.12 s pressed state. It stays inside the panel.
- Type on the stage: kicker "TAMBERLO" in Bricolage Grotesque 700, 20px, tracked 0.18em, ink, top-left at (120, 110); the title in Bricolage Grotesque 800 (opsz 96), 88px, #1D1F2A, beneath. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: a shoe cut from real panels with stitching, materials that change with the color (suede nap, translucent ice), changes that sweep across the part, a camera that goes to what changed. Cheap: a recolored blob, instant swaps, a flat-shaded shoe turning like a rotisserie.
Banned: real sneaker brands, logos or signature side marks (no swooshes, three stripes, star patches or anything like them), feet or people, a shoe floating without a contact shadow, bloom, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.9s: the configurator: the chalk-and-gum shoe on its turntable in the hero view, the panel showing $128; the kicker and title rise in.
- 0.9–1.9s: Toe cap → Saffron suede: the cursor clicks; the camera eases to the toe; saffron sweeps back across the toe cap; the price rolls to $138.
- 1.9–2.8s: Heel → Ink leather: the camera rounds to the heel; ink sweeps up the counter.
- 2.8–3.6s: Laces → Saffron: the laces change from the bow outward.
- 3.6–4.6s: Sole → Ice: the camera drops low; the gum clears into translucent ice from heel to toe, the tread showing through; the price rolls to $152.
- 4.6–5.4s: Side band → Ink leather: the camera returns to the side and ink sweeps down the band.
- 5.4–6.0s: back to the hero view: at 6.0 s the finished shoe stands at rest, every choice ringed in the panel, the price at $152.
- 6.0–6.3s: the cursor clicks "Spin 360°".
- 6.3–8.3s: the turntable turns the shoe one full turn: inner side, heel, outer side, toe, and back to the hero angle.
- 8.3–8.9s: the cursor clicks "Add to bag", which turns to "Added ✓"; the shipping line rises in.
- 8.9–10.0s: hold on the hero view.
For other lengths, change the gaps between picks; keep each pick's 0.45 s sweep, the 2.0 s spin and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- The shoe is built once at load from the lofted last; each panel's color and material parameters are uniforms crossfaded by its sweep front. The cursor, UI states, price, camera and turntable angle are closed-form functions of t from the click times.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the shoe reads as a real low-top (toe cap with perforations, eyestay with six eyelet pairs, criss-cross laces and a bow, heel counter, padded collar, cupsole with stitching), every change sweeps across exactly the part named and matches the swatch ringed in the panel, the price reads $128, then $138, then $152, the ice sole shows the tread through it, the cursor never leaves the panel, the shoe keeps its contact shadow during the spin, and the 6.0 s frame is the finished shoe at rest. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…