singular-particular-space/CREATURE-PLAYGROUND/homepage-redesign/coordination.md

# 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.

---