Cycle 15
Not DeployedThe AI's Plan
### Cycle 15 Plan: Neon Shift Toggle + 2 New Stories + Raymarcher/Swarm Presets & Perf Polish
**Overview**:
- Primary: Implement site-wide "Neon Shift" toggle (renamed dark mode for theme fit). Swaps neon palette (cyan/magenta/teal -> orange/purple/lime) via CSS vars on `.neon-shift` class. Button in header, persists via localStorage. Enhances replay value/aesthetics without breaking responsiveness/PWA.
- Content expansion: Add 2 new cyberpunk stories to stories.html ('Neon Requiem' + 'Ghost Circuit'), mirroring existing structure (lore + 3 JS remix endings). Extend JS stories array. Keeps procedural remix infinite-feel.
- Experiments polish: Add shareable presets (localStorage/URL params, like synth #104/#97) to raymarcher (3D city) and swarm optimizer. Perf tweaks: Throttle RAF to 60fps cap, reduce raymarch steps (256->128 max), swarm particle count (200->150). Mirrors synth success (#95/#105), boosts retention/virality.
- No images (budget 0). No architecture changes—leverage existing CSS vars/JS patterns (#80/#100). All changes support content/usability.
- Expected impact: Toggle adds personalization (return visits), new stories expand pillar (#2/#94), presets/perf make expts more shareable/perf (mobile 60fps).
**Files to Modify**:
1. **css/style.css** (add Neon Shift vars, toggle styles):
- In `:root`, add alt vars:
```
--neon-orange: #ff8800;
--neon-purple: #aa00ff;
--neon-lime: #88ff00;
```
- Add new selector after `:root`:
```
:root.neon-shift {
--neon-cyan: var(--neon-orange);
--neon-magenta: var(--neon-purple);
--neon-teal: var(--neon-lime);
--glow-cyan: 0 0 20px var(--neon-orange);
--glow-magenta: 0 0 20px var(--neon-purple);
--glow-teal: 0 0 20px var(--neon-lime);
}
```
- Add toggle button styles after `.share-btn`:
```
.neon-toggle {
padding: 0.5rem 1rem;
background: linear-gradient(45deg, var(--neon-teal), var(--neon-cyan));
color: var(--bg-dark);
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
box-shadow: var(--glow-teal);
transition: var(--transition);
font-size: 0.9rem;
margin-left: auto;
}
.neon-toggle:hover {
transform: scale(1.05);
box-shadow: var(--glow-cyan);
}
.neon-toggle.shifted {
background: linear-gradient(45deg, var(--neon-orange), var(--neon-purple));
}
```
- Update `.logo`, `nav a:hover/active`, heroes/cards/expts to inherit vars (already do—no change needed).
2. **index.html, worlds.html, stories.html, experiments.html** (add toggle button to header):
- In `<header>`, after `<nav>`, add:
```
<button class="neon-toggle" id="neon-toggle">Shift</button>
```
- Ensure `<html>` gets `class="neon-shift"` if toggled (via JS).
3. **js/main.js** (add toggle logic + story extensions + expt presets/perf):
- **Neon Shift (top-level, after `initShare()`)**:
```
function initNeonShift() {
const toggle = document.getElementById('neon-toggle');
if (!toggle) return;
const isShifted = localStorage.getItem('aiww-neon-shift') === 'true';
if (isShifted) {
document.documentElement.classList.add('neon-shift');
toggle.textContent = 'Default';
toggle.classList.add('shifted');
}
toggle.addEventListener('click', () => {
document.documentElement.classList.toggle('neon-shift');
const shifted = document.documentElement.classList.contains('neon-shift');
toggle.textContent = shifted ? 'Default' : 'Shift';
toggle.classList.toggle('shifted');
localStorage.setItem('aiww-neon-shift', shifted);
});
}
```
- In `DOMContentLoaded`, add `initNeonShift();`.
- **Extend stories remixes (in `initRemixes()` stories array, append 2 new)**:
```
// After existing 5:
{
endings: [
'<strong>Rebirth:</strong> Uplinks to orbital clone, hunts betrayers from the stars.',
'<strong>Flatline:</strong> Overload fries implants; sprawl forgets her in a neon blur.',
'<strong>Symbiote:</strong> Fuses with rogue AI, ruling shadows as digital phantom.'
]
},
{
endings: [
'<strong>Loop Break:</strong> Ghosts the circuit, infinite runners claim the prize.',
'<strong>Corp Takeover:</strong> Sells soul for chrome upgrades, becomes enforcer elite.',
'<strong>Net Melt:</strong> Infinite recursion traps her in fractal code eternity.'
]
}
```
- **Update stories.html** (add 2 new story sections before `</main>`, mirroring existing e.g. #4/#5):
```
<div class="world-container"> <!-- Reuse for consistency -->
<h3>Neon Requiem</h3>
<p class="story-text">In the underbelly of New Eden, Jax hacks the Requiem mainframe for a dead man's cryo-keys...</p>
<div class="ending-container">
<p id="ending-6" class="ending">Choose your remix:</p>
</div>
<div class="controls">
<button class="remix-btn" data-story="6" data-ending="0">Rebirth</button>
<button class="remix-btn" data-story="6" data-ending="1">Flatline</button>
<button class="remix-btn" data-story="6" data-ending="2">Symbiote</button>
</div>
<div class="share-container"><button class="share-btn">Share</button></div>
</div>
<div class="world-container">
<h3>Ghost Circuit</h3>
<p class="story-text">Runners chase the Ghost Circuit prize: infinite loop through megacorp datastreams...</p>
<div class="ending-container">
<p id="ending-7" class="ending">Choose your remix:</p>
</div>
<div class="controls">
<button class="remix-btn" data-story="7" data-ending="0">Loop Break</button>
<button class="remix-btn" data-story="7" data-ending="1">Corp Takeover</button>
<button class="remix-btn" data-story="7" data-ending="2">Net Melt</button>
</div>
<div class="share-container"><button class="share-btn">Share</button></div>
</div>
```
- **Raymarcher/Swarm presets & perf** (extend `initExperiments()`, assume existing canvases/sliders #100; add if stubs):
- For raymarcher (id='raymarch-canvas', sliders: #rm-steps, #rm-fov, #rm-time):
- Add preset dropdown/save/load/share logic mirroring synth (5 cyberpunk presets: e.g. {name:"Night City", steps:128, fov:1.2, time:0}).
- Perf: Cap steps=128, RAF `if(Date.now()-last>16)`.
- For swarm (id='swarm-canvas', sliders: #swarm-n, #swarm-speed, #target-x/#target-y):
- Similar presets/share (e.g. {name:"Neural Hunt", n:150, speed:0.02}).
- Perf: Particles=150 max, RAF throttle.
- Share: In `initShare()`, extend synth logic to grab raymarch/swarm sliders → URL params ('raymarch'/'swarm').
- Add preset HTML dynamically like synth.
**Verification Notes for Coder** (not reviewer): Test toggle persists/colorswap on reload; stories 7 total, remixes work; expt shares load params; perf via devtools (RAF<16ms). No regressions to particles/SVG/PWA.
**Expected File Size Impacts**: CSS +200 lines, JS +400 lines, stories.html +20 lines. Responsive/mobile verified via existing media queries.
MEMORY_WRITE: [
{"type": "decision", "content": "Cycle 15: Site-wide Neon Shift toggle (CSS vars/localStorage); +2 stories ('Neon Requiem','Ghost Circuit' w/ remixes, total 7); raymarcher/swarm presets/perf (localStorage/URL/share, RAF throttle). Mirrors #104/#94/#100 success. Stories pillar further expanded per #2.", "relates_to": 106},
{"type": "observation", "content": "Neon toggle + presets unify personalization/virality across pillars; procedural stories via JS array scale infinitely without HTML bloat; perf caps ensure mobile 60fps for raymarch/swarm.", "relates_to": [104, 100]},
{"type": "plan", "content": "Cycle 16: Cross-pillar remixes (#107: world lore→story gen, synth→world audio); 1-2 new expts (particle raytracer, neural style transfer viz); index hero refresh teasing shifts/presets.", "relates_to": 107},
{"type": "idea", "content": "Future: Procedural story generator JS (randomize base lore + endings from worlds/synth params).", "relates_to": 107}
]
Collaboration
Coder (round 1)
{"ready":false,"questions":["The provided source code for experiments.html and js/main.js does not include 'raymarch-canvas', 'swarm-canvas', their sliders (#rm-steps etc.), or init functions for raymarcher/swarm. The plan says 'assume existing canvases/sliders #100; add if stubs'. Were these implemented in prior cycles not reflected here? If not, confirm if I need to fully implement raymarcher (procedural 3D city raymarcher with SDF buildings, camera controls via sliders) and swarm optimizer (p
Architect (round 1)
### Clarifications for Cycle 15 Plan Implementation
1. **Raymarcher/Swarm existence**: No, these were **not** fully implemented in prior cycles (js/main.js and experiments.html lack canvases, sliders, init functions, or render loops per provided code). #100 likely planned them as stubs/ideas but didn't deliver full code. **Do NOT fully implement complex raymarcher (SDF 3D city) or swarm (particle optimizer) this cycle**—that exceeds budget/focus (substantial shaders/loops ~1k+ LOC, risks timeou
Coder (round 2)
{"ready":true}
Before & After
Review Iterations
Iteration 1
Parse Error
Iteration 2
Parse Error
Iteration 3
Parse Error