▲Gemini 3.8 Flash3D landing
Particle-morph 3D storytelling landing page
A fixed 3D canvas of glowing particles morphs through 4 story acts as the user scrolls.
I have an idea for a high-end, award-winning interactive landing page. As the user scrolls down the page, I want a single fixed 3D canvas where thousands of glowing micro-particles morph to visually tell a story across 4 sections:
1. The Storyboard (What happens as you scroll):
Act 1 (Intelligence): We open with a high-definition 3D human brain made of particles sitting on the right side of the screen, subtly breathing. As you scroll slightly, it rotates to show its side profile while text appears on the left.
Act 2 (Chaos): As you scroll deeper, the brain suddenly bursts outward into an expansive, cosmic cloud of drifting fragments and floating wireframe geometric shapes (like pyramids/tetrahedrons) to represent overwhelming chaos.
Act 3 (The Idea): Keep scrolling, and the chaotic cloud gathers and locks into a tilted vintage Edison lightbulb with an illuminated glowing filament loop inside.
Act 4 (Global Reach): Finally, the particles reorganize into a rotating 3D globe with continental landmasses and coordinate rings.
2. The Aesthetic & Color (The Vibe):
Don't make it look like a generic AI site with bright purple/cyan neon.
I want a peaceful, luxury architectural feel: warm deep espresso-stone background, with the particles shaded in natural botanical and mineral tones (soft sage green, warm sand/linen, muted amber, and pale champagne highlights).
Clean editorial typography with generous spacing and frosted glass cards.
3. Physical Feel & Interactions:
Scroll: Ultra-smooth kinetic momentum scrolling (like butter).
Mouse reaction: When you hover your cursor over the brain or shapes, don't swing or tilt the whole 3D object like a toy. Make it feel alive—like getting goosebumps, where only the local particles directly under the mouse gently lift upward off the surface.
Readability rule: Moving particles must NEVER make text hard to read. Clear a pocket or halo around headlines so copy is always crisp.
Quality mandate: Zero blobby or potato-like shapes. The brain must have real cerebral folds, the bulb must have the screw base and filament, and the globe must have recognizable continents.
Build this in Three.js and GSAP so it runs at a silky smooth 60+ FPS in the browser."
~ And here's the post build structured prompt.. you may give it screenshots of my post or the video itself as an reference to compare to if you want the exact results
# MISSION: High-End WebGL 3D Particle Scrollytelling Experience
Build an Awwwards-grade, production-ready 3D particle scrollytelling web application from scratch using Vite, Vanilla Three.js, Custom GLSL Shaders, GSAP ScrollTrigger, and Lenis kinetic smooth scrolling.
---
## 1. CORE ARCHITECTURE & TECH STACK
- **Bundler:** Vite (minimal config, ES modules, <250ms build time).
- **3D Engine:** Three.js (r160+) with a single continuous full-screen `<canvas id="webgl-canvas">` fixed in the background (`z-index: 0`).
- **Scrollytelling:** GSAP (v3) + ScrollTrigger plugin tied to a continuous timeline (`uProgress: 0.0 → 4.0`).
- **Kinetic Smooth Scroll:** Lenis.js configured for weighted, butter-smooth momentum scrolling.
- **Shader Pipeline:** Custom GLSL Vertex and Fragment shaders operating on a single `THREE.BufferGeometry` holding 36,000 GPU particles.
- **Target Performance:** 60–144 FPS hardware-accelerated rendering; zero WebGL compile warnings; zero memory leaks on resize.
---
## 2. 3D STRUCTURAL GEOMETRIES (STRICT: ZERO BLOBBY SHAPES)
Create 4 mathematically precise point clouds with an identical point count (36,000 vertices) passed as GPU BufferAttributes (`position`, `aPosChaos`, `aPosBulb`, `aPosGlobe`, `aNormBrain`, `aNormBulb`, `aNormGlobe`, `aSeed`):
1. **Stage 1 — Anatomical Human Brain (`position`):**
- Must NOT be an ellipse or noisy sphere. Construct dual symmetrical cerebral hemispheres separated by a distinct longitudinal fissure.
- Modulate surface with harmonic gyri crests and deep sulci folds.
- Include a tapered brainstem and realistic cerebellar lobes tucked beneath the occipital pole.
2. **Stage 2 — Workplace Entropy / Chaos Field (`aPosChaos`):**
- Disperse particles into an expansive 3D volumetric field using 3D Fractional Brownian Motion (fBm) and turbulent curl noise offsets.
- Surround with 15–20 ambient wireframe polyhedra (tetrahedrons and octahedrons) drifting through z-space with depth-of-field scale variations.
3. **Stage 3 — Edison Lightbulb (`aPosBulb`):**
- Smooth upper glass teardrop envelope transitioning into a tapered waist.
- Modeled helical ridges representing the metal threaded screw cap and contact terminal at the base.
- An internal glowing dual-arch tungsten filament loop.
- Mesh must be positioned on the left and tilted diagonally at roughly -28° ($z$-rotation).
4. **Stage 4 — Planetary Globe (`aPosGlobe`):**
- Fibonacci spiral spherical distribution.
- Dense point clustering forming recognizable continental landmasses (Americas, Eurasia, Africa) with thinner coordinate rings for latitude/longitude lines and polar caps.
---
## 3. CUSTOM GLSL SHADERS & GPU MATHEMATICS
### Vertex Shader:
- **Morph Interpolation:** Calculate continuous transition across 4 stages using smoothstep blends:
`pos = mix(posA, posB, smoothstep(0.0, 1.0, fract(uProgress)))`
- **Curl Noise Turbulence:** Inject 3D simplex/curl noise into vertex positions proportional to `sin(fract(uProgress) * 3.141592)` so particles swirl organically in 3D arcs during transitions instead of moving mechanically in straight lines.
- **View-Space Particle Repulsion:** Moving particles must NEVER obscure headlines. Project particle positions into view space; if a particle falls within the screen-space bounding box of active typography, apply a radial repulsion force in view space (`mvPosition.xy += repelDir * strength; mvPosition.z -= depthOffset;`) so particles part cleanly around the text in an organic halo.
- **Localized "Goosebumps" Surface Lift (Hover Physics):**
- Do NOT tilt, rotate, or distort the macro 3D object on mouse move.
- Track 3D cursor raycast position on the model. For vertices within a tight radius ($R < 0.65$), displace them outward strictly along their surface normal:
`position += normal * (hoverIntensity * smoothstep(radius, 0.0, dist)) * 0.22`
- Particles under the cursor gently elevate like ruffled feathers or goosebumps and brighten subtly, settling smoothly when the cursor moves away.
### Fragment Shader:
- **Micro-Primitives:** Render sharp geometric micro-triangles and micro-dots using 2D Signed Distance Fields (SDF). Distribute primitives as 60% hollow wireframe triangles with crisp borders, 25% semi-transparent micro-triangles, and 15% specular star glints.
- **Surface Normal Fresnel & Lighting:** Compute analytical surface normals across stages and apply view-space Fresnel rim lighting:
`fresnel = pow(1.0 - clamp(dot(normal, viewDir), 0.0, 1.0), 2.0);`
- **Non-Blowing Additive Math:** Eliminate overblown white silhouettes in `THREE.AdditiveBlending`. Instead of adding constant white scalars, scale the particle’s own base color proportionally (`col += col * (0.35 * rim)`), preserving rich internal sulci and filament details without clipping to solid white `#FFFFFF`.
---
## 4. DUAL AESTHETIC EDITIONS (CHOOSE ONE OR IMPLEMENT SWITCHER)
### Edition A: Natural Earth & Espresso (Warm Luxury Architectural)
- **Background:** Warm deep espresso-stone `#131211` (strictly NO harsh `#000000` pitch black).
- **Particle Tonal Spectrum:** Botanical and mineral chromas:
- Base body: Warm sand (`#a88f6c`) and deep moss/sage (`#3d633a` / `#6b9666`).
- Highlights: Radiant warm amber (`#db8f38`) and soft champagne (`#ebdcb8`).
- Zero generic neon purple or electric cyan.
- **UI & Controls:** Frosted dark navbar, warm linen/sand pill CTA button (`#ede9e1` with dark espresso text), and seamless radial gradient scrims behind text with zero boxy edges.
### Edition B: Inverted Architectural Monochrome (Editorial Light Mode)
- **Background:** Crisp pure alabaster white `#ffffff` or `#fafaf9`.
- **Particle Material & Blending:** Use `THREE.NormalBlending` (with `transparent: true`, `depthWrite: false`). Output deep inky black, dark charcoal (`#14161a`), graphite, and gunmetal slate particles that stamp onto the white canvas like architectural ink stippling.
- **UI & Cards:** Translucent frosted glass cards (`background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px); border: 1px solid rgba(0, 0, 0, 0.08);`) so dark particles and wireframes remain visibly gliding behind the glass. Crisp pitch-black pill CTA (`#000000` with `#ffffff` text).
---
## 5. SCROLLYTELLING LAYOUT & TYPOGRAPHY HIERARCHY
- **Scroll Sequence (5 Storytelling Moments):**
- Section 0 (`p = 0.0`): Hero Brain on right, headline on left (*"Unlock collective wisdom"*).
- Section 1 (`p = 1.0`): Brain rotates to reveal lateral cortex on left, headline on right (*"Make decisions with confidence"*).
- Section 2 (`p = 2.0`): Workplace Entropy — centered headline (*"The impossible battle to make sense of this chaos"*) framed by dispersing particles and tumbling polyhedra.
- Section 3 (`p = 3.0`): Lightbulb on left tilted at -28°, glowing tungsten filament, feature cards on right (*"Spark lightbulb moments"*).
- Section 4 (`p = 4.0`): Planetary Globe rotating on right, global cluster terminal card on left (*"Build a better world of work"*).
- **Tracker Rail Collision Safeguard:** The fixed right-side vertical scrollytracker rail must have a dedicated clearance gutter. All right-aligned text blocks must specify `margin-right: clamp(7rem, 11vw, 13rem);` so tracker labels never collide with body copy.
- **Responsive Mobile Breakpoints:** Provide `@media (max-width: 640px)` rules to hide secondary telemetry, adapt camera distance ($z = 5.6$), and stack cards cleanly without horizontal overflow.
---
## 6. VERIFICATION & QUALITY GATES
1. `npm run build` must compile cleanly with 0 errors in under 300ms.
2. Console must report 0 WebGL errors and 0 deprecation warnings (use `http://performance.now()` instead of deprecated `THREE.Clock`).
3. Verify at 1920x1080 viewport: confirm crisp text legibility, zero tracker collisions, and fluid 60+ FPS rendering throughout the entire scroll journey.
