A standalone WebGL art piece by Aylux (GitHub: K4bain). Not a portfolio. Not a tool. Art.
Every act of creation is an attempt to return to Eden.
The full creative brief, technical plan, and philosophy-to-code mapping live
in EDEN_FULL_CONTEXT.md (one level up, in the project root). Read it before
changing anything. Do not simplify. Do not water down.
The Observer Effect is real. The visitor moves their cursor and the darkness moves back. Warm amber light blooms where they look. 1400 particles drift like Pascal's stars; they lean toward the cursor — slowly, like something alive drawn to warmth. The painted surface reveals itself only where the visitor illuminates it. The full text arc from Phase 2 runs on top: the exploration window, the revelation surge, EDEN's arrival.
| Phase | Status | What it adds | |-------|--------|| | 1 — The Shell | ✅ done | HTML/CSS foundation, layer stack, loading screen, typography, procedural textures | | 2 — GSAP Timeline | ✅ done | The full text arc: exploration window → EDEN reveal | | 3 — Three.js + Cursor | ✅ this session | Particle field (1400), cursor light, Observer Effect, 3D background plane | | 4 — Post-Processing + Polish | next | EffectComposer pipeline, sfumato/chromatic/grade shaders, final timing |
Requires http:// — ES modules + importmap need a real server.
- Desktop shortcut (
Eden.lnk): double-click. Starts a Python/Node server on port 8765, opens your browser, and auto-kills the old server if you re-launch. - VS Code: right-click
index.html→ Open with Live Server. - Terminal:
cd eden && python -m http.server 8765then openhttp://localhost:8765/. - Verify without browser:
node tools/verify.js.
eden/
├── index.html ← entry. loading-screen CSS INLINE in <head> (Gotcha #1)
├── style.css ← layer stack (§12), typography (§6/13), colors (§6), Phase 2/3 keyframes
├── start.bat ← Windows launcher: starts server + opens browser
├── js/
│ ├── main.js ← ES module orchestrator: detect → load → scene → timeline
│ ├── eden/
│ │ ├── loader.js ← fonts.ready + textures + 1.2s min (Phase 3 extends)
│ │ ├── timeline.js ← GSAP master timeline (the director)
│ │ └── cursor.js ← 2D canvas cursor light + PointLight bridge (§17)
│ └── three/
│ ├── scene.js ← renderer, camera, render loop, event wiring, resize
│ ├── particles.js ← 1400/250 particle field (§8)
│ ├── lights.js ← PointLight (cursor) + AmbientLight (Pascal's void)
│ └── background.js ← painted surface plane, reveals on cursor/revelation
├── assets/
│ └── textures/
│ ├── bg-main.png ← PLACEHOLDER (procedural) → replace with ImageFX .webp
│ ├── bg-atmosphere.png ← PLACEHOLDER (procedural) → replace with ImageFX .webp
│ └── README.md ← ImageFX prompts + how to swap in real art
├── fallback/
│ └── fallback.css ← no-WebGL atmosphere (pure CSS)
└── tools/
├── generate-textures.js ← regenerate the procedural placeholders
└── verify.js ← structural + Phase 3 wiring sanity check (65 checks)
bg-main.png/bg-atmosphere.png— procedural value-noise textures, generated bynode tools/generate-textures.js. They evoke the palette and read as atmospheric; they are not the final ImageFX art. Seeassets/textures/README.mdfor the prompts and the swap procedure.- Grain — inline SVG data URI in
style.css(#grain). Replaced bygrain.webpwhen the real tile is ready. The 3D normalMap inbackground.jsisnulluntil grain.webp lands. - Chromatic aberration — Phase 2 uses a brief CSS
filterkeyframe (.chromatic-activeon#eden-content). Phase 4 replaces this with the GLSLShaderPasson the WebGL composer for a true RGB-split on the canvas.
Everything else is final for its phase.
- "In the beginning." is italic — the brief doesn't specify. Italic at
Garamond 300 reads as the most fragile possible whisper. One line to
revert in
style.css. .eden-nameoptical centering viamargin-left/text-indent.bg-mainismix-blend-mode: multiplyatopacity: 0.9per §12. Intentionally dark — the cursor's PointLight reveals it. Swap in real art to see it fully.- WebGL detection checks both
webgl2andwebgl— broader than the brief'swebgl2-only check. No downside. - Exploration window: gesture- or idle-triggered, 8s minimum floor so the window can't be short-circuited (§3 "Death of the Author").
- Chromatic aberration is CSS for now — Phase 4 swaps for the real GLSL ShaderPass.
- Hard 6s safety timeout — the loading screen is never permanent. CDN blocked? Offline? Module error? The shell still shows.
start.batlauncher — the desktop shortcut now starts a real HTTP server (Python or Node) then opens the browser, because ES modules requirehttp://.- Particles use a canvas-generated soft dot texture (64×64 radial gradient) instead of a loaded sprite. Looks like light, not squares. No external asset needed.
- Cursor light intensity animated with rAF, not GSAP, to keep the Three.js modules free of the GSAP global dependency.
- Background plane texture loaded async — the 3D scene boots immediately with a dark plane; the texture attaches when the fetch resolves, so the experience isn't gated on texture download.
Hand the next AI this folder and EDEN_FULL_CONTEXT.md. The relevant
prompt is "Prompt for Session 4 (Post-Processing + Polish)" in §20.
Concretely, Phase 4 will:
- Add
js/three/postprocessing.js+shaders/sfumato.glsl,chromatic.glsl,colorgrade.glsl. - Build the EffectComposer pipeline: RenderPass → UnrealBloomPass → FilmPass → ShaderPass(sfumato) → ShaderPass(colorgrade) → ShaderPass(chromatic).
- Wire bloom strength to the revelation surge (0.5 → 1.0 → 0.7, 0.8s).
- Disable FilmPass on Safari and mobile (Gotcha #4).
- Replace the CSS chromatic keyframe with the real ShaderPass.
- Final timing pass — "this is where you spend the most time." (§19)
- Full test matrix: Chrome, Firefox, Safari, mobile, slow 3G, prefers-reduced-motion, no-WebGL, resize during experience.
The event hooks, resize handler, and mobile/no-WebGL paths are already wired. Phase 4 is the one-percent that separates good from unforgettable.