{tweaks.artistName.split(/\s+/).map((w, i, arr) => ( {w} ))}

{t('tagline')}

{t('descend')}

{bubbles.map((b, i) => ( ))}

{rings.map((r, i) => (

))}

{motes.map((m, i) => ( ))}

); } // ── MATRIX TRANSITION ──────────────────────────────────────────────────────── const MATRIX_CHARS = 'ابتثجحخدذرزسشصضطظعغفقكلمنهوي' + 'אבגדהוזחטיכלמנסעפצקרשת' + '٠١٢٣٤٥٦٧٨٩' + '☿⊕⊗△▽✦◈⬡♄♃♂♀☽☉' + '0123456789'; function MatrixTransition({ scrollY = 0, t }) { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const FS = 22; // larger cell = fewer columns = less density const chars = MATRIX_CHARS.split(''); let animId, cols, drops, speeds; let mouse = { x: -1, y: -1 }; let bursts = []; let ripples = []; function resize() { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; cols = Math.floor(canvas.width / FS); drops = Array.from({ length: cols }, () => -Math.random() * (canvas.height / FS) * 1.5); speeds = Array.from({ length: cols }, () => 0.18 + Math.random() * 0.32); } function rndChar() { return chars[Math.floor(Math.random() * chars.length)]; } function draw() { const now = Date.now(); // ghost trail: faster clear = shorter, less cluttered trails ctx.fillStyle = 'rgba(0,0,0,0.12)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = `${FS}px "Cinzel", monospace`; // ── column rain ───────────────────────────────────────────────────── for (let i = 0; i < cols; i++) { const x = i * FS; const y = drops[i] * FS; // mouse proximity (radius 160px) const mdx = x - mouse.x, mdy = y - mouse.y; const mdist = Math.sqrt(mdx * mdx + mdy * mdy); const mInfluence = mouse.x >= 0 ? Math.max(0, 1 - mdist / 160) : 0; // ripple influence let rBoost = 0; for (const r of ripples) { const age = (now - r.t) / 900; const ring = age * 260; const rdx = x - r.x, rdy = y - r.y; const rdist = Math.sqrt(rdx * rdx + rdy * rdy); if (Math.abs(rdist - ring) < 28) rBoost = Math.max(rBoost, (1 - age) * 2.5); } const totalBoost = 1 + mInfluence * 2.2 + rBoost; // head character — bright gold/white const glow = mInfluence + rBoost * 0.5; if (glow > 0.05) { ctx.shadowBlur = 14; ctx.shadowColor = `rgba(240,192,96,${Math.min(1, glow)})`; } else { ctx.shadowBlur = 0; } // bottom-zone crystallization: chars get brighter as they approach the title text const bottomFrac = clamp((y - canvas.height * 0.5) / (canvas.height * 0.4)); const headAlpha = 0.72 + mInfluence * 0.15 + bottomFrac * 0.22; ctx.fillStyle = `rgba(255,242,215,${Math.min(1, headAlpha)})`; ctx.fillText(rndChar(), x, y); ctx.shadowBlur = 0; // trail — gold fading to deep teal const trailLen = 14; for (let t = 1; t < trailLen; t++) { const ty = y - t * FS; if (ty < -FS) break; const fade = (1 - t / trailLen); const r2 = Math.round(lerp(201, 20, t / trailLen)); const g2 = Math.round(lerp(147, 55, t / trailLen)); const b2 = Math.round(lerp(58, 130, t / trailLen)); ctx.fillStyle = `rgba(${r2},${g2},${b2},${fade * (0.38 + mInfluence * 0.3)})`; ctx.fillText(rndChar(), x, ty); } // advance — crystallize (slow down) near the bottom title zone const nearBottom = clamp((y - canvas.height * 0.52) / (canvas.height * 0.4)); const crystalMult = 1 - nearBottom * 0.78; drops[i] += speeds[i] * totalBoost * Math.max(0.22, crystalMult); if (drops[i] * FS > canvas.height + FS * 10 && Math.random() > 0.972) { drops[i] = -Math.random() * 25; } } // ── burst particles ────────────────────────────────────────────────── bursts = bursts.filter(b => now - b.t < 1100); for (const b of bursts) { const age = (now - b.t) / 1100; const fade = 1 - age; b.particles.forEach(p => { const px = b.x + p.vx * age * 120; const py = b.y + p.vy * age * 120 + age * age * 40; // slight gravity ctx.globalAlpha = fade * p.a; ctx.shadowBlur = 8; ctx.shadowColor = 'rgba(240,192,96,0.8)'; ctx.fillStyle = `rgba(${Math.round(lerp(255,201,age))},${Math.round(lerp(242,147,age))},${Math.round(lerp(215,58,age))},1)`; ctx.fillText(p.ch, px, py); ctx.shadowBlur = 0; }); ctx.globalAlpha = 1; } // ── expanding sacred geometry ───────────────────────────────────────── ripples = ripples.filter(r => now - r.t < 900); for (const r of ripples) { const age = (now - r.t) / 900; const radius = age * 260; const alpha = (1 - age) * 0.65; const cx = r.x, cy = r.y; ctx.save(); ctx.globalAlpha = alpha; ctx.strokeStyle = '#c9933a'; ctx.fillStyle = '#c9933a'; ctx.lineWidth = 1.2; switch (r.shape) { case 0: { // MONAD — hexagon + 4 rings + sun rays ctx.beginPath(); for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2 - Math.PI / 2; i === 0 ? ctx.moveTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius) : ctx.lineTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius); } ctx.closePath(); ctx.stroke(); for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2 - Math.PI / 2; ctx.beginPath(); ctx.arc(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius, radius * 0.045, 0, Math.PI * 2); ctx.fill(); } ctx.lineWidth = 1; for (const rf of [0.84, 0.66, 0.48, 0.30]) { ctx.beginPath(); ctx.arc(cx, cy, radius * rf, 0, Math.PI * 2); ctx.stroke(); } ctx.lineWidth = 0.8; for (let i = 0; i < 24; i++) { const a = (i / 24) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(cx + Math.cos(a) * radius * 0.16, cy + Math.sin(a) * radius * 0.16); ctx.lineTo(cx + Math.cos(a) * radius * 0.27, cy + Math.sin(a) * radius * 0.27); ctx.stroke(); } ctx.beginPath(); ctx.arc(cx, cy, radius * 0.13, 0, Math.PI * 2); ctx.fill(); break; } case 1: { // FLOWER OF LIFE — 7 overlapping circles ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(cx, cy, radius * 0.5, 0, Math.PI * 2); ctx.stroke(); for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2; const px = cx + Math.cos(a) * radius * 0.5; const py = cy + Math.sin(a) * radius * 0.5; ctx.beginPath(); ctx.arc(px, py, radius * 0.5, 0, Math.PI * 2); ctx.stroke(); } ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx, cy, radius * 0.04, 0, Math.PI * 2); ctx.fill(); break; } case 2: { // 6-POINTED STAR (Star of David) + rings ctx.lineWidth = 1.2; for (let tri = 0; tri < 2; tri++) { ctx.beginPath(); for (let i = 0; i < 3; i++) { const a = (i / 3) * Math.PI * 2 - Math.PI / 2 + tri * Math.PI; i === 0 ? ctx.moveTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius) : ctx.lineTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius); } ctx.closePath(); ctx.stroke(); } ctx.lineWidth = 0.8; for (const rf of [0.75, 0.5]) { ctx.beginPath(); ctx.arc(cx, cy, radius * rf, 0, Math.PI * 2); ctx.stroke(); } ctx.beginPath(); ctx.arc(cx, cy, radius * 0.08, 0, Math.PI * 2); ctx.fill(); break; } case 3: { // 5-POINTED STAR ctx.lineWidth = 1.2; ctx.beginPath(); for (let i = 0; i < 10; i++) { const a = (i / 10) * Math.PI * 2 - Math.PI / 2; const r2 = i % 2 === 0 ? radius : radius * 0.42; i === 0 ? ctx.moveTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2) : ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2); } ctx.closePath(); ctx.stroke(); ctx.lineWidth = 0.8; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx, cy, radius * 0.42, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx, cy, radius * 0.08, 0, Math.PI * 2); ctx.fill(); break; } case 4: { // VESICA PISCIS — two overlapping circles + outer ring ctx.lineWidth = 1; const off = radius * 0.5; ctx.beginPath(); ctx.arc(cx - off, cy, radius * 0.87, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx + off, cy, radius * 0.87, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke(); ctx.beginPath(); ctx.arc(cx, cy, radius * 0.07, 0, Math.PI * 2); ctx.fill(); break; } case 5: { // MANDALA — concentric rings with radial spokes + dots ctx.lineWidth = 1; for (const rf of [1, 0.75, 0.5, 0.28]) { ctx.beginPath(); ctx.arc(cx, cy, radius * rf, 0, Math.PI * 2); ctx.stroke(); } ctx.lineWidth = 0.7; for (let i = 0; i < 12; i++) { const a = (i / 12) * Math.PI * 2; ctx.beginPath(); ctx.moveTo(cx + Math.cos(a) * radius * 0.28, cy + Math.sin(a) * radius * 0.28); ctx.lineTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius); ctx.stroke(); } for (let i = 0; i < 12; i++) { const a = (i / 12) * Math.PI * 2; ctx.beginPath(); ctx.arc(cx + Math.cos(a) * radius * 0.75, cy + Math.sin(a) * radius * 0.75, radius * 0.04, 0, Math.PI * 2); ctx.fill(); } ctx.beginPath(); ctx.arc(cx, cy, radius * 0.1, 0, Math.PI * 2); ctx.fill(); break; } case 6: { // METATRON'S CUBE — 13 circles + connecting lines ctx.lineWidth = 0.7; const centers = [[cx, cy]]; for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2; centers.push([cx + Math.cos(a) * radius * 0.5, cy + Math.sin(a) * radius * 0.5]); } for (let i = 0; i < 6; i++) { const a = (i / 6) * Math.PI * 2 + Math.PI / 6; centers.push([cx + Math.cos(a) * radius, cy + Math.sin(a) * radius]); } // connecting lines between all centers for (let i = 0; i < centers.length; i++) { for (let j = i + 1; j < centers.length; j++) { ctx.beginPath(); ctx.moveTo(centers[i][0], centers[i][1]); ctx.lineTo(centers[j][0], centers[j][1]); ctx.stroke(); } } ctx.lineWidth = 1; for (const [px, py] of centers) { ctx.beginPath(); ctx.arc(px, py, radius * 0.5, 0, Math.PI * 2); ctx.stroke(); } break; } case 7: { // GOLDEN SPIRAL (Fibonacci approximation) ctx.lineWidth = 1.2; ctx.beginPath(); let started = false; for (let t = 0; t <= Math.PI * 6; t += 0.06) { const rr = radius * (t / (Math.PI * 6)); const sx = cx + rr * Math.cos(t); const sy = cy + rr * Math.sin(t); if (!started) { ctx.moveTo(sx, sy); started = true; } else ctx.lineTo(sx, sy); } ctx.stroke(); // outer circle framing the spiral ctx.lineWidth = 0.8; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.stroke(); // golden rectangles (3 nested) for (const rf of [1, 0.618, 0.382]) { const w = radius * rf * 2, h = radius * rf * 1.236; ctx.strokeRect(cx - w / 2, cy - h / 2, w, h); } ctx.beginPath(); ctx.arc(cx, cy, radius * 0.05, 0, Math.PI * 2); ctx.fill(); break; } } ctx.restore(); } animId = requestAnimationFrame(draw); } const onMouseMove = e => { const rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; }; const onMouseLeave = () => { mouse.x = -1; mouse.y = -1; }; const onClick = e => { const rect = canvas.getBoundingClientRect(); const cx = e.clientX - rect.left; const cy = e.clientY - rect.top; // 28 particles flying in all directions const particles = Array.from({ length: 28 }, () => { const angle = Math.random() * Math.PI * 2; const speed = 0.4 + Math.random() * 0.6; return { ch: rndChar(), vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, a: 0.7 + Math.random() * 0.3 }; }); bursts.push({ x: cx, y: cy, t: Date.now(), particles }); ripples.push({ x: cx, y: cy, t: Date.now(), shape: Math.floor(Math.random() * 8) }); }; const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; function drawStatic() { ctx.fillStyle = 'rgba(0,0,0,1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = `${FS}px "Cinzel", monospace`; for (let i = 0; i < cols; i++) { const y = drops[i] * FS; if (y > 0 && y < canvas.height) { ctx.fillStyle = 'rgba(255,242,215,0.35)'; ctx.fillText(rndChar(), i * FS, y); for (let t = 1; t < 8; t++) { const ty = y - t * FS; if (ty < 0) break; const fade = (1 - t / 8) * 0.3; ctx.fillStyle = `rgba(201,147,58,${fade})`; ctx.fillText(rndChar(), i * FS, ty); } } } } resize(); if (prefersReducedMotion) { drawStatic(); const onResizeStatic = () => { resize(); drawStatic(); }; window.addEventListener('resize', onResizeStatic); return () => window.removeEventListener('resize', onResizeStatic); } draw(); const onResize = () => { resize(); }; window.addEventListener('resize', onResize); canvas.addEventListener('mousemove', onMouseMove); canvas.addEventListener('mouseleave', onMouseLeave); canvas.addEventListener('click', onClick); return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', onResize); canvas.removeEventListener('mousemove', onMouseMove); canvas.removeEventListener('mouseleave', onMouseLeave); canvas.removeEventListener('click', onClick); }; }, []); return (

); } // ── GNOSIS SECTION ──────────────────────────────────────────────────────────── function GnosisSection({ scrollY = 0, t }) { const ref = useReveal(); return (

