Complete Cursor AI Landing Page Guide

<!-- 
  Blogger Post: Prism — Interactive 3D WebGL Glassmorphic Shader Hero
  Labels to use: Components, WebGL, 3D, React
-->

<div class="vbx-post-media">
  <img alt="Prism WebGL Shader Hero" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1200&auto=format&fit=crop" style="display:none;" />
  <iframe src="https://www.youtube.com/embed/ysz5S6PUM-U" style="display:none;" allow="autoplay"></iframe>
</div>

<div class="vbx-post-body">
  <pre><code>Build a high-performance interactive 3D WebGL Shader Hero component called "Prism" using React, Three.js / React Three Fiber, Tailwind CSS, and Framer Motion.

---

1. ARCHITECTURE & SHADER SPECIFICATION
- Vertex & Fragment Shader: A dynamic liquid iridescent ribbon / torus knot that responds smoothly to mouse pointer coordinates.
- Mouse Physics: Smooth damping using lerp (`currentX += (targetX - currentX) * 0.05`) with chromatic aberration at higher velocity movements.
- Lighting & Material: Custom MeshPhysicalMaterial with roughness `0.15`, metalness `0.85`, transmission `0.9`, and environment reflections using an HDR light map.
- Fallback: CSS animated gradient backdrop if WebGL2 is not supported on the device.

---

2. HERO CONTENT OVERLAY (HTML / DOM Layer)
- Centered layout with z-index above WebGL canvas:
  - Announcement Badge: "PRISM ENGINE v4.0 // READY FOR PRODUCTION" with animated shimmering border.
  - Giant Display Typography: "GENERATE INFINITE 3D WORLDS IN YOUR BROWSER".
  - Subtitle: "Ultra-low latency WebGL graphics powered by procedural shaders. 60 FPS across desktop and mobile devices."
  - Action Group:
    - Primary CTA: "Launch Interactive Playground" with glowing hover shadow.
    - Secondary CTA: "View Shader Code on GitHub" with external link icon.

---

3. INTERACTIVE CONTROLS TRAY (Floating Glass Pill)
- Floating bottom pill dock (`backdrop-blur-xl bg-black/40 border border-white/10 rounded-full px-4 py-2`):
  - Shader Mode Toggle: "Iridescent", "Neon Liquid", "Cyber Wireframe", "Deep Space".
  - Particle Speed Slider.
  - Wireframe Mesh Mode Toggle.
  - Fullscreen expansion toggle.

---

4. PERFORMANCE OPTIMIZATIONS
- Automatic DPR capping (`Math.min(window.devicePixelRatio, 2)`).
- Pause render loop when element is off-screen using IntersectionObserver.
- Memory cleanup: dispose geometry, textures, and material on component unmount.</code></pre>
</div>
Complete Cursor AI Landing Page Guide

Vebnox Studio Guide

Deploy Next.js & AI Websites on Hostinger Cloud
