{label}

); /* ═══════════════════ Bird & bunker generators ═══════════════════ */ const generateBirds = (count, seed) => { const rand = mulberry32(seed); return Array.from({length: count}).map((_, i) => { const direction = rand() < 0.45 ? -1 : 1; // ~45% des oiseaux viennent de la droite return { id: `b-${seed}-${i}-${Math.floor(rand() * 1e9)}`, top: 6 + rand() * 30, duration: 24 + rand() * 22, delay: -rand() * 40, flapSpeed: 0.34 + rand() * 0.22, flapDelay: rand() * 0.5, amp1: -8 - rand() * 28, amp2: 8 + rand() * 24, amp3: -8 - rand() * 20, scale: 0.7 + rand() * 0.55, direction, }; }); }; const generateBunkers = (count, seed) => { // x range 18-82% with spacing; y range 64-86% (always inside the mountain mass, lower half) const xs = []; const rand = mulberry32(seed); for (let i = 0; i < count; i++) { let x; for (let attempt = 0; attempt < 12; attempt++) { x = 18 + rand() * 64; if (xs.every(prev => Math.abs(prev - x) > 24)) break; } xs.push(x); } return xs.map((x, i) => { const r2 = mulberry32(seed + i * 31); return { x, y: 66 + r2() * 18, // 66-84% — always in the lower mountain tilt: -6 + r2() * 12, aim: -16 + r2() * 12, }; }); }; /* ═══════════════════ Bird-hit "oh no" sound ═══════════════════ */ let ohNoAudio = null; const playOhNo = () => { try { if (!ohNoAudio) { ohNoAudio = new Audio('assets/beta/ohno.mp3'); ohNoAudio.volume = 0.7; ohNoAudio.preload = 'auto'; } // restart from beginning even if still playing const clone = ohNoAudio.cloneNode(true); clone.volume = 0.7; clone.play().catch(() => {}); } catch(e) {} }; /* ═══════════════════ Gun shot sound (Web Audio) ═══════════════════ */ let audioCtx = null; const playGunShot = () => { try { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); if (audioCtx.state === 'suspended') audioCtx.resume(); const t0 = audioCtx.currentTime; // Noise burst — the "bang" const bufSize = Math.floor(audioCtx.sampleRate * 0.18); const buffer = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate); const data = buffer.getChannelData(0); for (let i = 0; i < bufSize; i++) { data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufSize, 2.2); } const noise = audioCtx.createBufferSource(); noise.buffer = buffer; const noiseGain = audioCtx.createGain(); noiseGain.gain.setValueAtTime(0.0, t0); noiseGain.gain.linearRampToValueAtTime(0.5, t0 + 0.004); noiseGain.gain.exponentialRampToValueAtTime(0.001, t0 + 0.18); const filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 2000; noise.connect(filter).connect(noiseGain).connect(audioCtx.destination); noise.start(t0); noise.stop(t0 + 0.22); // Sub thump const osc = audioCtx.createOscillator(); osc.type = 'sine'; osc.frequency.setValueAtTime(160, t0); osc.frequency.exponentialRampToValueAtTime(38, t0 + 0.16); const oscGain = audioCtx.createGain(); oscGain.gain.setValueAtTime(0.4, t0); oscGain.gain.exponentialRampToValueAtTime(0.001, t0 + 0.18); osc.connect(oscGain).connect(audioCtx.destination); osc.start(t0); osc.stop(t0 + 0.2); } catch (e) {} }; /* ═══════════════════ MAIN HERO ═══════════════════ */ const AlpineHero = ({ onGenerate, onLogin, onAffiliate, showBats = false }) => { const heroRef = useRef(null); const farRef = useRef(null); const midRef = useRef(null); const nearRef = useRef(null); const sunRef = useRef(null); const textRef = useRef(null); const lakeRef = useRef(null); // viewport-aware counts (computed once) const counts = useMemo(() => { if (typeof window === 'undefined') return { clouds: 5, boats: 5 }; const w = window.innerWidth; if (w < 560) return { clouds: 2, boats: 2 }; if (w < 900) return { clouds: 3, boats: 3 }; return { clouds: 6, boats: 5 }; }, []); const clouds = useMemo(() => generateClouds(counts.clouds, Date.now() & 0xffff), [counts.clouds]); const boats = useMemo(() => generateBoats(counts.boats, (Date.now() >> 4) & 0xffff), [counts.boats]); const initialBirds = useMemo(() => generateBirds(6, (Date.now() >> 8) & 0xffff), []); const bunkerPositions = useMemo(() => generateBunkers(2, (Date.now() >> 12) & 0xffff), []); // Birds live in state so they can be removed when shot and respawned const [birds, setBirds] = useState(initialBirds); const respawnSeedRef = useRef(0); // Bunker DOM refs — rifles will track the mouse via direct style updates const bunkerRefs = useRef([]); const crosshairRef = useRef(null); // ───── Parallax scroll ───── useEffect(() => { let raf; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const y = window.scrollY; const max = window.innerHeight; const t = Math.min(1, y / max); if (sunRef.current) sunRef.current.style.transform = `translateY(${y * 0.12}px)`; if (farRef.current) farRef.current.style.transform = `translateY(${y * 0.04}px)`; if (midRef.current) midRef.current.style.transform = `translateY(${y * 0.07}px)`; if (nearRef.current) nearRef.current.style.transform = `translateY(${y * 0.11}px)`; if (lakeRef.current) lakeRef.current.style.transform = `translateY(${y * 0.16}px)`; if (textRef.current) { textRef.current.style.transform = `translateY(${y * 0.30}px)`; textRef.current.style.opacity = `${Math.max(0, 1 - t * 1.5)}`; } }); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); }; }, []); // ───── Easter egg state ───── const [proximate, setProximate] = useState(false); const [bunkersOpen, setBunkersOpen] = useState(false); const [firing, setFiring] = useState({ a: false, b: false }); const [downBirdIds, setDownBirdIds] = useState(() => new Set()); // birds in falling animation const [score, setScore] = useState(0); // Detect proximity to any flying bird (or bat), AND make rifles track the mouse, AND move crosshair const checkProximity = useCallback((e) => { if (!heroRef.current) return; const mx = e.clientX, my = e.clientY; // Move crosshair if (crosshairRef.current) { crosshairRef.current.style.left = `${mx}px`; crosshairRef.current.style.top = `${my}px`; } // Proximity check const targets = heroRef.current.querySelectorAll('.bird:not(.falling), .bat'); const radius = 180; let near = false; for (const t of targets) { const r = t.getBoundingClientRect(); if (r.width === 0 || r.height === 0) continue; const cs = getComputedStyle(t); if (cs.display === 'none' || cs.visibility === 'hidden') continue; const dx = mx - (r.left + r.width/2); const dy = my - (r.top + r.height/2); if (dx*dx + dy*dy < radius * radius) { near = true; break; } } setProximate(prev => prev === near ? prev : near); // Update rifle aim for each bunker — angle from bunker center toward mouse bunkerRefs.current.forEach((bk) => { if (!bk) return; const r = bk.getBoundingClientRect(); const bx = r.left + r.width/2; const by = r.top + r.height/2; // Tilt of the whole bunker is applied as rotate() — we need to subtract it const tiltDeg = parseFloat(bk.style.getPropertyValue('--tilt') || '0'); // Angle in screen space, in degrees, where 0 = pointing right const screenAngle = Math.atan2(my - by, mx - bx) * 180 / Math.PI; // Local rifle angle = screen angle minus bunker tilt let aim = screenAngle - tiltDeg; // Clamp to plausible range (don't have soldiers shooting backwards) if (aim > 30) aim = 30; if (aim < -90) aim = -90; bk.style.setProperty('--aim', `${aim}deg`); }); }, []); const onLeaveHero = useCallback(() => setProximate(false), []); useEffect(() => { if (!proximate) { const t = setTimeout(() => setBunkersOpen(false), 600); return () => clearTimeout(t); } // Open near-instantly when player approaches a bird setBunkersOpen(true); }, [proximate]); // Soldiers fire occasionally while bunkers open — visual only, no sound (sound = player feedback) useEffect(() => { if (!bunkersOpen) return; let alive = true; const tick = () => { if (!alive) return; const which = Math.random() < 0.5 ? 'a' : 'b'; setFiring(f => ({ ...f, [which]: true })); setTimeout(() => alive && setFiring(f => ({ ...f, [which]: false })), 220); }; const id = setInterval(tick, 2200 + Math.random() * 1800); return () => { alive = false; clearInterval(id); }; }, [bunkersOpen]); // Click anywhere in the hero while aiming → shoot the closest live bird within range const onHeroClick = useCallback((e) => { if (!heroRef.current) return; const mx = e.clientX, my = e.clientY; const targets = heroRef.current.querySelectorAll('.bird:not(.falling)'); let bestDist = 200 * 200; let bestId = null; targets.forEach(t => { const r = t.getBoundingClientRect(); const cs = getComputedStyle(t); if (cs.display === 'none' || cs.visibility === 'hidden') return; const cx = r.left + r.width/2; const cy = r.top + r.height/2; const d = (mx - cx) ** 2 + (my - cy) ** 2; if (d < bestDist) { bestDist = d; bestId = t.dataset.birdId; } }); if (bestId) shootBird(bestId); }, []); // Player shoots a bird → fall animation → after 2.7s remove + respawn fresh bird with new trajectory const shootBird = useCallback((id) => { // Pin the bird's current screen position BEFORE the animation switches to .falling, // so we actually see it fall from where it was — not teleport back to left:-10%. const el = heroRef.current?.querySelector(`[data-bird-id="${id}"]`); if (el && heroRef.current) { const heroRect = heroRef.current.getBoundingClientRect(); const r = el.getBoundingClientRect(); // Pin in pixel coords so the flying %-based `left` keyframe no longer governs el.style.left = (r.left - heroRect.left) + 'px'; el.style.top = (r.top - heroRect.top) + 'px'; } setDownBirdIds(prev => { if (prev.has(id)) return prev; const next = new Set(prev); next.add(id); return next; }); playGunShot(); // "Oh no!" reaction from the hit bird — short delay so it lands after the shot setTimeout(playOhNo, 120); setScore(s => s + 1); // After fall animation, remove the dead bird and spawn a fresh one setTimeout(() => { setBirds(prev => { const seed = (Date.now() ^ (++respawnSeedRef.current)) & 0xffff; const [newBird] = generateBirds(1, seed); return prev.filter(b => b.id !== id).concat(newBird); }); setDownBirdIds(prev => { if (!prev.has(id)) return prev; const next = new Set(prev); next.delete(id); return next; }); }, 2700); }, []); // contextual badge message based on score const scoreMessage = useMemo(() => { if (score === 0) return null; if (score === 1) return <>👀 Premier oiseau touché.
Vraiment ? On vous regarde.; if (score === 2) return <>🇨🇭 La défense aérienne approuve.; if (score < 5) return <>L'armée fédérale enregistre vos performances.; if (score < 8) return <>Permis de chasse virtuel délivré.
(validé par personne); if (score < 12) return <>Les oiseaux suisses se mettent en grève.; return <>OK ça suffit, on n'a plus d'oiseaux.; }, [score]); const bunkerLabels = [ "🇨🇭 Neutralité armée. Mais surveillance active.", "Bunker fédéral n°428 — service en cours.", ]; return (

{/* stars (nuit) */}

{/* sun / moon */}

{/* clouds — vraies formes SVG */} {clouds.map((c, i) => { const Shape = CloudShapes[c.shape] || CloudShapes[0]; return (

); })} {/* bats — visible en crépuscule/nuit */} {/* birds — chacun avec sa trajectoire indépendante, dans les deux sens */} {birds.map((b) => (

{ e.stopPropagation(); if (!downBirdIds.has(b.id)) shootBird(b.id); }} title={downBirdIds.has(b.id) ? '' : 'Tirer'} style={{ '--bird-top': `${b.top}%`, '--bird-dur': `${b.duration}s`, '--bird-delay': `${b.delay}s`, '--bird-flap': `${b.flapSpeed}s`, '--bird-flap-delay': `${b.flapDelay}s`, '--bird-amp1': `${b.amp1}px`, '--bird-amp2': `${b.amp2}px`, '--bird-amp3': `${b.amp3}px`, '--bird-anim': b.direction === -1 ? 'bird-fly-rtl' : 'bird-fly-ltr', }} >

))} {/* mountains — back to front */}

{/* drapeau suisse — enfant du layer mid pour suivre le parallax */}

{/* Bunkers — positions randomisées à chaque chargement, toujours bas dans la montagne */} {proximate && bunkerPositions.map((bk, i) => ( { bunkerRefs.current[i] = el; }} /> ))}

{/* brume d'horizon */}

{/* lake */}

{/* reflection */} {/* boats — répartis en profondeur */} {boats.map((b, i) => (

))}

{/* grain */}

{/* score badge (easter egg) */}

{scoreMessage && ( <>

🐦 {score} touché{score>1?'s':''}

{scoreMessage}

)}

{/* text */}

Société suisse · Cybersécurité · 🇨🇭 Zürich + Garde IA souverain

Le VPN qui
ne sait rien
de vous.

Sans email. Sans mot de passe. Sans carte bancaire.
Un identifiant à 16 chiffres et votre vie privée redevient privée.

{/* crosshair — apparaît quand on s'approche d'un oiseau */}

); }; Object.assign(window, { AlpineHero, MountainsFar, MountainsMid, MountainsNear, Boat, Bird });