diff --git a/src/components/AtomGlitch.tsx b/src/components/AtomGlitch.tsx index ea96851..9dbfbcf 100644 --- a/src/components/AtomGlitch.tsx +++ b/src/components/AtomGlitch.tsx @@ -232,6 +232,75 @@ function Nucleus() { ); } +/* ---------- ER logo (PNG) orbiting close to nucleus ---------- */ +function LogoOrbit({ tilt, speed, radius, color }: { + tilt: number[]; speed: number; radius: number; color: string; +}) { + const ref = useRef(null); + const planeRef = useRef(null); + const [texture, setTexture] = useState(null); + const phase = useMemo(() => Math.random() * Math.PI * 2, []); + const eccentricity = 0.35; + const threeColor = useMemo(() => new THREE.Color(color), [color]); + + useEffect(() => { + new THREE.TextureLoader().load('/assets/brand/logo-mark.png', (tex) => { + tex.minFilter = THREE.LinearFilter; + tex.magFilter = THREE.LinearFilter; + setTexture(tex); + }); + }, []); + + useFrame(({ clock, camera }) => { + if (!ref.current || !planeRef.current) return; + const t = clock.getElapsedTime() * speed + phase; + + ref.current.position.set( + Math.cos(t) * radius, + Math.sin(t) * radius * eccentricity, + 0, + ); + + // Billboard — always face camera + planeRef.current.quaternion.copy(camera.quaternion); + }); + + if (!texture) return null; + + return ( + + + + {/* Logo PNG on a plane */} + + + + + + {/* Glow sphere behind logo */} + + + + + + + ); +} + /* ---------- Energy arcs (random lightning) ---------- */ function EnergyArc({ color }: { color: THREE.Color }) { const ref = useRef(null); @@ -443,6 +512,11 @@ function CountdownText() { spread={0.8} /> + {/* 3x ER logo orbiting close to nucleus like inner electrons */} + + + + {/* Countdown timer — spinning ring */}