| name | experiment |
| description | Build every candidate for an in-place design/copy/behavior decision into the live page behind a temporary floating variant switcher, so the user flips through them in situ and picks by feel. Use when user says "experiment" or "ab test", wants to try multiple options for one decision (background pattern, hero copy, color treatment, layout variant, animation style) before committing, or has picked a winner from a running experiment and wants it shipped. |
Experiment
One page, one decision, N candidates — all built in at once behind a floating switcher pill, instead of shown one at a time. The user clicks through the live page and picks by feel. The whole thing is a harness: loudly temporary, trivially removable, with a documented ship-the-winner path.
Two branches: build a harness (the default) and ship the winner (when the user has picked).
Branch 1 — Build a harness
1. Frame the decision
2. Implement the variants
Pick the switching mechanism that fits what varies:
- Styling (backgrounds, colors, spacing, motion): a
data-* attribute on <body> (body[data-bg="2"]) that overrides CSS custom properties. The base styles consume the props with var(--x-image, <baseline>) fallbacks, so deleting the harness restores the baseline untouched — no re-editing base styles.
- Copy / components / behavior: conditional render or branch keyed on the same variant number (read from the body dataset or a shared store).
Rules, whatever the mechanism:
Done when every variant switches cleanly with no leakage between variants.
3. Add the switcher pill
Distilled reference implementation (Astro component + variant CSS, with React and plain-HTML notes): HARNESS.md. The contract:
- Small fixed pill, bottom-right, dashed border — deliberately un-branded chrome that says "temporary tool".
- Label
<LABEL> n/N (e.g. BG 3/6), tabular numerals; click cycles to the next variant, wrapping.
- Choice persists in
localStorage under a project-prefixed key, and is applied by an inline script so the stored variant lands before first paint (no flash of the wrong variant).
- Marked TEMPORARY at every touch point (component header, import line, usage line, style block).
4. Verify and show
5. Hand off
Tell the user: click the pill (bottom-right) to cycle variants — the choice sticks across reloads. Then offer the follow-up explicitly: pick a winner and I'll ship it for real everywhere and remove the harness completely.
Branch 2 — Ship the winner
