cfsa-antigravity 1.0.0

package/template/.agent/skill-library/surface/web/frontend-design/templates/wave-hero.tsx

@@ -0,0 +1,875 @@
+/**
+ * Wave Hero Section Template
+ * 
+ * A hero section with animated wave bars using Three.js instanced rendering.
+ * Features bloom post-processing, film grain, and mouse-reactive glow effects.
+ * 
+ * Dependencies:
+ * - three
+ * - gsap
+ */
+
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+import gsap from 'gsap';
+
+// ============================================
+// TYPES
+// ============================================
+export interface WaveHeroProps {
+  className?: string;
+  style?: React.CSSProperties;
+  extendLeftPx?: number;
+  title?: string;
+  subtitle?: string;
+  placeholder?: string;
+  buttonText?: string;
+  onPromptSubmit?: (value: string) => void;
+  children?: React.ReactNode;
+}
+
+// ============================================
+// FILM GRAIN SHADER
+// ============================================
+const FilmGrainShader = {
+  uniforms: {
+    tDiffuse: { value: null as THREE.Texture | null },
+    time: { value: 0 },
+    intensity: { value: 1.1 },
+    grainScale: { value: 0.5 },
+  },
+  vertexShader: `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    #ifdef GL_ES
+      precision highp int;
+      precision mediump float;
+    #else
+      precision mediump float;
+    #endif
+    uniform sampler2D tDiffuse;
+    uniform float time;
+    uniform float intensity;
+    uniform float grainScale;
+    varying vec2 vUv;
+
+    float sparkleNoise(vec2 p) {
+      vec2 jPos = p + vec2(37.0, 17.0) * fract(time * 0.07);
+      vec3 p3 = fract(vec3(jPos.xyx) * vec3(.1031, .1030, .0973) + time * 0.1);
+      p3 += dot(p3, p3.yxz + 19.19);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    void main() {
+      vec4 color = texture2D(tDiffuse, vUv);
+      vec2 pos = gl_FragCoord.xy * 0.5 * grainScale;
+      float noise = sparkleNoise(pos);
+      noise = noise * 2.0 - 1.0;
+      vec3 result = color.rgb + noise * intensity * 0.1;
+      gl_FragColor = vec4(result, color.a);
+    }
+  `,
+};
+
+function createFilmGrainPass(intensity = 0.9, grainScale = 0.3) {
+  const pass = new ShaderPass(FilmGrainShader as any);
+  (pass.uniforms as any).intensity.value = intensity;
+  (pass.uniforms as any).grainScale.value = grainScale;
+  return pass;
+}
+
+// ============================================
+// BAR MATERIAL SHADER
+// ============================================
+function createInstancedMaterial() {
+  const baseCol = new THREE.Color('hsl(220,100%,50%)');
+  const emisCol = new THREE.Color('#1f3dbc');
+
+  return new THREE.ShaderMaterial({
+    defines: { USE_INSTANCING: '' },
+    uniforms: {
+      uMouseClipX: { value: 0 },
+      uHalfW: { value: 0 },
+      uMaxGlowDist: { value: 690 },
+      uGlowFalloff: { value: 0.6 },
+      uSmoothSpeed: { value: 0 },
+      uGainMul: { value: 1 },
+      uBaseY: { value: 0 },
+      w1Gain: { value: 10 },
+      w1Len: { value: 0.5 },
+      w1Phase: { value: 0 },
+      w2Gain: { value: 0 },
+      w2Len: { value: 0.5 },
+      w2Phase: { value: 0 },
+      uFixedTipPx: { value: 10 },
+      uMinBottomWidthPx: { value: 0 },
+      uColor: { value: baseCol },
+      uEmissive: { value: emisCol },
+      uBaseEmissive: { value: 0.05 },
+      uRotationAngle: { value: THREE.MathUtils.degToRad(23.4) },
+    },
+    vertexShader: `
+      attribute float aXPos, aPosNorm, aGroup, aGlow;
+      uniform float uMouseClipX, uHalfW, uMaxGlowDist, uGlowFalloff;
+      uniform float uGainMul, uBaseY;
+      uniform float w1Gain, w1Len, w1Phase;
+      uniform float w2Gain, w2Len, w2Phase;
+      uniform float uRotationAngle;
+      varying float vGlow, vPulse, vHeight;
+      varying vec2 vUv;
+
+      float sineH(float g, float len, float ph, float t){
+        return max(20.0, (sin(ph + t * len) * 0.5 + 0.6) * g * uGainMul);
+      }
+
+      void main(){
+        vUv = uv;
+        float h1 = sineH(w1Gain, w1Len, w1Phase, aPosNorm);
+        float h2 = sineH(w2Gain, w2Len, w2Phase, aPosNorm);
+        vHeight = mix(h1, h2, aGroup);
+
+        vec3 pos = position;
+        pos.x += aXPos;
+        pos.y = 0.0;
+
+        float height = vHeight * uv.y;
+        pos.x += height * tan(uRotationAngle);
+        pos.y += height;
+
+        pos.y += uBaseY;
+
+        vec4 clip = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
+        float dxPx = abs(uMouseClipX - clip.x/clip.w) * uHalfW;
+        float prox = clamp(1.0 - pow(dxPx / uMaxGlowDist, uGlowFalloff), 0.0, 1.0);
+
+        vGlow  = aGlow;
+        vPulse = prox;
+        gl_Position = clip;
+      }
+    `,
+    fragmentShader: `
+      #ifdef GL_ES
+        precision highp int;
+        precision mediump float;
+      #else
+        precision mediump float;
+      #endif
+      uniform vec3 uColor, uEmissive;
+      uniform float uBaseEmissive;
+      uniform float uFixedTipPx, uMinBottomWidthPx;
+      varying float vGlow, vPulse, vHeight;
+      varying vec2 vUv;
+
+      void main(){
+        float tipProp = clamp(uFixedTipPx / vHeight, 0.0, 0.95);
+        float transitionY = 1.0 - tipProp;
+        float xFromCenter = abs(vUv.x - 0.5) * 2.0;
+        float px = fwidth(vUv.x);
+        float allowedWidth;
+
+        if (vUv.y >= transitionY){
+          float topPos = (vUv.y - transitionY) / tipProp;
+          allowedWidth = 1.0 - pow(topPos, 0.9);
+        } else {
+          float bottomPos = vUv.y / transitionY;
+          allowedWidth = max(uMinBottomWidthPx * px * 10.0, pow(bottomPos, 0.5));
+        }
+
+        float alpha = smoothstep(-px, px, allowedWidth - xFromCenter);
+        if (alpha < 0.01) discard;
+
+        float emissiveStrength = uBaseEmissive + vGlow * 0.9 + vPulse * 0.15;
+        vec3 finalColor = uColor + uEmissive * emissiveStrength;
+        gl_FragColor = vec4(finalColor, 0.35 * alpha);
+      }
+    `,
+    side: THREE.FrontSide,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+  });
+}
+
+// ============================================
+// WAVE KEYFRAMES
+// ============================================
+const waveKeyframes1 = [
+  { time: 0, gain: 10, frequency: 0, waveLength: 0.5 },
+  { time: 4, gain: 300, frequency: 1, waveLength: 0.5 },
+  { time: 6, gain: 300, frequency: 4, waveLength: Math.PI * 1.5 },
+  { time: 8, gain: 225, frequency: 4, waveLength: Math.PI * 1.5 },
+  { time: 10, gain: 500, frequency: 1, waveLength: Math.PI * 1.5 },
+  { time: 14, gain: 225, frequency: 3, waveLength: Math.PI * 1.5 },
+  { time: 22, gain: 100, frequency: 6, waveLength: Math.PI * 1.5 },
+  { time: 28, gain: 0, frequency: 0.9, waveLength: 0.5 },
+  { time: 30, gain: 128, frequency: 0.9, waveLength: 0.5 },
+  { time: 32, gain: 190, frequency: 1.42, waveLength: 0.5 },
+  { time: 39, gain: 499, frequency: 4.0, waveLength: Math.PI * 1.5 },
+  { time: 40, gain: 500, frequency: 4.0, waveLength: Math.PI * 1.5 },
+  { time: 42, gain: 400, frequency: 2.82, waveLength: Math.PI * 1.5 },
+  { time: 44, gain: 327, frequency: 2.56, waveLength: Math.PI * 1.5 },
+  { time: 48, gain: 188, frequency: 5.4, waveLength: 0.5 },
+  { time: 52, gain: 32, frequency: 0.1, waveLength: 0.5 },
+  { time: 55, gain: 10, frequency: 0, waveLength: 0.5 },
+];
+
+const waveKeyframes2 = [
+  { time: 0, gain: 0, frequency: 0, waveLength: 0.5 },
+  { time: 9, gain: 0, frequency: 0, waveLength: 0.5 },
+  { time: 10, gain: 400, frequency: 1, waveLength: 0.5 },
+  { time: 13, gain: 300, frequency: 4, waveLength: Math.PI * 1.5 },
+  { time: 24, gain: 96, frequency: 2, waveLength: 0.5 },
+  { time: 28, gain: 0, frequency: 0.9, waveLength: 0.5 },
+  { time: 30, gain: 142, frequency: 0.9, waveLength: 0.5 },
+  { time: 36, gain: 374, frequency: 4.0, waveLength: Math.PI * 1.5 },
+  { time: 38, gain: 375, frequency: 4.0, waveLength: Math.PI * 1.5 },
+  { time: 40, gain: 300, frequency: 2.26, waveLength: Math.PI * 1.5 },
+  { time: 44, gain: 245, frequency: 2.05, waveLength: Math.PI * 1.5 },
+  { time: 48, gain: 141, frequency: 5.12, waveLength: 0.5 },
+  { time: 52, gain: 24, frequency: 0.08, waveLength: 0.5 },
+  { time: 55, gain: 8, frequency: 0, waveLength: 0.5 },
+];
+
+// ============================================
+// TYPING PLACEHOLDER HOOK
+// ============================================
+function useTypingPlaceholder(prompt: string, basePlaceholder: string) {
+  const suggestionsRef = useRef<string[]>([
+    ' fitness app',
+    ' recipe generator',
+    ' marketing landing page',
+    ' travel itinerary planner',
+    ' blog engine',
+    ' customer support chatbot',
+    ' personal finance dashboard',
+  ]);
+  const [animatedPlaceholder, setAnimatedPlaceholder] = useState<string>(basePlaceholder);
+  const typingStateRef = useRef({
+    suggestionIndex: 0,
+    charIndex: 0,
+    deleting: false,
+    running: true,
+  });
+  const timersRef = useRef<number[]>([]);
+
+  useEffect(() => {
+    typingStateRef.current.running = true;
+    const typeSpeed = 70;
+    const deleteSpeed = 40;
+    const pauseAtEnd = 1200;
+    const pauseBetween = 500;
+
+    function schedule(fn: () => void, delay: number) {
+      const id = window.setTimeout(fn, delay);
+      timersRef.current.push(id);
+    }
+
+    function clearTimers() {
+      for (const id of timersRef.current) window.clearTimeout(id);
+      timersRef.current = [];
+    }
+
+    function step() {
+      if (!typingStateRef.current.running) return;
+      if (prompt !== '') {
+        setAnimatedPlaceholder(basePlaceholder);
+        schedule(step, 300);
+        return;
+      }
+
+      const state = typingStateRef.current;
+      const suggestions = suggestionsRef.current;
+      const current = suggestions[state.suggestionIndex % suggestions.length] || '';
+
+      if (!state.deleting) {
+        const nextIndex = state.charIndex + 1;
+        const next = current.slice(0, nextIndex);
+        setAnimatedPlaceholder(basePlaceholder + next);
+        state.charIndex = nextIndex;
+        if (nextIndex >= current.length) {
+          schedule(() => {
+            state.deleting = true;
+            step();
+          }, pauseAtEnd);
+        } else {
+          schedule(step, typeSpeed);
+        }
+      } else {
+        const nextIndex = Math.max(0, state.charIndex - 1);
+        const next = current.slice(0, nextIndex);
+        setAnimatedPlaceholder(basePlaceholder + next);
+        state.charIndex = nextIndex;
+        if (nextIndex <= 0) {
+          state.deleting = false;
+          state.suggestionIndex = (state.suggestionIndex + 1) % suggestions.length;
+          schedule(step, pauseBetween);
+        } else {
+          schedule(step, deleteSpeed);
+        }
+      }
+    }
+
+    clearTimers();
+    schedule(step, 400);
+    return () => {
+      typingStateRef.current.running = false;
+      clearTimers();
+    };
+  }, [prompt, basePlaceholder]);
+
+  return animatedPlaceholder;
+}
+
+// ============================================
+// COMPONENT
+// ============================================
+export function WaveHero({
+  className,
+  style,
+  extendLeftPx = 320,
+  title = 'Build with AI.',
+  subtitle = 'The AI Fullstack Engineer. Build prototypes, apps, and websites',
+  placeholder = 'Describe what you want to create...',
+  buttonText = 'Generate',
+  onPromptSubmit,
+  children,
+}: WaveHeroProps) {
+  const [prompt, setPrompt] = useState('');
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const waveRef = useRef<HTMLDivElement | null>(null);
+  const basePlaceholder = 'Make me a';
+  const animatedPlaceholder = useTypingPlaceholder(prompt, basePlaceholder);
+
+  useEffect(() => {
+    if (!containerRef.current || !waveRef.current) return;
+
+    // Wave state
+    const wave1 = { gain: 10, frequency: 0, waveLength: 0.5, currentAngle: 0 };
+    const wave2 = { gain: 0, frequency: 0, waveLength: 0.5, currentAngle: 0 };
+
+    // Mouse & glow config
+    const mouse = { x: 0, y: 0, active: false };
+    let proxyMouseX = 0,
+      proxyMouseY = 0,
+      proxyInitialized = false;
+
+    const glowConfig = {
+      maxGlowDistance: 690,
+      speedScale: 0.52,
+      fadeSpeed: 4.4,
+      glowFalloff: 0.6,
+      mouseSmoothing: 30.0,
+    };
+
+    const glowDynamics = {
+      accumulation: 1.2,
+      decay: 3.3,
+      max: 40.0,
+      accumEase: 1.5,
+      speedEase: 8.5,
+    };
+
+    // THREE.js setup
+    let DPR_CAP = 2;
+    const mm = gsap.matchMedia();
+    mm.add('(max-resolution: 180dpi)', () => {
+      DPR_CAP = 1.5;
+    });
+    const EFFECT_PR = Math.min(window.devicePixelRatio, DPR_CAP) * 0.5;
+
+    const waveContainer = waveRef.current!;
+    while (waveContainer.firstChild) {
+      waveContainer.removeChild(waveContainer.firstChild);
+    }
+
+    const waveRenderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
+    waveRenderer.setPixelRatio(EFFECT_PR);
+    waveRenderer.toneMapping = THREE.ACESFilmicToneMapping;
+    waveRenderer.toneMappingExposure = 1.0;
+    waveRenderer.autoClear = false;
+    waveContainer.appendChild(waveRenderer.domElement);
+
+    const waveScene = new THREE.Scene();
+    waveScene.fog = null as any;
+    waveScene.add(new THREE.AmbientLight(0xffffff, 0.2));
+
+    let waveCamera: THREE.OrthographicCamera;
+    let waveComposer: EffectComposer;
+    let waveBloomPass: UnrealBloomPass;
+    let grainPass: ShaderPass;
+    let cameraWidth = 0,
+      cameraHeight = 0,
+      waveCameraInitialized = false;
+
+    let setMouseNDC: (v: number) => void,
+      setSmoothSpeed: (v: number) => void,
+      setPhase1: (v: number) => void,
+      setPhase2: (v: number) => void;
+
+    // Bar instancing
+    const MAX_BARS = 256;
+    const FIXED_BAR_WIDTH = 14;
+    const FIXED_BAR_GAP = 10;
+    const EXTEND_LEFT_PX = extendLeftPx;
+
+    let instancedBars: THREE.InstancedMesh | null = null;
+    let currentBarCount = 0;
+    let barMaterial: THREE.ShaderMaterial;
+    let barCenters: Float32Array | null = null;
+
+    function updateGlowDistance() {
+      if (!barMaterial) return;
+      const totalWidth = currentBarCount * (FIXED_BAR_WIDTH + FIXED_BAR_GAP) - FIXED_BAR_GAP;
+      const spanPx = totalWidth * 0.3;
+      glowConfig.maxGlowDistance = spanPx;
+      (barMaterial.uniforms as any).uMaxGlowDist.value = spanPx;
+    }
+
+    function setupQuickSetters() {
+      const u = (instancedBars!.material as THREE.ShaderMaterial).uniforms as any;
+      setMouseNDC = gsap.quickSetter(u.uMouseClipX, 'value') as any;
+      setSmoothSpeed = gsap.quickSetter(u.uSmoothSpeed, 'value') as any;
+      setPhase1 = gsap.quickSetter(u.w1Phase, 'value') as any;
+      setPhase2 = gsap.quickSetter(u.w2Phase, 'value') as any;
+    }
+
+    const MAX_KEYFRAME_GAIN = 500;
+    const SCREEN_COVERAGE = 0.6;
+    function updateGainMultiplier() {
+      if (!barMaterial) return;
+      const targetPx = cameraHeight * SCREEN_COVERAGE;
+      (barMaterial.uniforms as any).uGainMul.value = targetPx / MAX_KEYFRAME_GAIN;
+    }
+
+    let rect = { left: 0, top: 0 };
+    const listeners: Array<() => void> = [];
+
+    function setupPointerTracking() {
+      const el = waveRenderer.domElement;
+      const readCoords = (e: PointerEvent | TouchEvent): { x: number; y: number } => {
+        if ('clientX' in e) return { x: (e as PointerEvent).clientX, y: (e as PointerEvent).clientY };
+        const t = (e as TouchEvent).touches?.[0] || (e as TouchEvent).changedTouches?.[0];
+        return t ? { x: t.clientX, y: t.clientY } : { x: mouse.x, y: mouse.y };
+      };
+      const updatePos = (e: any, active: boolean) => {
+        const { x, y } = readCoords(e);
+        const r = rect;
+        mouse.x = x - r.left;
+        mouse.y = y - r.top;
+        mouse.active = active;
+        if (!proxyInitialized) {
+          proxyMouseX = mouse.x;
+          proxyMouseY = mouse.y;
+          proxyInitialized = true;
+        }
+      };
+      const activate = (e: any) => updatePos(e, true);
+      const move = (e: any) => updatePos(e, true);
+      const deactivate = () => {
+        mouse.active = false;
+      };
+
+      el.addEventListener('pointerdown', activate, { passive: true });
+      el.addEventListener('pointermove', move, { passive: true });
+      window.addEventListener('pointerup', deactivate as any, { passive: true });
+      el.addEventListener('pointerleave', deactivate as any, { passive: true });
+      el.addEventListener('touchstart', activate as any, { passive: true });
+      el.addEventListener('touchmove', move as any, { passive: true });
+      window.addEventListener('touchend', deactivate as any, { passive: true });
+      window.addEventListener('touchcancel', deactivate as any, { passive: true });
+
+      listeners.push(() => {
+        el.removeEventListener('pointerdown', activate as any);
+        el.removeEventListener('pointermove', move as any);
+        window.removeEventListener('pointerup', deactivate as any);
+        el.removeEventListener('pointerleave', deactivate as any);
+        el.removeEventListener('touchstart', activate as any);
+        el.removeEventListener('touchmove', move as any);
+        window.removeEventListener('touchend', deactivate as any);
+        window.removeEventListener('touchcancel', deactivate as any);
+      });
+    }
+
+    let smoothSpeed = 0;
+
+    function accumulateGlow(dt: number) {
+      if (!instancedBars) return;
+      const attr = instancedBars.geometry.getAttribute('aGlow') as THREE.InstancedBufferAttribute;
+      const arr = attr.array as Float32Array;
+
+      const mouseWorldX = proxyMouseX - cameraWidth * 0.5;
+      const mDist = glowConfig.maxGlowDistance;
+      const fall = glowConfig.glowFalloff;
+
+      const decayLerp = 1.0 - Math.exp(-glowDynamics.decay * dt);
+      const addEase = 1.0 - Math.exp(-glowDynamics.accumEase * dt);
+      const vmax = glowDynamics.max;
+
+      for (let i = 0; i < currentBarCount; i++) {
+        const dx = Math.abs(mouseWorldX - (barCenters as Float32Array)[i]);
+        const hit = dx < mDist ? 1.0 - Math.pow(dx / mDist, fall) : 0.0;
+
+        const targetAdd = hit * smoothSpeed;
+        const add = targetAdd * addEase;
+
+        let g = (arr as any)[i] + add - (arr as any)[i] * decayLerp;
+
+        if (g > vmax) g = vmax;
+        (arr as any)[i] = (arr as any)[i + currentBarCount] = g;
+      }
+      (attr as any).needsUpdate = true;
+    }
+
+    function createInstancedBars() {
+      if (instancedBars) {
+        waveScene.remove(instancedBars);
+        instancedBars.geometry.dispose();
+        (instancedBars.material as any).dispose();
+        instancedBars = null;
+      }
+
+      const waveWidth = cameraWidth;
+      const span = waveWidth + EXTEND_LEFT_PX;
+      let barCount = Math.min(MAX_BARS, Math.max(1, Math.floor((span + FIXED_BAR_GAP) / (FIXED_BAR_WIDTH + FIXED_BAR_GAP))));
+      const gap = barCount > 1 ? (span - barCount * FIXED_BAR_WIDTH) / (barCount - 1) : 0;
+      currentBarCount = barCount;
+
+      const startX = -waveWidth / 2 - EXTEND_LEFT_PX;
+      const instCnt = barCount * 2;
+      barCenters = new Float32Array(barCount);
+
+      const aXPos = new Float32Array(instCnt);
+      const aPosNorm = new Float32Array(instCnt);
+      const aGroup = new Float32Array(instCnt);
+      const aGlow = new Float32Array(instCnt).fill(0);
+
+      for (let i = 0; i < barCount; i++) {
+        const x = startX + FIXED_BAR_WIDTH / 2 + i * (FIXED_BAR_WIDTH + gap);
+        (barCenters as Float32Array)[i] = x;
+        const t = barCount > 1 ? i / (barCount - 1) : 0;
+        aXPos[i] = x;
+        aXPos[i + barCount] = x;
+        aPosNorm[i] = t;
+        aPosNorm[i + barCount] = t;
+        aGroup[i] = 0;
+        aGroup[i + barCount] = 1;
+      }
+
+      const geo = new THREE.PlaneGeometry(FIXED_BAR_WIDTH, 1, 1, 1);
+      geo.translate(0, 0.5, 0);
+      geo.setAttribute('aXPos', new THREE.InstancedBufferAttribute(aXPos, 1));
+      geo.setAttribute('aPosNorm', new THREE.InstancedBufferAttribute(aPosNorm, 1));
+      geo.setAttribute('aGroup', new THREE.InstancedBufferAttribute(aGroup, 1));
+      geo.setAttribute('aGlow', new THREE.InstancedBufferAttribute(aGlow, 1).setUsage(THREE.DynamicDrawUsage));
+
+      barMaterial = createInstancedMaterial();
+      instancedBars = new THREE.InstancedMesh(geo, barMaterial, instCnt);
+      instancedBars.frustumCulled = false;
+      waveScene.add(instancedBars);
+
+      setupQuickSetters();
+      updateGlowDistance();
+    }
+
+    function buildKeyframeTweens(target: any, keyframes: Array<any>) {
+      const tl = gsap.timeline();
+      for (let i = 0; i < keyframes.length - 1; i++) {
+        const cur = keyframes[i];
+        const nxt = keyframes[i + 1];
+        const duration = nxt.time - cur.time;
+        tl.to(target, { gain: nxt.gain, frequency: nxt.frequency, waveLength: nxt.waveLength, duration, ease: 'power2.inOut' }, cur.time);
+      }
+      return tl;
+    }
+
+    function initWaveThree() {
+      cameraWidth = waveContainer.clientWidth;
+      cameraHeight = waveContainer.clientHeight;
+      waveCamera = new THREE.OrthographicCamera(-cameraWidth / 2, cameraWidth / 2, cameraHeight / 2, -cameraHeight / 2, -1000, 1000);
+      waveCamera.position.z = 10;
+      waveCamera.lookAt(0, 0, 0);
+
+      waveRenderer.setSize(cameraWidth, cameraHeight);
+      waveComposer = new EffectComposer(waveRenderer);
+      (waveComposer as any).setPixelRatio(EFFECT_PR);
+
+      const waveRenderPass = new RenderPass(waveScene, waveCamera);
+      waveComposer.addPass(waveRenderPass);
+
+      waveBloomPass = new UnrealBloomPass(new THREE.Vector2(cameraWidth, cameraHeight), 1.0, 0.68, 0.0);
+      (waveBloomPass as any).resolution.set(cameraWidth * 0.5, cameraHeight * 0.5);
+      waveComposer.addPass(waveBloomPass);
+
+      grainPass = createFilmGrainPass();
+      waveComposer.addPass(grainPass);
+
+      createInstancedBars();
+      setupPointerTracking();
+      updateGainMultiplier();
+      waveCameraInitialized = true;
+    }
+
+    let pendingW = 0, pendingH = 0, heavyResizeTimer: any = null;
+
+    function onResize(newW: number, newH: number) {
+      if (!waveCameraInitialized) return;
+      pendingW = newW;
+      pendingH = newH;
+
+      cameraWidth = newW;
+      cameraHeight = newH;
+      waveCamera.left = -cameraWidth / 2;
+      waveCamera.right = cameraWidth / 2;
+      waveCamera.top = cameraHeight / 2;
+      waveCamera.bottom = -cameraHeight / 2;
+      waveCamera.updateProjectionMatrix();
+
+      const waveWidth = cameraWidth;
+      const span = waveWidth + EXTEND_LEFT_PX;
+      let barCount = Math.min(MAX_BARS, Math.max(1, Math.floor((span + FIXED_BAR_GAP) / (FIXED_BAR_WIDTH + FIXED_BAR_GAP))));
+      const gap = barCount > 1 ? (span - barCount * FIXED_BAR_WIDTH) / (barCount - 1) : 0;
+
+      if (barCount !== currentBarCount) {
+        currentBarCount = barCount;
+        createInstancedBars();
+      } else {
+        const startX = -waveWidth / 2 - EXTEND_LEFT_PX;
+        const aX = instancedBars!.geometry.getAttribute('aXPos') as THREE.InstancedBufferAttribute;
+        const aT = instancedBars!.geometry.getAttribute('aPosNorm') as THREE.InstancedBufferAttribute;
+
+        for (let i = 0; i < barCount; i++) {
+          const x = startX + FIXED_BAR_WIDTH / 2 + i * (FIXED_BAR_WIDTH + gap);
+          const t = barCount > 1 ? i / (barCount - 1) : 0;
+          (aX.array as any)[i] = (aX.array as any)[i + barCount] = x;
+          (aT.array as any)[i] = (aT.array as any)[i + barCount] = t;
+        }
+        aX.needsUpdate = true;
+        aT.needsUpdate = true;
+      }
+
+      (barMaterial.uniforms as any).uHalfW.value = cameraWidth * 0.5;
+      updateGainMultiplier();
+      updateGlowDistance();
+
+      clearTimeout(heavyResizeTimer);
+      heavyResizeTimer = setTimeout(applyHeavyResize, 10);
+      rect = waveRenderer.domElement.getBoundingClientRect();
+    }
+
+    function applyHeavyResize() {
+      heavyResizeTimer = null;
+      waveRenderer.setPixelRatio(EFFECT_PR);
+      waveRenderer.setSize(pendingW, pendingH);
+      (waveComposer as any).setSize(pendingW, pendingH);
+      (waveBloomPass as any)?.setSize(pendingW, pendingH);
+      (grainPass as any)?.setSize(pendingW, pendingH);
+      (grainPass.uniforms as any).grainScale.value = 0.5;
+    }
+
+    function disposeWaveScene() {
+      gsap.globalTimeline.clear();
+      waveScene.traverse((obj: any) => {
+        if (obj.isMesh) {
+          obj.geometry.dispose();
+          if (Array.isArray(obj.material)) {
+            obj.material.forEach((m: any) => m.dispose());
+          } else {
+            obj.material.dispose();
+          }
+        }
+      });
+      (grainPass as any)?.dispose?.();
+      (waveBloomPass as any)?.dispose?.();
+      (waveComposer as any)?.dispose?.();
+      (waveRenderer as any)?.dispose?.();
+      instancedBars = null;
+    }
+
+    const ticker = () => {
+      if (!waveCameraInitialized || !instancedBars) return;
+      const dt = (gsap.ticker.deltaRatio() as number) * (1 / 60);
+
+      wave1.currentAngle = (wave1.currentAngle + wave1.frequency * dt) % (Math.PI * 2);
+      wave2.currentAngle = (wave2.currentAngle + wave2.frequency * dt) % (Math.PI * 2);
+      setPhase1(wave1.currentAngle);
+      setPhase2(wave2.currentAngle);
+
+      const kMouse = 1.0 - Math.exp(-glowConfig.mouseSmoothing * dt);
+      proxyMouseX += (mouse.x - proxyMouseX) * kMouse;
+      proxyMouseY += (mouse.y - proxyMouseY) * kMouse;
+
+      const dx = mouse.active ? mouse.x - proxyMouseX : 0;
+      const dy = mouse.active ? mouse.y - proxyMouseY : 0;
+      const rawSpeed = Math.hypot(dx, dy * 0.1) * glowConfig.speedScale;
+
+      const kSpeed = 1.0 - Math.exp(-glowDynamics.speedEase * dt);
+      smoothSpeed += (rawSpeed - smoothSpeed) * kSpeed;
+      setSmoothSpeed(smoothSpeed);
+
+      const u = (instancedBars.material as THREE.ShaderMaterial).uniforms as any;
+      u.w1Gain.value = wave1.gain;
+      u.w1Len.value = wave1.waveLength;
+      u.w2Gain.value = wave2.gain;
+      u.w2Len.value = wave2.waveLength;
+
+      const mouseClipX = (proxyMouseX / cameraWidth) * 2 - 1;
+      setMouseNDC(mouseClipX);
+      let baseOffset = 40;
+      if (window.innerWidth < 768) baseOffset = 20;
+      u.uBaseY.value = -cameraHeight * 0.5 + baseOffset;
+
+      (grainPass.uniforms as any).time.value += dt * 0.2;
+
+      accumulateGlow(dt);
+      waveComposer.render();
+    };
+
+    // Init
+    initWaveThree();
+    onResize(waveContainer.clientWidth, waveContainer.clientHeight);
+
+    gsap.to(waveContainer.querySelector('canvas'), { opacity: 1, duration: 1, ease: 'power2.out' });
+
+    const mainTimeline = gsap.timeline({ repeat: -1 });
+    mainTimeline.add(buildKeyframeTweens(wave1, waveKeyframes1), 0);
+    mainTimeline.add(buildKeyframeTweens(wave2, waveKeyframes2), 0);
+    mainTimeline.play(0);
+
+    gsap.ticker.add(ticker);
+
+    const ro = new ResizeObserver((entries) => {
+      for (const e of entries) {
+        if (e.target === waveContainer) {
+          onResize(e.contentRect.width, e.contentRect.height);
+        }
+      }
+    });
+    ro.observe(waveContainer);
+    listeners.push(() => gsap.ticker.remove(ticker));
+    listeners.push(() => ro.disconnect());
+
+    const onVisibility = () => {
+      document.hidden ? gsap.globalTimeline.pause() : gsap.globalTimeline.resume();
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+    listeners.push(() => document.removeEventListener('visibilitychange', onVisibility));
+
+    return () => {
+      listeners.forEach((fn) => fn());
+      try {
+        disposeWaveScene();
+      } catch {}
+      try {
+        const canvas = waveRenderer.domElement;
+        if (canvas && canvas.parentElement === waveContainer) {
+          waveContainer.removeChild(canvas);
+        }
+      } catch {}
+    };
+  }, [extendLeftPx]);
+
+  return (
+    <section ref={containerRef} className={className} style={{ position: 'relative', width: '100%', height: '100vh', ...style }} aria-label="Animated hero">
+      {children}
+      
+      {/* Default Content Overlay */}
+      {!children && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            zIndex: 3,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            padding: '24px',
+          }}
+        >
+          <div className="max-w-3xl w-full text-center" style={{ pointerEvents: 'auto' }}>
+            <h1 className="text-white text-3xl sm:text-5xl font-semibold tracking-tight drop-shadow-[0_1px_8px_rgba(31,61,188,0.25)]">
+              {title}
+            </h1>
+            <p className="text-gray-300/90 mt-3 sm:mt-4 text-sm sm:text-base">{subtitle}</p>
+            <form
+              className="mt-6 sm:mt-8 flex items-center justify-center"
+              onSubmit={(e) => {
+                e.preventDefault();
+                onPromptSubmit?.(prompt);
+              }}
+            >
+              <div className="relative w-full sm:w-[720px]">
+                <div className="relative rounded-2xl p-[2px] shadow-[0_1px_2px_0_rgba(0,0,0,0.06)] bg-gradient-to-br from-white/10 via-white/5 to-black/20">
+                  <textarea
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    placeholder={animatedPlaceholder}
+                    rows={5}
+                    className="w-full h-32 sm:h-36 resize-none rounded-2xl bg-[rgba(15,15,20,0.55)] border border-white/10 text-white placeholder:text-white/40 outline-none focus:ring-2 focus:ring-[#1f3dbc]/40 focus:border-[#1f3dbc]/40 backdrop-blur-md px-4 py-4 pr-16"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  aria-label={buttonText}
+                  className="absolute right-3 bottom-3 inline-flex items-center justify-center w-10 h-10 rounded-xl bg-[#f0f2ff] text-black hover:bg-white transition-colors"
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5">
+                    <path d="M7 17L17 7" />
+                    <path d="M7 7h10v10" />
+                  </svg>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Wave Canvas */}
+      <div ref={waveRef} id="waveCanvas" style={{ position: 'absolute', inset: 0, zIndex: 1, opacity: 0.8 }} />
+    </section>
+  );
+}
+
+// ============================================
+// USAGE EXAMPLE
+// ============================================
+/*
+import { WaveHero } from './wave-hero';
+
+function LandingPage() {
+  return (
+    <WaveHero
+      title="Build with AI."
+      subtitle="The AI Fullstack Engineer. Build prototypes, apps, and websites"
+      placeholder="Make me a"
+      buttonText="Generate"
+      onPromptSubmit={(value) => console.log('Prompt:', value)}
+    />
+  );
+}
+
+// With custom content overlay
+function CustomHero() {
+  return (
+    <WaveHero>
+      <div className="absolute inset-0 z-10 flex items-center justify-center">
+        <h1 className="text-6xl text-white">Custom Content</h1>
+      </div>
+    </WaveHero>
+  );
+}
+*/
+
+export default WaveHero;
+