Prompt for hero background

As in threedimos-2

Tools and Tech Stack

• Framework: React + TypeScript
• WebGL Engine: Three.js (three & @types/three / or optionally @react-three/fiber)
• Shader Technology: Custom raw GLSL Vertex and Fragment Shaders (RawShaderMaterial or ShaderMaterial)
• Animation & Micro-interactions: Framer Motion (for staggered text entrance, CTAs, and background glow overlays)
• Styling: Tailwind CSS / Vanilla CSS (for layouts, overlays, and absolute positioning)

Reusable AI Developer Prompt

Copy and customize the prompt below to generate variations of this WebGL background effect for other projects:

Generate a high-performance, responsive React (TypeScript) background component that renders a WebGL animation using Three.js and custom GLSL RawShaderMaterials.

### Tech Stack Constraints
- Use React hooks (`useRef`, `useEffect`) and vanilla Three.js (avoid react-three-fiber for raw control).
- Use `RawShaderMaterial` with inline vertex and fragment shader strings to keep it self-contained.
- Use Tailwind CSS or inline styles to position it absolutely behind other content (with `pointer-events: none` and custom `z-index`).

### Design Guidelines & Specifications
1. Geometry: Render a [GEOMETRY_TYPE: e.g., PlaneGeometry (256x256), SphereGeometry, or custom particle grid] using wireframe mode to show a premium grid structure.
2. Motion & Shaders (Vertex Shader): 
   - Feed a `time` uniform into the shader using a requestAnimationFrame loop (multiplied by speed factor).
   - Implement [MOVEMENT_TYPE: e.g., scrolling landscape waves, ripple effects, audio frequency ripples, or kinetic turbulence] using [NOISE_TYPE: e.g., 3D Classic Perlin Noise, Simplex Noise, or Cosine/Sine waves].
   - Add a height envelope that [ENVELOPE_TYPE: e.g., dampens movement on the edges, peaks in the center, or spirals outwardly].
3. Color & Shading (Fragment Shader):
   - Interpolate colors dynamically based on coordinate axes (e.g., center vs. edge distance, or height variation).
   - Base Palette: Transition from [CENTER_COLOR: e.g., brand orange/gold] in the middle to [OUTER_COLOR: e.g., dark crimson or black] towards the edges.
   - Smoothly fade opacity towards the edges using the vertex coordinates (e.g., `(max_limit - length) / fade_distance`) to prevent hard clipping borders.
4. Performance & Cleanups:
   - Ensure the canvas resizes dynamically with `window.innerWidth` and `window.innerHeight`.
   - Dispose of all geometry, materials, and renderer contexts on component unmount to prevent WebGL memory leaks.

Note

Replace [] sections in Motion & Shaders (Vertex Shader) for whatever animation should be doing on hero background.