☿ {t('gnosisEyebrow')}

{t('gnosisTitle')(t('gnosisTitleEm'))}

{t('bioLead')}{" "} {t('bioLeadEm')}

{t('bioP2')}

{t('bioP3')}

{[t('bioTag1'), t('bioTag2'), t('bioTag3'), t('bioTag4')].map(tag => ( {tag} ))}

); } function BioGlyphs() { return ( ); } function Particles({ count = 24, scrollY = 0, parallaxSpeed = 0 }) { const items = useMemo(() => Array.from({ length: count }, () => ({ x: Math.random() * 100, y: Math.random() * 100, size: 0.6 + Math.random() * 1.6, dur: 4 + Math.random() * 10, delay: -Math.random() * 8 })), [count]); return (

{items.map((p, i) => ( ))}

); } // ── SOUND CAROUSEL ──────────────────────────────────────────────────────────── function SoundCarousel({ style, t }) { const [active, setActive] = useState(0); const total = TRACKS.length; const next = useCallback(() => setActive(a => (a + 1) % total), [total]); const prev = useCallback(() => setActive(a => (a - 1 + total) % total), [total]); const ref = useReveal(0.1); const touchStartX = useRef(null); const touchEndX = useRef(null); const minSwipe = 50; const handleTouchStart = e => { touchStartX.current = e.targetTouches[0].clientX; touchEndX.current = null; }; const handleTouchMove = e => { touchEndX.current = e.targetTouches[0].clientX; }; const handleTouchEnd = () => { if (touchStartX.current === null || touchEndX.current === null) return; const dist = touchStartX.current - touchEndX.current; if (dist > minSwipe) next(); if (dist < -minSwipe) prev(); }; useEffect(() => { const onKey = e => { if (e.key === "ArrowRight") next(); if (e.key === "ArrowLeft") prev(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [next, prev]); return (

