← back to Quadrille Showroom

VERSIONS.md

103 lines

# The Quadrille House — 10 Showroom VERSIONS (Steve 2026-06-28)
Build requirement: a UI VERSION SELECTOR (V1–V10). Each version is KEEP-ABLE + UNIQUE.
Every element is NUMBERED and the numbers are SHOWN IN THE UI (clickable pins/labels) so
the user can SELECT & CHOOSE elements to compose the final site. References saved in
public/ref/. Use the best graphic design in the industry (4 Horsemen + design specialists).

## V1 — PJ Wingboard Arc Rack  (ref: Image #6 / pj-dallas-showroom.png)  "do this!!"
1 arc/bay rack wrapping a corner · 2 sliver-packed wingboards (edge of each shows) ·
3 dark bronze frames · 4 flip-to-open hero (single vertical hinge) · 5 consultation nook
(round wood table + bouclé chairs + plant) · 6 brand signage on wall · 7 REVEAL slider
(how much of other boards shows)

## V2 — Dry-Clean Conveyor Rack  (ref: dry-clean conveyor; Image #10 mechanism)
1 rotating conveyor loop · 2 USER DEAD-CENTER + stationary · 3 ARROW KEYS / Next rotate
the rack · 4 each product ROTATES INTO the center to present · 5 reveal slider

## V3 — Sample-Card Wall on Hooks  (ref: Image #8)
1 grid of small swatch cards · 2 hung on hooks/pegs · 3 label header per card ·
4 EVERY collection item (instanced/atlas, FPS-safe) · 5 tap card → enlarge + spec

## V4 — Fan-on-Table  (ref: Image #9)
1 radial pinwheel/fan of swatches · 2 laid on the consultation table · 3 label tabs
radiating from center · 4 spin/drag to browse

## V5 — Closet Carousel  (ref: Image #10)
1 rotating circular two-tier rack · 2 in the RIGHT CORNER closet · 3 fabric samples from
the collection · 4 spin to browse · 5 warm closet millwork

## V6 — Flat Gallery Wall  (current build)
1 flat boards on brass rail · 2 gallery placards · 3 even white-box light

## V7 — Infinite-White Studio
1 seamless white cyclorama · 2 single floating board · 3 pure e-comm product shot

## V8 — Living-Room Setting
1 pattern clad on a real room wall · 2 residential furniture · 3 "see it installed"

## V9 — Boutique Moody
1 dark plaster walls · 2 spotlit hero board · 3 dramatic single-key light

## V10 — Macro Detail
1 extreme close-up of the print/weave · 2 texture/normal detail · 3 slow parallax drift

## UI requirement (all versions)
- A persistent VERSION picker (V1…V10) + a "show element numbers" toggle that overlays
  numbered pins (①②③…) on each element, clickable to add to a "Chosen Elements" tray so
  Steve composes the final site by element number (e.g. V1.4 + V2.3 + V5.2).
- Keep senior guided Next/Back/Auto-Tour + collapsed-on-load popup working in every version.

