Remix Site

Phase 2 — Three directions

Ask first, one batch, before touching anything (this is the question that decides whether the directions are coats of paint or actually different sites):

1. Amplitude — subtle / medium / big?

   	moves	layer
   subtle	palette, accent, motion timing, shader colors	overrides.json only
   medium	+ surface (radius/border/shadow), density (spacing ×), type scale + weights, grain	+ patch.css
   big	+ hero treatment (photo → type-only / GPU-led / engraving), layout (grid ↔ editorial ↔ bento), section order, nav style, own hero asset per direction	+ patch.js + generated assets
   If unsure, recommend medium — subtle reads as "same site, different coat"
   side by side; big costs generations.

2. Anchors — "any aesthetics in mind?" none / describe it / reference sites or images / pull from my taste library (/taste-vault). With none: nearest-legit / opposite / wildcard from references/directions.md. With anchors: one direction per anchor, built toward it, and say which fork each anchor maps to so the user sees the translation.

Not five. Five converge; three deliberately different forks give a real choice. Each direction is data + an optional patch layer, scoped to :root[data-rx="<slug>"] so directions never collide:

remix/directions/<slug>.json
{ "name": "...", "thesis": "one line",
  "tokens": { "--rx-accent": "#…", "--rx-font-display": "…", "--rx-space-unit": "…" },
  "motion": { "reveal": { "y": 22, "duration": 0.7, "ease": [.16,1,.3,1] }, "stagger": 0.08 },
  "shaders": { "hero": { "colorFront": "#…", "intensity": 0.5 } },
  "assets": { "hero-bg": "generated/<slug>-hero.jpg" } }
remix/directions/<slug>.patch.css   (medium+)  surface / density / type scale under :root[data-rx="<slug>"]
remix/directions/<slug>.patch.js    (big)      structural: hero variant, section order, layout classes

apply-overrides.js picks up <slug>.patch.css / .patch.js next to the JSON automatically. Patches must be additive and scoped — never edit the base HTML/CSS for a direction, or the other two break.

Derive the three from the original's axes, not from taste alone — see references/directions.md for the fork table (palette mood, type pairing, hero treatment, density, motion personality) and the rule that each direction must differ on at least three forks. If the user has a taste library (/taste-vault or reference images), pull the directions from there. Generate per-direction hero assets only for the decorative layer.

Apply each with node scripts/apply-overrides.js <site> remix/directions/<slug>.json (writes remix-tokens.<slug>.css + remix-motion.<slug>.js; the site loads the active set via ?rx=<slug>). Then node scripts/gallery.js <site> writes <site>/directions.html: all directions live side by side in iframes (real shaders + motion), synced scroll, click-a-name fullscreen, and a pick button that stores the choice in localStorage.rx-pick. Open it in the user's browser (this is the deliverable — not a static contact sheet), and also render remix/directions.jpg for the report. Stop with the URL and one line per direction: thesis + what changed. The user picks (read rx-pick or ask).

Phase 3 — Tweak panel

On the pick only. Choose 10–15 knobs from knobs.json — the ones that matter for this direction (accent, display font size base, section spacing unit, radius, reveal distance/duration/ease, stagger, shader intensity/colors, hero gradient angle, grain opacity). Write remix/panel.json (references/tweak-panel.md has the schema: type, range, step, default, CSS var or motion/shader path) and inject scripts/tweak-panel.js into the site.

The panel: fixed, collapsible, grouped (Color / Type / Space / Motion / GPU), writes CSS vars live, pokes window.__remix for motion/shader knobs and re-renders the affected mount, serializes state into #rx= so a URL is a permalink, and has Copy JSON / Reset / Export-as-direction. Keyboard: ` toggles it. It is dev-only — stripped from the production build.

Verify: every knob visibly changes the page, permalink round-trips, reset returns to the direction's defaults. Screenshot with the panel open.

Completion report

• Template: what was replaced (copy sections, brand slots, assets by tier — GENERATED assets listed), fonts kept/swapped and why
• Directions: the contact sheet + the three theses + which was picked
• Panel: knob list, permalink example
• Still theirs: anything structural you kept verbatim that the user should know about (section order, interaction patterns) — a remix is legitimate because the expression is new; say plainly what the skeleton still owes to the original

Guardrails

Phase 1 is mandatory before anything ships: no remix leaves with the original's logo, copy, people, product imagery, or licensed fonts. If the user asks to skip re-skinning and just "change the colors", say why that's still their site and do Phase 1 first.