⊕ {t('soundEyebrow')}

{t('soundTitle')(
)}

{t('soundSub1')}

{t('soundSub2')}

{TRACKS.map((trk, i) => { const offset = (i - active + total) % total; const rel = offset > total / 2 ? offset - total : offset; return ( setActive(i)} t={t}/> ); })}

{TRACKS.map((trk, i) => ( ))}

{TRACKS[active].num}

{String(active + 1).padStart(2,"0")} / {String(total).padStart(2,"0")}

{TRACKS[active].title}

Jihadeen el-Eden — {t('soundMeta')}

); } function CarouselCard({ track, rel, active, onClick, t }) { const renderIframe = Math.abs(rel) <= 1; const absRel = Math.abs(rel); const tx = rel * 300; const scale = active ? 1 : Math.max(0.62, 1 - absRel * 0.16); const opacity = absRel >= 3 ? 0 : Math.max(0.12, 1 - absRel * 0.3); const blur = active ? 0 : Math.min(5, absRel * 1.4); const z = 100 - Math.round(absRel * 10); const rot = rel * -5; const iframeSrc = `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/` + `soundcloud%253Atracks%253A${track.id}` + `&color=%23${track.color.replace("#","")}` + `&auto_play=false&hide_related=true&show_comments=false` + `&show_user=true&show_reposts=false&show_teaser=false&visual=true`; return (

{ const c = hexToRgb(track.color); return { "--accent-r": c.r, "--accent-g": c.g, "--accent-b": c.b }; })() }} onClick={onClick} >

{track.num}

{renderIframe ? (

{tweaks.artistName.split(/\s+/).map((w, i, arr) => ( {w} ))}

{t('gnosisTitle')(t('gnosisTitleEm'))}

{t('soundTitle')()}

{TRACKS[active].title}

{t('soundTitle')(
)}