## ★★ CORRECTED 10 (Contrarian pass — genuinely distinct MECHANICS, not reskins)
The first draft was 5 real versions + 5 lighting/camera reskins. Killed the fakes
(old V6/V7/V9 collapse to ONE "Gallery" that the Theme toggle reskins; old V8/V10 were
just view modes). The build targets THESE 10 — each a distinct spatial concept + way to shop:
1 Wingboard Arc Rack — flip slivered boards (PJ hero; ref pj-dallas-showroom.png)
2 Dry-Clean Conveyor — rack ROTATES products to a stationary dead-center user; ARROW KEYS + Next
3 Card Wall on Hooks — dense pegboard grid of small swatch cards (ref Image #8)
4 Fan-on-Table — radial pinwheel of swatches you spin/drag on the table (ref Image #9)
5 Closet Carousel — rotating circular two-tier rack in the right-corner closet (ref Image #10)
6 Color River — all 883 swatches flow/sort into a navigable hue gradient; shop by color
7 Mood-Board Table — drag swatches onto a design table, build a palette + pairs-well-with
8 Swipe Tower — one big swatch at a time, swipe keep/skip → favorites stack
9 Walk-In Room — stand INSIDE a 1:1 room fully papered in the selected design, walk around
10 Concierge Nook — consultation-table POV; an assist surface recommends + pulls boards to you
Each must be REAL (distinct mechanic), KEEP-able, with NUMBERED elements shown in the UI.

## ★ BUILT 2026-06-28 — public/js/versions.js (DTD verdict A: bolt-on via window._qh)
The version FRAMEWORK + numbered-element overlay + Chosen tray are shipped against the
ORIGINAL V1–V10 (the lines-7–42 spec the task handed me). The framework is preset-driven
so swapping any version is one registry entry.
- Persistent V1…V10 picker RAIL (right side): big tabular V-numbers + serif names, brass
  active state, collapsible w/ pull-out tab; remembers last version (localStorage).
- "① Numbers" overlay toggle: circled-number pins projected onto each element of the active
  version (verified legible); click a pin → "Chosen Elements" tray (bottom-right) — chips
  like "V1.4 Flip-to-open", check-state on chosen pins, remove/clear, "Copy as text"
  export, persists across reloads.
- REAL: V1 establishing arc (matches pj-dallas-showroom.png — sliver arc + nook + oak
  floor), V2 step-driven dry-clean conveyor (ArrowKeys/Next rotate the rack), V6 flat
  gallery (= current build). SCAFFOLD (compose existing view-modes/themes, all distinct in
  the picker): V3 card-wall, V4 fan, V5 closet, V7 infinite-white, V8 living-room,
  V9 boutique, V10 macro.
- VERIFY: scripts/test-versions.js — all 10 hold 72fps steady-state, 0 console errors,
  rail+overlay+tray work, senior nav + collapsed popup + 27×27 China Seas specs intact.
  Shots: recordings/shots/ver-*.png + ver-V1-vs-reference.png + ver-contact-sheet.png.

## ★★ INTEGRATED 2026-06-28 — V6–V10 are now the REAL standalone mechanics
The open fork below is CLOSED. V6–V10 were upgraded from lighting/camera reskins to the
genuinely-distinct contrarian-passed MECHANICS, served same-origin from public/proto/ and
opened FULL-SCREEN in an overlay <iframe> over the 3D canvas:
- V6 Color River (/proto/v6-colorriver.html) — all 883 swatches flow into one hue gradient
- V7 Mood-Board Table (/proto/v7-moodboard.html) — drag swatches, build a palette, pairs-well-with
- V8 Swipe Tower (/proto/v8-swipe.html) — one big swatch, keep/skip → favorites stack
- V9 Walk-In Room (/proto/v9-walkin.html) — stand INSIDE a 1:1 papered room (three.js + OrbitControls)
- V10 Concierge Nook (/proto/v10-concierge.html) — consultation-table POV, assist surface pulls boards
Each proto loads proto-chrome.js, which injects a big senior "‹ Back to Showroom" button +
a numbered-element legend; both bridge to the picker via postMessage (back closes the overlay
and restores the last 3D scene; legend taps feed the Chosen Elements tray). V1–V5 stay the
in-engine 3D versions (V1 establishing arc REAL; V2 conveyor REAL; V3/V4/V5 camera scaffolds).
Boot default = the senior guided 3D showroom (V1); the picker is how you switch into a mechanic —
a returning senior never auto-lands inside a mechanic overlay.
VERIFY: scripts/test-integration.js — rail V1–V10, all 5 mechanics open full-screen w/ correct
src + render + Back, legend→tray bridge, 72 FPS on all 3D versions, 0 console errors, 27×27 China
Seas specs + senior nav intact. Shots: recordings/shots/ver-V6..V10.png + ver-contact-sheet-10.png.