---
id: "2115947969161924810"
source: https://x.com/guidorosso/status/2115947969161924810
author: "Guido Rosso (@guidorosso)"
media: "video, 1920x1028, 74.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Modular Synth 3D Product Configurator

## Summary
A product page for a modular synthesizer where a charcoal 3D device on a pale grey stage grows as you pick a size and drag modules (pads, joystick, control, speaker, keys, steps) from a spec-sheet list. A strong example of an industrial, monospaced e-commerce configurator where the 3D model, price and cart bar stay in sync.

## Style
- Theme: light (pale grey stage, charcoal hardware, lime accents)
- Mood: technical, playful, precise, industrial
- Tags: product-configurator, 3d-model, monospace, spec-sheet, e-commerce, hardware, lime-accent
- Category: Web app, 3D

## Palette
| Role | Hex |
|---|---|
| Stage background | #DEDFDE |
| Device charcoal | #232424 |
| Card white | #F5F4F3 |
| Module grey | #535453 |
| Hairline border | #C4C3C2 |
| Lime shade | #A7AE84 |
| Lime accent | #C8F031 |
| Panel off-white | #EDECEB |

## Typography
- Product title: monospace, regular, all caps with a model code, about 6% of frame height, slight positive tracking. Closest: Space Mono 400 or JetBrains Mono 400.
- Sub labels (system name, section labels, size and finish): tiny mono uppercase, 0.1em tracking, about 8px.
- Module card names: mono uppercase medium about 11px; specs below in 7px mono grey.
- Price and cart bar: mono, price about 14px; button label uppercase white on black. All type is one mono family.

## Layout
- 1920x1028 (about 1.87:1). The 3D stage fills the left 75%; a module list column sits at 78% to 94% of the width.
- Top-left: title, then a row of three 18px square size toggles (S, M, L, active filled black) and three small finish chips.
- Module list: six stacked cards about 13% of the height each, 1px #C4C3C2 borders, square corners, a line drawing thumbnail on the left and a black "added" tag or a plus button on the right.
- Bottom bar: a single row spanning the stage with a size letter box, a spec summary, the total and a black add-to-cart button. Flat UI with no shadows; only the 3D model casts a soft floor shadow.

## Elements
- 3D device: rounded charcoal chassis with a small screen showing lime pixel readouts (step numbers, a frequency, a waveform), a large ridged dial, a joystick, a 2x2 grid of lime pads, a lime rotary knob, lime fader keys, a speaker grille module and a long strip of grey keys.
- Size toggle and finish chips (white, black, grey) with the active state inverted.
- Module cards: name, code, short spec lines, status tag.
- Dimension lines appear under the device in the large size.
- Price total that updates (about 696, 785 and 854 in a euro-style currency) and an add-to-cart button with a plus.

## Motion
- 3.0s: small size, device seen from a high three-quarter angle.
- 16.3s: medium size, camera rotates closer to front; screen shows big pixel digits.
- 29.7s: camera dollies in so the device overflows the stage.
- 43.0s: large size with a speaker module added; dimension guides fade in.
- 56.4s to 69.8s: screen readout animates (frequency number, then a moving waveform) while the price settles.
- Camera moves take about 800ms ease-in-out; modules snap into the chassis with a spring (about 400ms, slight overshoot); price numbers roll over in about 300ms.

## Rebuild it
1. Layout: CSS grid with `grid-template-columns: 1fr 260px`, a fixed bottom bar and a title block absolutely placed top-left. Use Tailwind `font-mono uppercase tracking-widest` for all labels.
2. 3D: React Three Fiber canvas with a GLTF chassis per size and separate module meshes; place modules by slot positions stored in state.
3. Drag from the list using pointer events; on drop, add the module id to state and animate its mesh from y +0.3 to 0 with a spring (stiffness 300, damping 20).
4. Camera: lerp position and target toward a preset per size each frame (factor 0.06) for a smooth ease.
5. Price: derive from state and render with a Motion `animate` count-up over 0.3s.
6. Screen readout: draw pixel text to a canvas texture and update it on an interval.

## Generation prompt
A clean product configurator web page on a pale grey background: a charcoal modular synthesizer with lime green pads, knobs and fader keys, a tiny screen with pixel digits, a joystick and a long strip of keys, shown in soft studio light from a three-quarter view; a large monospace title top-left, a narrow spec-sheet column of module cards with line drawings on the right, and a thin price bar with a black add-to-cart button along the bottom; industrial, precise, playful.