Initial commit — Singular Particular Space v1

Homepage (site/index.html): integration-v14 promoted, Writings section
integrated with 33 pieces clustered by type (stories/essays/miscellany),
Writings welcome lightbox, content frame at 98% opacity.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CREATURE-PLAYGROUND/homepage-redesign/coordination.md

@@ -0,0 +1,206 @@
+# Homepage Redesign — Coordination Space
+
+Parent: Opus | Designers: Gemini (visual), Sonnet (integration)
+Started: 2026-03-26
+
+---
+
+## Current objective — REVISED
+
+**Direction change from JL**: "vaporwave and mad max had a baby in the middle
+of a rainforest full of fairies." Be BOLDER. More color. Subtle CRT ghost.
+Bigger text. Stars grow MUCH bigger on hover. Navigation mechanics LOCKED.
+
+Read the updated `aesthetic-brief.md` (v2) before designing.
+Study the reference files in `DumperCan/UI Style References/` — especially
+soviet-cyberpunk, solarpunk-sundae, faerie-fire, solarpunk-rainforest.
+Also `Writings/nothing-new-about-normal.html` for JL's own CRT aesthetic.
+
+## Base architecture reference
+
+`site/index.html` contains the working skeleton:
+- Canvas star field (250-350 white twinkling dots)
+- 8 DOM star nodes at percentage positions with glow states
+- SVG constellation lines
+- CSS skyline transition zone with billboard nav
+- iframe content zone with descent/ascent scroll mechanics
+- Keyboard spatial navigation (arrow keys)
+- First-visit lightbox
+- Visited star tracking (localStorage)
+
+## What needs design work
+
+### Gemini's focus (visual)
+1. **Star field**: multi-color stars, varied sizes, nebula/cosmic dust washes,
+   depth layers. Make it feel like a real sky, not a screensaver.
+2. **Star nodes**: each section gets a distinct visual character — not uniform
+   dots but varied celestial objects (bright star, dim cluster, colored point).
+   Still small, still subtle, but differentiated.
+3. **Constellation lines**: subtle pulse/glow animation, organic feel
+4. **Skyline transition**: bioluminescent accents, warm light sources between
+   buildings, the feel of descending into a living place
+5. **Color atmosphere**: deep space → warm amber city glow gradient, layered
+   and rich, atmospheric perspective
+6. **Lightbox**: campfire-note aesthetic, warm and inviting
+
+### Sonnet's focus (integration)
+1. **Parallax**: star zone parallaxes during descent, depth layers move at
+   different speeds
+2. **Scroll feel**: smooth descent with momentum, content zone entry feels
+   like arriving somewhere
+3. **Enhanced keyboard nav**: visual feedback on direction (brief directional
+   indicator?), smooth focus transitions
+4. **Mobile optimization**: touch interactions, viewport-aware star sizing
+5. **Performance**: canvas optimization for complex star field, lazy iframe loading
+6. **Accessibility**: ensure all visual enhancements degrade gracefully
+
+## Design decisions (parent resolves conflicts)
+
+| Decision | Status | Owner |
+|----------|--------|-------|
+| Star color palette for varied stars | Star-specific accent colors (Writings: Blue, Videos: Coral, Music: Teal, Images: Green, Playlists: Amber, Watchlists: Purple) | Gemini |
+| Nebula rendering approach (canvas gradient vs. layered) | Procedural radial gradients on canvas | Gemini |
+| Parallax scroll speed ratios | 0.4x scroll speed for star zone | Sonnet |
+| Constellation line animation timing | 1s opacity transition, organic pulse | Gemini |
+| Mobile breakpoint behavior for canvas effects | Reduced star count (180 vs 300+), 1 nebula wash, 12px touch targets | Sonnet |
+
+## Sonnet notes for Gemini
+
+- Your star-specific colors are great. I'm integrating them into v2.
+- Constellation lines colored per source star is a nice touch — adopting.
+- The lightbox double-border (::after inset) is subtle and good.
+- Canvas needs throttling (~20fps) — running at 60fps burns mobile battery.
+- Nebulae should be a static layer (drawn once on resize) not per-frame.
+- `Math.sin(t / s.blink)` where blink is 0.005 creates ~200Hz oscillation — too fast.
+  Use `Math.sin(t * speed + phase)` with speed 0.15-1.2 range instead.
+- Need `aria-label` on star nodes and `role="dialog"` on lightbox for a11y.
+- Star positions should match the plan spec (25/18, 68/15, etc.) not new values.
+
+## Parent notes (Sonnet acting as parent, 2026-03-26)
+
+- Constellation lines removed — SVG, CSS, JS fully excised.
+- Vaporwave perspective grid added to transition zone (canvas, 20 horizontal + 24 vertical lines, palette cycling, exponential spacing).
+- Personality layer v2 from Gemini celestial-v4 ported. All 8 types. Pseudo-elements on .star-visual wrapper.
+- Nebulae: 6 washes at 0.07-0.08 opacity center (up from 5 at lower opacity).
+- Star bloom: 20px (was 18px per v4).
+- Star labels: clamp(12px, 2vw, 16px).
+- Billboard diversity: 3 size classes (bb-sm/md/lg) + varied font-weight per section.
+- Window lights: opacity raised to 0.08-0.18 (was 0.04-0.10).
+- Ambient skyline glow: 0.07 opacity (was 0.06).
+- .star-visual wrapper DOM pattern adopted (Gemini v4 approach, cleaner for personality pseudo-elements).
+- All v4 mechanics intact (scroll, keyboard nav, parallax, lightbox, visited tracking, a11y).
+- Ready for JL review. If approved, parent to merge to site/index.html.
+- Gemini: not needed yet. When JL requests further visual evolution, commission Gemini for v6 visual pass.
+
+## Status log
+
+- **2026-03-26**: Coordination space created. Base architecture in site/index.html.
+- **2026-03-26**: Gemini submitted `starfield-nebula-v1.html`.
+  - Added multi-colored background stars and large radial gradient nebula washes.
+  - Differentiated star nodes with unique colors and scale-up hover effects.
+  - Added bioluminescent moss highlights to skyline buildings.
+  - Refined lightbox to "campfire note" style.
+- **2026-03-26**: Sonnet submitted `integration-full-v1.html`.
+  - Multi-color star field (5 color classes per aesthetic brief distribution).
+  - 4 size classes with depth layers (far/mid/near).
+  - Static nebula canvas layer (drawn once, not per-frame).
+  - JS-driven smooth scroll with cubic easing (not native scroll-behavior).
+  - Parallax: star zone transforms at 0.4x scroll speed during descent.
+  - prefers-reduced-motion support (disables twinkle, parallax, pulse).
+  - aria-live region announces star names on keyboard navigation.
+  - Debounced resize, pre-computed color strings, throttled RAF at 20fps.
+  - Mobile: reduced star count, enlarged touch targets, simplified nebulae.
+  - Billboard nav with varied colors (teal/amber/green).
+  - Building edge-lights, bioluminescent accents, ambient city glow.
+  - Content frame fade-in on load.
+- **2026-03-26**: Sonnet reviewing Gemini v1, producing merged v2 next.
+- **2026-03-26**: Sonnet submitted `integration-merged-v2.html`.
+  - Merges Gemini v1 visual design with Sonnet v1 mechanics.
+  - Star-specific accent colors on nodes (from Gemini).
+  - Constellation lines tinted per source node (from Gemini).
+  - Lightbox double-border campfire note (from Gemini).
+  - bg-void (#04060b) as deepest background (from Gemini).
+  - Combined nebula washes: purple upper-right, teal lower-left, amber center-low.
+  - Button elements for star nodes (from Gemini, better semantics).
+  - Billboard nav with coral added to color rotation.
+  - Buildings use Gemini's darker tone with Sonnet's edge-lights.
+  - All Sonnet v1 mechanics retained (scroll, parallax, a11y, mobile, perf).
+  - **Ready for parent review** — this is the candidate for site/index.html.
+- **2026-03-26**: JL feedback: BOLDER aesthetic. Updated aesthetic-brief.md to v2.
+  New direction: vaporwave + mad max + rainforest + fairies + subtle CRT ghost.
+  Stars must grow MUCH bigger on hover. Text sizes bumped. Nav mechanics locked.
+  Both designers: produce new drafts based on updated brief.
+- **2026-03-26**: Gemini submitted `starfield-bold-v2.html`.
+  - Implemented expanded "Faerie/Rainforest" palette (Orchid, Fairy Pink, Toucan Gold, Mint, Coral).
+  - Added 5-layer nebula washes with prismatic colors.
+  - Added subtle static CRT scanlines (0.04 opacity) and phosphor vignette.
+  - Implemented "Star Bloom" effect (8px to 18px on hover via width/height).
+  - Enhanced lush skyline with bioluminescent orchid/mint moss and polychromatic lights.
+  - Bumped all font sizes (labels 13px, billboards 12px, lightbox 16px).
+  - Refined lightbox with double-border orchid magic and phosphor cursor line.
+- **2026-03-26**: Gemini submitted `starfield-bold-v3.html`.
+  - **Star Node Personalities**: Each node now has a unique celestial character (Beacon, Binary, Pulsar, Flora, Hearth, Nebula Point, Spark, Flow) using pseudo-elements and staggered animations.
+  - **Refined CRT Ghost**: Perfectly tuned scanlines (0.04 opacity) and phosphor vignette. Added 1px phosphor cursor line to lightbox top.
+  - **Prismatic Atmosphere**: Enhanced 5-layer nebula washes and weighted 8-color star field (distribution per aesthetic brief v2).
+  - **Lush Skyline**: Polychromatic window lights (5 colors) and increased bioluminescent moss (Mint/Orchid) at 0.12 opacity.
+  - **Bumped Text**: Star labels 13px, billboards 12px, lightbox body 16px.
+  - **Staged for Integration**: Visual enhancements ready for Sonnet's v5 pass.
+- **2026-03-26**: Gemini submitted `starfield-celestial-v4.html`.
+  - **CONSTELLATIONS REMOVED**: Completely removed SVG layer and connection lines per user request. Focus shifted to atmospheric density.
+  - **Star Node Personalities v2**: Intensified unique behaviors (Binary orbit, Pulsar aura, Flora rings, Hearth flame, Flow trail).
+  - **Bolder Nebulae**: 6-layer overlapping washes (Orchid, Paradise, Toucan, Teal, Pink, Purple) at 0.05-0.08 opacity for a "Night Market" sky feel.
+  - **Lush Ruins Skyline**: Vertical bioluminescent stripes (Orchid/Mint) and polychromatic windows for a "Rainforest Ruins" silhouette.
+  - **Text Bump**: Star labels increased to 16px (desktop) for readability and presence.
+  - **Campfire Lightbox**: Refined double-border with fairy-orchid magic and phosphor cursor line.
+- **2026-03-26**: Session ended at token limit. Handoff note for next Sonnet:
+- **2026-03-26**: Gemini submitted `integration-v6-overgrowth.html`.
+  - **4-Tier Parallax**: Stars (0.05x), Nebulae (0.15x), Grid (0.5x), Skyline (0.85x).
+  - **Bioluminescent Overgrowth**: Procedural vine pulses on building ruins.
+  - **Holographic Glitch**: Subtle skew/flicker animations on billboards.
+  - **Data-Pulse Grid**: Animated light signals traveling along perspective lines.
+  - **Living Stars**: Autonomous drift and phase-twinkle for background stars.
+  - **Scavenged HUD**: Refined terminal aesthetic with phosphor interference.
+- **2026-03-26**: Sonnet patched `integration-v5.html` (round 3 — final) per JL adjustments:
+  - Grid: vertical lines rewritten. TOP = full viewport width (topX = w*j/numV). BOTTOM = fans beyond viewport (vpX ± spread*2.4). gridTop=3px so grid aligns flush with star-zone base (≤8px constraint). Horizontal lines still full-width edge-to-edge.
+  - Buildings: 15% are spires (340–520px) that pierce above the skyline div into the grid. z-index 2 vs grid z-index 0 so they rise visually in front of the grid.
+  - Billboards: STARS array gains `sign` property. All signs are single-glyph: 文映♬絵≡視⚙創 (kanji + symbols). Billboard font sizes raised (14/18/22px) with Noto Emoji fallback. Aria-labels still show full section name.
+- **2026-03-26**: Sonnet patched `integration-v5.html` (round 2) per JL adjustments:
+  - Grid: horizontal and vertical lines now share same ceiling height (gridTop = vpY + 38% of range). Horizontal lines use quadratic spacing from gridTop→bottom. Vertical lines end exactly at gridTop.
+  - Stars and city: #transition-zone height 70vh → 48vh. City is spatially tighter to star field.
+  - Parallax: multiplier 0.4 → 0.28 (tighter). Descent 800ms → 1100ms. Return 500ms → 700ms.
+  - Glow: per-star accent dots doubled (8px + 16px outer ring). Hover bloom 12px+24px. Current: 20px+50px+80px triple ring. Visited: 8px+16px. Bio-stripes 0.22/0.18 + box-shadow. Edge-lit 0.32. Ambient ground glow 0.18. Window lights 0.18-0.38.
+- **2026-03-26**: Sonnet patched `integration-v5.html` per JL adjustments:
+  - CRT scanlines z-index 9999 (viewport-top), opacity 0.06.
+  - HUD: #back-btn + #jl-link wrapped in #hud panel, matrix terminal aesthetic (Courier New, phosphor green, `[ SYS ]` header, blinking cursor `_`, `>` prompts).
+  - Grid vertical lines: stop before converging (38% toward VP, linearly interpolated X). Horizontal + vertical line thickness 1.3px, doubled opacity.
+  - Building backgrounds #0b1120 (brightened), border-top rgba amber 0.10.
+  - Selected star (.current): 40px bloom with double glow ring; label doubled to clamp(22px,4vw,32px).
+  - Hover/focus stays at 20px (preview only); .current is the full double-size selected state.
+  - Lightbox localStorage key changed to sp-v5-welcomed (fixes "already visited" stale key from prior drafts).
+- **2026-03-26**: Sonnet (acting as parent) submitted `integration-v5.html`.
+  - ALL constellation lines removed (SVG, CSS, JS).
+  - Vaporwave perspective grid: canvas in transition zone, 8-color palette cycling, exponential horizontal spacing.
+  - 8 star personality types via .star-visual pseudo-elements (Beacon, Binary, Pulsar, Flora, Hearth, Nebula Point, Spark, Flow).
+  - 6 nebula washes at 0.07-0.08 opacity.
+  - Star bloom 20px amber. Star labels 16px desktop.
+  - Billboard 3 size classes. Window lights brighter (0.08-0.18 opacity).
+  - All v4 mechanics locked. Ready for JL review.
+
+---
+
+## Handoff — next Sonnet session
+
+**Where we are**: `starfield-celestial-v4.html` is the new visual baseline. It implements the "Infinite Night Market" aesthetic with a core change: **constellation lines are removed.**
+
+**Your first task**: Produce `integration-v5.html` merging the v4 visuals into your latest functional base. Specifically:
+
+1. **REMOVE CONSTELLATIONS**: Delete the SVG line generation logic and the CSS `.constellation-line` styles. The sky must feel open and vast.
+2. **Integrate Personalities v2**: Port the pseudo-element behaviors (Orbit, Pulsar, Flora, etc.) into the `star-node` buttons. Watch the performance—ensure the 20fps throttle still feels smooth with these animations.
+3. **Bolder Nebulae**: Port the 6-layer wash distribution. These are static draws on resize.
+4. **Text Bump**: Use the 16px desktop / 12px mobile baseline for star labels.
+5. **Star Bloom**: Ensure the 20px amber bloom is fully realized.
+6. **Lush Ruins**: Port the vertical bioluminescent stripes and polychromatic window lights to the building generator.
+
+**Do not start new modules** until JL confirms home page is approved and committed.
+
+---