jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
542213178233261403b587d4177db7e9a50d5ab4
singular-particular-space/CREATURE-PLAYGROUND/homepage-redesign/coordination.md
JL Kruger 5422131782 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>
2026-03-27 12:09:22 +02:00

14 KiB
Raw Blame History

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 = wj/numV). BOTTOM = fans beyond viewport (vpX ± spread2.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.

Reference in New Issue View Git Blame Copy Permalink