Neon Véu Infinito Overdrive

import * as THREE from 'three'; import React, { useRef, useEffect, useMemo, useState } from 'react'; 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'; // ------------------------------------------------------------ // Shader Materials (Custom) // ------------------------------------------------------------ const hologramShader = { uniforms: { uTime: { value: 0 }, uColor1: { value: new THREE.Color(0x00ffff) }, uColor2: { value: new THREE.Color(0xff00ff) }, uIntensity: { value: 1.0 } }, vertexShader: ` varying vec2 vUv; varying vec3 vNormal; void main() { vUv = uv; vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float uTime; uniform vec3 uColor1; uniform vec3 uColor2; uniform float uIntensity; varying vec2 vUv; varying vec3 vNormal; void main() { float wave = sin(vUv.x * 20.0 + uTime * 3.0) * 0.5 + 0.5; float wave2 = cos(vUv.y * 15.0 + uTime * 2.0) * 0.5 + 0.5; vec3 color = mix(uColor1, uColor2, wave * wave2); float fresnel = pow(1.0 - abs(dot(vNormal, vec3(0.0, 0.0, 1.0))), 2.0); color += fresnel * uColor1 * 2.0; gl_FragColor = vec4(color * uIntensity, 1.0); } ` }; const particleShader = { uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(0x00ffff) }, uSize: { value: 30.0 } }, vertexShader: ` uniform float uTime; uniform float uSize; attribute float aScale; attribute vec3 aRandom; varying float vAlpha; varying vec3 vColor; void main() { vec3 pos = position; pos.x += sin(uTime * 2.0 + aRandom.x * 10.0) * 0.5; pos.y += cos(uTime * 1.5 + aRandom.y * 10.0) * 0.5; pos.z += sin(uTime * 3.0 + aRandom.z * 10.0) * 0.5; vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0); gl_PointSize = uSize * aScale * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; vAlpha = sin(uTime * 5.0 + aRandom.x * 20.0) * 0.5 + 0.5; vColor = mix(vec3(0.0, 1.0, 1.0), vec3(1.0, 0.0, 1.0), aRandom.y); } `, fragmentShader: ` varying float vAlpha; varying vec3 vColor; 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); } ` }; // ------------------------------------------------------------ // Particle System Component // ------------------------------------------------------------ function ParticleSystem({ count = 2000, color = 0x00ffff }) { const points = useRef(); const { positions, scales, randoms } = useMemo(() => { const positions = new Float32Array(count * 3); const scales = new Float32Array(count); const randoms = new Float32Array(count * 3); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = (Math.random() - 0.5) * 100; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; scales[i] = Math.random() * 2 + 0.5; randoms[i * 3] = Math.random(); randoms[i * 3 + 1] = Math.random(); randoms[i * 3 + 2] = Math.random(); } return { positions, scales, randoms }; }, [count]); const material = useMemo(() => { const mat = new THREE.ShaderMaterial({ ...particleShader, uniforms: { uTime: { value: 0 }, uColor: { value: new THREE.Color(color) }, uSize: { value: 30.0 } }, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); return mat; }, [color]); useFrame((state) => { if (points.current) { points.current.material.uniforms.uTime.value = state.clock.elapsedTime; points.current.rotation.y = state.clock.elapsedTime * 0.05; } }); return ( <points ref={points} material={material}> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[positions, 3]} /> <bufferAttribute attach="attributes-aScale" args={[scales, 1]} /> <bufferAttribute attach="attributes-aRandom" args={[randoms, 3]} /> </bufferGeometry> </points> ); } // ------------------------------------------------------------ // Hologram Building Component // ------------------------------------------------------------ function HologramBuilding({ position, scale = 1, color1 = 0x00ffff, color2 = 0xff00ff }) { const mesh = useRef(); const material = useMemo(() => { const mat = new THREE.ShaderMaterial({ ...hologramShader, uniforms: { uTime: { value: 0 }, uColor1: { value: new THREE.Color(color1) }, uColor2: { value: new THREE.Color(color2) }, uIntensity: { value: 1.0 } }, transparent: true, side: THREE.DoubleSide }); return mat; }, [color1, color2]); useFrame((state) => { if (mesh.current) { mesh.current.material.uniforms.uTime.value = state.clock.elapsedTime; } }); return ( <mesh ref={mesh} position={position} scale={scale} material={material}> <boxGeometry args={[5, 20, 5]} /> </mesh> ); } // ------------------------------------------------------------ // Rain System // ------------------------------------------------------------ function RainSystem({ count = 5000 }) { const points = useRef(); const { positions, velocities } = useMemo(() => { 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) * 200; positions[i * 3 + 1] = Math.random() * 100; positions[i * 3 + 2] = (Math.random() - 0.5) * 200; velocities[i] = Math.random() * 2 + 1; } return { positions, velocities }; }, [count]); const material = useMemo(() => { return new THREE.PointsMaterial({ color: 0x4488ff, size: 0.3, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending }); }, []); useFrame((state) => { if (points.current) { const pos = points.current.geometry.attributes.position; const time = state.clock.elapsedTime; for (let i = 0; i < count; i++) { pos.array[i * 3 + 1] -= velocities[i] * 0.5; if (pos.array[i * 3 + 1] < -10) { pos.array[i * 3 + 1] = 100; } } pos.needsUpdate = true; } }); return ( <points ref={points} material={material}> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[positions, 3]} /> </bufferGeometry> </points> ); } // ------------------------------------------------------------ // Stage Components // ------------------------------------------------------------ function NeonVeilDistrict() { const group = useRef(); const buildings = useMemo(() => { const arr = []; for (let i = 0; i < 30; i++) { arr.push({ position: [(Math.random() - 0.5) * 100, 0, (Math.random() - 0.5) * 100], scale: Math.random() * 2 + 0.5, color1: Math.random() > 0.5 ? 0x00ffff : 0xff00ff, color2: Math.random() > 0.5 ? 0xff00ff : 0xffff00 }); } return arr; }, []); useFrame((state) => { if (group.current) { group.current.position.z += 0.5; if (group.current.position.z > 50) { group.current.position.z = -50; } } }); return ( <group ref={group}> <RainSystem /> <ParticleSystem count={3000} color={0x00ffff} /> {buildings.map((b, i) => ( <HologramBuilding key={i} position={b.position} scale={b.scale} color1={b.color1} color2={b.color2} /> ))} {/* Ground with mirror effect */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -5, 0]}> <planeGeometry args={[200, 200]} /> <meshStandardMaterial color={0x111122} metalness={0.9} roughness={0.1} envMapIntensity={2} /> </mesh> </group> ); } function AetherSpire() { const group = useRef(); const platforms = useMemo(() => { const arr = []; for (let i = 0; i < 20; i++) { arr.push({ position: [(Math.random() - 0.5) * 60, Math.random() * 40 - 20, (Math.random() - 0.5) * 60], scale: Math.random() * 3 + 1, rotation: Math.random() * Math.PI }); } return arr; }, []); useFrame((state) => { if (group.current) { group.current.rotation.y = state.clock.elapsedTime * 0.02; group.current.position.y = Math.sin(state.clock.elapsedTime * 0.5) * 2; } }); return ( <group ref={group}> <ParticleSystem count={4000} color={0xffff00} /> {platforms.map((p, i) => ( <mesh key={i} position={p.position} scale={p.scale} rotation={[0, p.rotation, 0]}> <torusKnotGeometry args={[2, 0.5, 100, 16]} /> <meshStandardMaterial color={0x00ffff} emissive={0x00ffff} emissiveIntensity={2} metalness={0.8} roughness={0.2} /> </mesh> ))} {/* Cloud layer */} <mesh position={[0, -30, 0]}> <sphereGeometry args={[80, 32, 32]} /> <meshStandardMaterial color={0xffffff} transparent opacity={0.3} emissive={0xffffff} emissiveIntensity={0.5} /> </mesh> </group> ); } function EclipseNexus() { const group = useRef(); const dataStreams = useMemo(() => { const arr = []; for (let i = 0; i < 15; i++) { arr.push({ position: [(Math.random() - 0.5) * 80, (Math.random() - 0.5) * 80, (Math.random() - 0.5) * 80], color: Math.random() > 0.5 ? 0xff00ff : 0x00ffff }); } return arr; }, []); useFrame((state) => { if (group.current) { group.current.rotation.x = state.clock.elapsedTime * 0.1; group.current.rotation.y = state.clock.elapsedTime * 0.15; } }); return ( <group ref={group}> <ParticleSystem count={5000} color={0xff00ff} /> {dataStreams.map((d, i) => ( <mesh key={i} position={d.position}> <boxGeometry args={[0.5, 20, 0.5]} /> <meshStandardMaterial color={d.color} emissive={d.color} emissiveIntensity={3} transparent opacity={0.8} /> </mesh> ))} {/* Aurora effect */} <mesh position={[0, 40, 0]}> <planeGeometry args={[100, 50]} /> <meshStandardMaterial color={0x00ff88} emissive={0x00ff88} emissiveIntensity={2} transparent opacity={0.3} side={THREE.DoubleSide} /> </mesh> </group> ); } // ------------------------------------------------------------ // Main Runner Component // ------------------------------------------------------------ function Runner() { const mesh = useRef(); const [position, setPosition] = useState([0, 0, 0]); const [speed, setSpeed] = useState(0.5); const [combo, setCombo] = useState(0); useFrame((state) => { if (mesh.current) { // Auto-run forward mesh.current.position.z -= speed; // Camera shake if (combo > 5) { state.camera.position.x += Math.sin(state.clock.elapsedTime * 20) * 0.1; state.camera.position.y += Math.cos(state.clock.elapsedTime * 25) * 0.1; } // Speed up over time setSpeed(prev => Math.min(prev + 0.001, 3)); } }); const handleKeyDown = (e) => { if (e.key === 'ArrowLeft') { setPosition(prev => [Math.max(prev[0] - 2, -10), prev[1], prev[2]]); setCombo(prev => prev + 1); } if (e.key === 'ArrowRight') { setPosition(prev => [Math.min(prev[0] + 2, 10), prev[1], prev[2]]); setCombo(prev => prev + 1); } if (e.key === 'ArrowUp') { setPosition(prev => [prev[0], Math.min(prev[1] + 2, 10), prev[2]]); setCombo(prev => prev + 1); } if (e.key === 'ArrowDown') { setPosition(prev => [prev[0], Math.max(prev[1] - 2, -10), prev[2]]); setCombo(prev => prev + 1); } }; useEffect(() => { window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, []); return ( <mesh ref={mesh} position={position}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color={0xffffff} emissive={0x00ffff} emissiveIntensity={3} metalness={0.9} roughness={0.1} /> </mesh> ); } // ------------------------------------------------------------ // Stage Manager // ------------------------------------------------------------ function StageManager() { const [stage, setStage] = useState(0); const [transitioning, setTransitioning] = useState(false); useEffect(() => { const interval = setInterval(() => { setTransitioning(true); setTimeout(() => { setStage(prev => (prev + 1) % 3); setTransitioning(false); }, 1000); }, 15000); return () => clearInterval(interval); }, []); return ( <group> {stage === 0 && <NeonVeilDistrict />} {stage === 1 && <AetherSpire />} {stage === 2 && <EclipseNexus />} <Runner /> {transitioning && ( <mesh position={[0, 0, -50]}> <planeGeometry args={[200, 200]} /> <meshBasicMaterial color={0xffffff} transparent opacity={0.8} /> </mesh> )} </group> ); } // ------------------------------------------------------------ // UI Overlay // ------------------------------------------------------------ function UIOverlay() { const [score, setScore] = useState(0); const [combo, setCombo] = useState(0); useEffect(() => { const interval = setInterval(() => { setScore(prev => prev + 100); setCombo(prev => Math.min(prev + 1, 10)); }, 1000); return () => clearInterval(interval); }, []); 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, 0 0 40px #00ffff', zIndex: 10 }}> <div style={{ position: 'absolute', top: '20px', left: '50%', transform: 'translateX(-50%)', fontSize: '48px', fontWeight: 'bold', letterSpacing: '5px', animation: 'pulse 2s infinite' }}> NEON VEIL : INFINITY OVERDRIVE </div> <div style={{ position: 'absolute', top: '100px', left: '50%', transform: 'translateX(-50%)', fontSize: '24px', opacity: 0.8 }}> SCORE: {score.toLocaleString()} </div> <div style={{ position: 'absolute', top: '140px', left: '50%', transform: 'translateX(-50%)', fontSize: '20px', color: combo > 5 ? '#ff00ff' : '#00ffff' }}> COMBO: x{combo} </div> <div style={{ position: 'absolute', bottom: '40px', left: '50%', transform: 'translateX(-50%)', fontSize: '16px', opacity: 0.6 }}> USE ARROW KEYS OR SWIPE TO MOVE </div> <style>{` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } `}</style> </div> ); } // ------------------------------------------------------------ // Main App Component // ------------------------------------------------------------ export default function App() { return ( <div style={{ width: '100vw', height: '100vh', position: 'relative', background: '#000' }}> <Canvas camera={{ position: [0, 5, 20], fov: 75 }} gl={{ antialias: true, powerPreference: 'high-performance' }} > <color attach="background" args={['#000011']} /> <StageManager /> <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={GlitchMode.SPORADIC} /> <Noise premultiply blendFunction={BlendFunction.ADD} opacity={0.05} /> <Vignette eskil={false} offset={0.1} darkness={0.9} /> <DepthOfField focusDistance={0.01} focalLength={0.02} bokehScale={2} /> <MotionBlur opacity={0.5} strength={0.3} /> </EffectComposer> </Canvas> <UIOverlay /> </div> ); }