Neon Veil Infinity Overdrive

import React, { useRef, useEffect, useMemo, useState, useCallback } from 'react'; import * as THREE from 'three'; import { Canvas, useFrame, useThree } from '@react-three/fiber'; import { EffectComposer, Bloom, ChromaticAberration, Glitch, Noise, Vignette, DepthOfField, MotionBlur } from '@react-three/postprocessing'; import { BlendFunction } from 'postprocessing'; import { UnrealBloomPass } from 'three-stdlib'; // ====== SHADERS ====== const particleVertexShader = ` attribute float size; attribute vec3 customColor; attribute float alpha; varying vec3 vColor; varying float vAlpha; void main() { vColor = customColor; vAlpha = alpha; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `; const particleFragmentShader = ` varying vec3 vColor; varying float vAlpha; void main() { float dist = length(gl_PointCoord - vec2(0.5)); if (dist > 0.5) discard; float alpha = smoothstep(0.5, 0.0, dist) * vAlpha; gl_FragColor = vec4(vColor, alpha); } `; const godRayShader = ` uniform float time; uniform vec3 color; varying vec2 vUv; void main() { vec2 uv = vUv; float ray = sin(uv.x * 20.0 + time * 2.0) * sin(uv.y * 15.0 + time * 1.5); ray = pow(abs(ray), 3.0); float fade = smoothstep(0.0, 0.5, uv.y); gl_FragColor = vec4(color * ray * fade, ray * fade * 0.5); } `; // ====== PARTICLE SYSTEM ====== class ParticleSystem extends THREE.Points { constructor(count, color1, color2, spread) { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); const sizes = new Float32Array(count); const alphas = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * spread; positions[i * 3 + 1] = (Math.random() - 0.5) * spread * 0.5; positions[i * 3 + 2] = (Math.random() - 0.5) * spread; const c = Math.random() > 0.5 ? color1 : color2; colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b; sizes[i] = Math.random() * 3 + 1; alphas[i] = Math.random() * 0.8 + 0.2; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('customColor', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); geometry.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1)); const material = new THREE.ShaderMaterial({ vertexShader: particleVertexShader, fragmentShader: particleFragmentShader, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); super(geometry, material); } update(time, speed) { const positions = this.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i + 2] += speed * 0.1; if (positions[i + 2] > 50) positions[i + 2] = -50; positions[i + 1] += Math.sin(time + positions[i]) * 0.01; } this.geometry.attributes.position.needsUpdate = true; } } // ====== RAIN SYSTEM ====== function Rain({ count = 5000 }) { const points = useRef(); useEffect(() => { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const velocities = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = Math.random() * 50; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; velocities[i] = Math.random() * 0.5 + 0.3; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ color: 0x88ccff, size: 0.1, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending }); points.current = new THREE.Points(geometry, material); points.current.userData.velocities = velocities; }, [count]); useFrame(() => { if (!points.current) return; const positions = points.current.geometry.attributes.position.array; const velocities = points.current.userData.velocities; for (let i = 0; i < positions.length; i += 3) { positions[i + 1] -= velocities[i / 3]; if (positions[i + 1] < -5) positions[i + 1] = 50; } points.current.geometry.attributes.position.needsUpdate = true; }); return <primitive object={points.current} />; } // ====== HOLOGRAM ====== function Hologram({ text, position, color }) { const group = useRef(); useEffect(() => { const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 256; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba(0,0,0,0)'; ctx.fillRect(0, 0, 512, 256); ctx.font = 'bold 48px Arial'; ctx.fillStyle = color; ctx.textAlign = 'center'; ctx.fillText(text, 256, 128); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 10), material); group.current.add(mesh); }, [text, color]); useFrame(({ clock }) => { if (!group.current) return; group.current.position.y += Math.sin(clock.getElapsedTime() * 2) * 0.01; group.current.rotation.y = Math.sin(clock.getElapsedTime() * 0.5) * 0.1; }); return <group ref={group} position={position} />; } // ====== GOD RAYS ====== function GodRays({ count = 20 }) { const group = useRef(); useEffect(() => { for (let i = 0; i < count; i++) { const geometry = new THREE.PlaneGeometry(0.5, 30); const material = new THREE.ShaderMaterial({ vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: godRayShader, uniforms: { time: { value: Math.random() * 10 }, color: { value: new THREE.Color(0x00ffff) } }, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set((Math.random() - 0.5) * 40, 15, (Math.random() - 0.5) * 40); mesh.rotation.z = Math.random() * Math.PI; group.current.add(mesh); } }, [count]); useFrame(({ clock }) => { if (!group.current) return; group.current.children.forEach((child, i) => { child.material.uniforms.time.value = clock.getElapsedTime() + i; }); }); return <group ref={group} />; } // ====== MIRROR FLOOR ====== function MirrorFloor() { const mesh = useRef(); useEffect(() => { const geometry = new THREE.PlaneGeometry(100, 100); const material = new THREE.MeshStandardMaterial({ color: 0x111122, metalness: 1.0, roughness: 0.1, envMapIntensity: 2.0 }); mesh.current = new THREE.Mesh(geometry, material); mesh.current.rotation.x = -Math.PI / 2; mesh.current.position.y = -2; }, []); return <primitive object={mesh.current} />; } // ====== STAGE 1: NEON VEIL DISTRICT ====== function NeonVeilDistrict() { const group = useRef(); useEffect(() => { // Buildings for (let i = 0; i < 50; i++) { const height = Math.random() * 20 + 5; const geometry = new THREE.BoxGeometry(2, height, 2); const material = new THREE.MeshStandardMaterial({ color: 0x111133, emissive: new THREE.Color(0x000033), metalness: 0.8, roughness: 0.2 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set( (Math.random() - 0.5) * 60, height / 2 - 2, (Math.random() - 0.5) * 60 ); // Add emissive windows const windowMat = new THREE.MeshBasicMaterial({ color: new THREE.Color().setHSL(Math.random(), 1, 0.5), transparent: true, opacity: 0.8 }); const windowMesh = new THREE.Mesh( new THREE.PlaneGeometry(1.5, 1.5), windowMat ); windowMesh.position.set(0, Math.random() * height, 1.01); mesh.add(windowMesh); group.current.add(mesh); } }, []); return ( <group ref={group}> <Rain /> <MirrorFloor /> <Hologram text="NEON VEIL" position={[0, 15, -20]} color="#ff00ff" /> <Hologram text="DISTRICT" position={[10, 12, -15]} color="#00ffff" /> <pointLight position={[0, 10, 0]} intensity={2} color="#ff00ff" /> <pointLight position={[20, 5, -10]} intensity={1.5} color="#00ffff" /> <pointLight position={[-20, 8, -5]} intensity={1.5} color="#ffff00" /> </group> ); } // ====== STAGE 2: AETHER SPIRE ====== function AetherSpire() { const group = useRef(); useEffect(() => { // Floating structures for (let i = 0; i < 30; i++) { const geometry = new THREE.OctahedronGeometry(Math.random() * 3 + 1); const material = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: new THREE.Color().setHSL(Math.random(), 1, 0.5), emissiveIntensity: 0.5, metalness: 0.9, roughness: 0.1, transparent: true, opacity: 0.8 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set( (Math.random() - 0.5) * 40, Math.random() * 20 + 5, (Math.random() - 0.5) * 40 ); mesh.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0); group.current.add(mesh); } }, []); return ( <group ref={group}> <GodRays count={30} /> <pointLight position={[0, 20, 0]} intensity={3} color="#ffffff" /> <pointLight position={[10, 10, 10]} intensity={2} color="#00ffff" /> <pointLight position={[-10, 15, -10]} intensity={2} color="#ff00ff" /> </group> ); } // ====== STAGE 3: ECLIPSE NEXUS ====== function EclipseNexus() { const group = useRef(); const particles = useRef(); useEffect(() => { // Data streams for (let i = 0; i < 20; i++) { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(100 * 3); for (let j = 0; j < 100; j++) { positions[j * 3] = (Math.random() - 0.5) * 2; positions[j * 3 + 1] = j * 0.5; positions[j * 3 + 2] = (Math.random() - 0.5) * 2; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.LineBasicMaterial({ color: new THREE.Color().setHSL(Math.random(), 1, 0.5), transparent: true, opacity: 0.8 }); const line = new THREE.Line(geometry, material); line.position.set( (Math.random() - 0.5) * 30, -10, (Math.random() - 0.5) * 30 ); group.current.add(line); } // Aurora const auroraGeo = new THREE.PlaneGeometry(60, 30); const auroraMat = new THREE.ShaderMaterial({ vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; varying vec2 vUv; void main() { vec3 color1 = vec3(0.0, 1.0, 0.5); vec3 color2 = vec3(0.5, 0.0, 1.0); float wave = sin(vUv.x * 10.0 + time) * sin(vUv.y * 5.0 + time * 0.5); vec3 color = mix(color1, color2, wave * 0.5 + 0.5); float alpha = wave * 0.3; gl_FragColor = vec4(color, alpha); } `, uniforms: { time: { value: 0 } }, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide }); const aurora = new THREE.Mesh(auroraGeo, auroraMat); aurora.position.set(0, 25, -20); aurora.rotation.x = Math.PI / 4; group.current.add(aurora); // Particle system particles.current = new ParticleSystem(2000, new THREE.Color(0xff00ff), new THREE.Color(0x00ffff), 40 ); group.current.add(particles.current); }, []); useFrame(({ clock }) => { if (!group.current) return; const time = clock.getElapsedTime(); group.current.children.forEach((child) => { if (child.isLine) { child.position.y += 0.1; if (child.position.y > 20) child.position.y = -10; } if (child.material && child.material.uniforms && child.material.uniforms.time) { child.material.uniforms.time.value = time; } }); if (particles.current) { particles.current.update(time, 0.5); } }); return ( <group ref={group}> <pointLight position={[0, 10, 0]} intensity={3} color="#ff00ff" /> <pointLight position={[15, 5, 10]} intensity={2} color="#00ffff" /> <pointLight position={[-15, 8, -10]} intensity={2} color="#ffff00" /> </group> ); } // ====== PLAYER ====== function Player({ onScore, onCombo }) { const mesh = useRef(); const velocity = useRef(0); const position = useRef(new THREE.Vector3(0, 0, 0)); const score = useRef(0); const combo = useRef(0); const lastTime = useRef(0); const handleKeyDown = useCallback((e) => { if (e.key === 'ArrowUp' || e.key === 'w') { velocity.current = 0.5; } if (e.key === 'ArrowDown' || e.key === 's') { velocity.current = -0.5; } if (e.key === 'ArrowLeft' || e.key === 'a') { position.current.x -= 0.5; } if (e.key === 'ArrowRight' || e.key === 'd') { position.current.x += 0.5; } }, []); useEffect(() => { window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [handleKeyDown]); useFrame(({ clock }) => { if (!mesh.current) return; const delta = clock.getDelta(); const time = clock.getElapsedTime(); // Physics velocity.current *= 0.95; position.current.y += velocity.current * delta; position.current.y = Math.max(-2, Math.min(5, position.current.y)); mesh.current.position.copy(position.current); mesh.current.rotation.x = Math.sin(time * 2) * 0.1; mesh.current.rotation.z = Math.sin(time * 3) * 0.1; // Score score.current += delta * 10; if (score.current - lastTime.current > 100) { combo.current += 1; lastTime.current = score.current; onCombo(combo.current); } onScore(Math.floor(score.current)); }); return ( <mesh ref={mesh} position={[0, 0, 0]}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color={0x00ffff} emissive={0x00ffff} emissiveIntensity={2} metalness={0.8} roughness={0.2} /> </mesh> ); } // ====== STAGE MANAGER ====== function StageManager({ stage, onStageChange }) { const group = useRef(); useEffect(() => { if (!group.current) return; // Clear children while (group.current.children.length > 0) { group.current.remove(group.current.children[0]); } // Add stage let stageComponent; switch (stage) { case 0: stageComponent = <NeonVeilDistrict />; break; case 1: stageComponent = <AetherSpire />; break; case 2: stageComponent = <EclipseNexus />; break; default: stageComponent = <NeonVeilDistrict />; } // We'll use a simple approach - just add the stage elements // For simplicity, we'll just change the background color and add elements const scene = group.current; // Add stage-specific elements if (stage === 0) { // Rain const rain = new THREE.Points( new THREE.BufferGeometry(), new THREE.PointsMaterial({ color: 0x88ccff, size: 0.1, transparent: true, opacity: 0.6 }) ); const positions = new Float32Array(5000 * 3); for (let i = 0; i < 5000; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = Math.random() * 50; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; } rain.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); scene.add(rain); } else if (stage === 1) { // God rays for (let i = 0; i < 20; i++) { const geometry = new THREE.PlaneGeometry(0.5, 30); const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set((Math.random() - 0.5) * 40, 15, (Math.random() - 0.5) * 40); mesh.rotation.z = Math.random() * Math.PI; scene.add(mesh); } } else if (stage === 2) { // Aurora const geometry = new THREE.PlaneGeometry(60, 30); const material = new THREE.MeshBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 25, -20); mesh.rotation.x = Math.PI / 4; scene.add(mesh); } // Trigger stage change onStageChange(stage); }, [stage]); return <group ref={group} />; } // ====== UI OVERLAY ====== function UIOverlay({ score, combo, stage, speed }) { return ( <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', fontFamily: 'monospace', color: '#00ffff', textShadow: '0 0 10px #00ffff, 0 0 20px #00ffff', zIndex: 10 }}> <div style={{ position: 'absolute', top: '20px', left: '20px', fontSize: '24px', fontWeight: 'bold' }}> NEON VEIL : INFINITY OVERDRIVE </div> <div style={{ position: 'absolute', top: '60px', left: '20px', fontSize: '18px' }}> SCORE: {score} </div> <div style={{ position: 'absolute', top: '90px', left: '20px', fontSize: '14px', color: combo > 0 ? '#ff00ff' : '#00ffff' }}> COMBO: x{combo} </div> <div style={{ position: 'absolute', bottom: '20px', left: '20px', fontSize: '14px', opacity: 0.7 }}> STAGE: {stage === 0 ? 'NEON VEIL DISTRICT' : stage === 1 ? 'AETHER SPIRE' : 'ECLIPSE NEXUS'} </div> <div style={{ position: 'absolute', bottom: '20px', right: '20px', fontSize: '14px', opacity: 0.7 }}> SPEED: {speed.toFixed(1)}x </div> <div style={{ position: 'absolute', bottom: '50px', left: '50%', transform: 'translateX(-50%)', fontSize: '12px', opacity: 0.5 }}> USE ARROW KEYS OR WASD TO MOVE </div> </div> ); } // ====== MAIN APP ====== function App() { const [score, setScore] = useState(0); const [combo, setCombo] = useState(0); const [stage, setStage] = useState(0); const [speed, setSpeed] = useState(1); const [transitioning, setTransitioning] = useState(false); const handleScore = useCallback((s) => { setScore(s); setSpeed(1 + s / 1000); // Stage transitions if (s > 1000 && stage === 0) { setStage(1); setTransitioning(true); setTimeout(() => setTransitioning(false), 1000); } else if (s > 2000 && stage === 1) { setStage(2); setTransitioning(true); setTimeout(() => setTransitioning(false), 1000); } }, [stage]); const handleCombo = useCallback((c) => { setCombo(c); }, []); return ( <div style={{ width: '100vw', height: '100vh', position: 'relative', background: '#000' }}> <Canvas camera={{ position: [0, 5, 15], fov: 75 }} gl={{ antialias: true, powerPreference: 'high-performance' }} > <color attach="background" args={['#000011']} /> <fog attach="fog" args={['#000011', 20, 80]} /> <ambientLight intensity={0.2} /> <StageManager stage={stage} onStageChange={setStage} /> <Player onScore={handleScore} onCombo={handleCombo} /> <EffectComposer> <Bloom intensity={2.5} luminanceThreshold={0.2} luminanceSmoothing={0.9} mipmapBlur radius={0.8} /> <ChromaticAberration blendFunction={BlendFunction.NORMAL} offset={[0.002, 0.002]} /> <Glitch delay={[1.5, 3.5]} duration={[0.1, 0.3]} strength={[0.3, 1.0]} mode={undefined} active={!transitioning} ratio={0.85} /> <Noise opacity={0.02} /> <Vignette eskil={false} offset={0.1} darkness={0.9} /> <DepthOfField focusDistance={0.01} focalLength={0.1} bokehScale={3} height={480} /> <MotionBlur blendFunction={BlendFunction.NORMAL} strength={0.5} /> </EffectComposer> </Canvas> <UIOverlay score={score} combo={combo} stage={stage} speed={speed} /> {transitioning && ( <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', animation: 'flash 1s ease-out', zIndex: 20, pointerEvents: 'none' }} /> )} <style>{` @keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } } `}</style> </div> ); } export default App;