/* Helptyfy — marketing landing page (signed-out home). Composes DS primitives + shared widgets. window.Icons for iconography. */ const { useState, useEffect } = React; const DS = window.HelptyDesignSystem_56c945; const { Button, Logo, Card, Badge, GradientText, Tag, Input } = DS; const { Icons, AIPanel, Customizer, LanguageMenu } = window; const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider } = window; const GO = { join: '/login', app: '/app' }; const go = (p) => { window.location.href = p; }; /* ---- Tweakable “feel” controls — each reshapes the whole page, not one pixel ---- */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "atmosphere": "charged", "dotDensity": "balanced", "dotSize": 1.1, "mood": ["#8b5cf6", "#22d3ee", "#6d28d9"], "material": "glass" }/*EDITMODE-END*/; const MOOD_SWATCHES = [ ["#8b5cf6", "#22d3ee", "#6d28d9"], // Violet · the default electric dusk ["#06b6d4", "#818cf8", "#0e7490"], // Cyan · cool & technical ["#f59e0b", "#fb7185", "#b45309"], // Amber · warm & human ["#10b981", "#22d3ee", "#047857"], // Emerald · fresh & calm ]; const MATERIAL_TOKENS = { glass: null, // fall back to the design-system glass tokens solid: { '--surface-glass': '#14141c', '--surface-glass-strong': '#1b1b27', '--surface-glass-hover': '#22222f', '--glass-blur': '0px', '--border-glass': 'rgba(255,255,255,0.08)' }, outline: { '--surface-glass': 'transparent', '--surface-glass-strong': 'rgba(255,255,255,0.025)', '--surface-glass-hover': 'rgba(255,255,255,0.05)', '--glass-blur': '0px', '--border-glass': 'rgba(255,255,255,0.20)' }, }; /* ---- i18n: the strings that drive the page, in all 5 launch languages ---- */ const T = { EN: { how:'How it works', pricing:'Pricing', api:'API', business:'For business', signin:'Sign in', join:'Join free', badge:'AI-powered matching', h1a:'Find the person your', kw:'business', h1b:'is missing.', sub:'Tell us what you\u2019ve got and what you need. Our AI finds the people who complete the picture \u2014 and you only pay when it\u2019s mutual.', cta1:'Find your match', cta2:'See how it works', free:'Free to join \u00b7 free to browse \u00b7 pay only on a mutual yes', stepK:'How it works', stepT:'Match. Connect. Build together.', s1t:'Match', s1d:'AI reads both sides and surfaces complementary people, each with a one-line reason you fit.', s2t:'Connect', s2d:'Both say yes? A small connect fee unlocks chat. Nobody pays for a ghost.', s3t:'Work together', s3d:'Message and get it done \u2014 no commissions, no middlemen, no subscriptions.', s4t:'Team up', s4d:'Found people building something similar? Form a squad. Team Up turns matches into a group \u2014 several people, one shared project, moving as one.', priceK:'Honest pricing', priceT:'Free to join. You pay only on a mutual yes.', connectN:'Connect fee', connectD:'Charged once both sides agree, within 72 hours \u2014 otherwise auto-released.', perSide:'per side', ghostN:'The ghost guarantee', ghostD:'Your \u20ac9 is only held, never taken, until the other side pays too. If they don\u2019t within 72h, it\u2019s released \u2014 automatically.', apiK:'Build on Helptyfy', apiT:'An API for your AI agents.', apiSub:'Generate keys that let agents act on your account within scopes you choose. $20/mo per key, revocable anytime.', scopeView:'View', scopeEdit:'Edit', scopeEvery:'Everything', apiCta:'Read the docs', b2bK:'For business', b2bT:'Where businesses connect to work on projects.', b2bSub:'Helptyfy is built for businesses to find each other, close deals, and grow \u2014 directly, with no commissions and no middlemen.', b2b1t:'Do business, make money', b2b1d:'Find businesses ready to buy, sell, and refer. Offer your services or hire others \u2014 deals happen directly and you keep what you earn.', b2b2t:'Partner up, not pay up', b2b2d:'No budget? Trade value instead. Connect to build something together and share the upside \u2014 partnership over payment.', bizName:'DigitalRepeal', bizRole:'Automation, web & operations studio', bizPostTag:'Open for business', bizPostBody:'We\u2019re open to doing business \u2014 paid projects and partnership deals alike. Work with us on a brief, or pitch a partnership where we build together and share the upside instead of trading invoices.', bizOffer:'Offering', bizOpen:'Open to', bizDo:'Do business', bizPartner:'Partner up', ctaT:'Find the people your work is missing.', ctaSub:'Join the waitlist \u2014 free, in five languages, worldwide from day one.', ctaPh:'you@business.com', ctaBtn:'Join free', ctaNote:'Available in English, Български, Espa\u00f1ol, Deutsch & Fran\u00e7ais.', foot:'Find the person your business is missing.', }, BG: { how:'Как работи', pricing:'Цени', api:'API', business:'За бизнеса', signin:'Вход', join:'Присъедини се', badge:'Свързване с изкуствен интелект', h1a:'Намерете човека, който', kw:'бизнесът', h1b:'ви липсва.', sub:'Кажете ни какво имате и какво търсите. Нашият ИИ намира хората, които допълват картината \u2014 и плащате само при взаимно съгласие.', cta1:'Намери своя мач', cta2:'Виж как работи', free:'Безплатно \u00b7 свободно разглеждане \u00b7 плащаш само при взаимно „да“', stepK:'Как работи', stepT:'Свържи. Договори. Работи заедно.', s1t:'Свързване', s1d:'ИИ чете и двете страни и показва допълващи се хора с по едно изречение защо си пасвате.', s2t:'Договаряне', s2d:'И двамата казват „да“? Малка такса отключва чата. Никой не плаща за призрак.', s3t:'Работа заедно', s3d:'Пишете и свършете работата \u2014 без комисиони и посредници.', priceK:'Честни цени', priceT:'Безплатно. Плащаш само при взаимно „да“.', connectN:'Такса за връзка', connectD:'Начислява се щом и двете страни се съгласят, до 72 часа \u2014 иначе се освобождава.', perSide:'на страна', ghostN:'Гаранция срещу призраци', ghostD:'Вашите \u20ac9 само се резервират, докато и другата страна плати. Ако не стане до 72ч \u2014 се освобождават автоматично.', apiK:'Изгради върху Helptyfy', apiT:'API за вашите ИИ агенти.', apiSub:'Генерирайте ключове, които позволяват на агенти да действат с избрани от вас права. $20/мес на ключ, отменим по всяко време.', scopeView:'Преглед', scopeEdit:'Редакция', scopeEvery:'Всичко', apiCta:'Документация', b2bK:'За бизнеса', b2bT:'Партньорства и интеграции.', b2bSub:'Вградете свързването на Helptyfy в продукта си или си партнирайте с нас за глобален обхват.', b2b1t:'Интегрирай API', b2b1d:'Добавете свързване в приложението си с няколко заявки.', b2b2t:'Стани партньор', b2b2d:'Съвместен маркетинг към растяща мрежа от малки бизнеси.', ctaT:'Намерете хората, които работата ви търси.', ctaSub:'Запишете се \u2014 безплатно, на пет езика, по целия свят.', ctaPh:'ti@biznes.com', ctaBtn:'Присъедини се', ctaNote:'Достъпно на English, Български, Espa\u00f1ol, Deutsch и Fran\u00e7ais.', foot:'Намерете човека, който бизнесът ви липсва.', }, ES: { how:'Cómo funciona', pricing:'Precios', api:'API', business:'Para empresas', signin:'Entrar', join:'Únete gratis', badge:'Conexiones con IA', h1a:'Encuentra a la persona que', kw:'tu negocio', h1b:'necesita.', sub:'Cuéntanos qué tienes y qué necesitas. Nuestra IA encuentra a quienes completan el cuadro \u2014 y solo pagas cuando es mutuo.', cta1:'Encuentra tu match', cta2:'Ver cómo funciona', free:'Gratis \u00b7 explora gratis \u00b7 pagas solo con un sí mutuo', stepK:'Cómo funciona', stepT:'Conecta. Acuerda. Colabora.', s1t:'Conecta', s1d:'La IA lee ambos lados y muestra personas complementarias, con una razón de por qué encajáis.', s2t:'Acuerda', s2d:'¿Ambos decís que sí? Una pequeña tarifa abre el chat. Nadie paga por un fantasma.', s3t:'Colabora', s3d:'Escribe y hazlo \u2014 sin comisiones ni intermediarios.', priceK:'Precios honestos', priceT:'Únete gratis. Solo pagas con un sí mutuo.', connectN:'Tarifa de conexión', connectD:'Se cobra cuando ambos aceptan, en 72 horas \u2014 si no, se libera.', perSide:'por lado', ghostN:'La garantía anti-fantasma', ghostD:'Tus \u20ac9 solo se retienen hasta que el otro lado pague. Si no lo hace en 72h, se liberan \u2014 automáticamente.', apiK:'Construye sobre Helptyfy', apiT:'Una API para tus agentes de IA.', apiSub:'Genera claves que dejan a los agentes actuar con los permisos que elijas. $20/mes por clave, revocable cuando quieras.', scopeView:'Ver', scopeEdit:'Editar', scopeEvery:'Todo', apiCta:'Ver la documentación', b2bK:'Para empresas', b2bT:'Alianzas e integraciones.', b2bSub:'Integra el matching de Helptyfy en tu producto o asóciate con nosotros para llegar a todo el mundo.', b2b1t:'Integra la API', b2b1d:'Añade matching a tu app con unos pocos endpoints.', b2b2t:'Sé partner', b2b2d:'Comarketing hacia una red global de pequeñas empresas.', ctaT:'Encuentra a quienes le faltan a tu trabajo.', ctaSub:'Únete a la lista \u2014 gratis, en cinco idiomas, global desde el día uno.', ctaPh:'tu@empresa.com', ctaBtn:'Únete gratis', ctaNote:'Disponible en English, Български, Espa\u00f1ol, Deutsch y Fran\u00e7ais.', foot:'Encuentra a la persona que tu negocio necesita.', }, DE: { how:'So funktioniert\u2019s', pricing:'Preise', api:'API', business:'Für Unternehmen', signin:'Anmelden', join:'Gratis beitreten', badge:'KI-gestütztes Matching', h1a:'Finde die Person, die deinem', kw:'Business', h1b:'fehlt.', sub:'Sag uns, was du hast und was du brauchst. Unsere KI findet die Menschen, die das Bild vervollständigen \u2014 und du zahlst nur, wenn es beidseitig passt.', cta1:'Finde dein Match', cta2:'So funktioniert\u2019s', free:'Gratis \u00b7 frei stöbern \u00b7 zahlen nur bei beidseitigem Ja', stepK:'So funktioniert\u2019s', stepT:'Matchen. Verbinden. Zusammenarbeiten.', s1t:'Matchen', s1d:'Die KI liest beide Seiten und zeigt passende Menschen \u2014 mit einer Zeile, warum ihr zueinander passt.', s2t:'Verbinden', s2d:'Beide sagen Ja? Eine kleine Gebühr öffnet den Chat. Niemand zahlt für einen Geist.', s3t:'Zusammenarbeiten', s3d:'Schreibt und erledigt es \u2014 ohne Provisionen, ohne Mittelsmänner.', priceK:'Ehrliche Preise', priceT:'Gratis beitreten. Zahlen nur bei beidseitigem Ja.', connectN:'Verbindungsgebühr', connectD:'Wird berechnet, sobald beide zustimmen, innerhalb von 72 Stunden \u2014 sonst freigegeben.', perSide:'pro Seite', ghostN:'Die Geist-Garantie', ghostD:'Deine \u20ac9 werden nur reserviert, bis die andere Seite ebenfalls zahlt. Passiert das nicht in 72h, wird der Betrag automatisch freigegeben.', apiK:'Auf Helptyfy bauen', apiT:'Eine API für deine KI-Agenten.', apiSub:'Erstelle Keys, mit denen Agenten in von dir gewählten Scopes handeln. $20/Monat pro Key, jederzeit widerrufbar.', scopeView:'Ansehen', scopeEdit:'Bearbeiten', scopeEvery:'Alles', apiCta:'Zur Doku', b2bK:'Für Unternehmen', b2bT:'Partnerschaften & Integrationen.', b2bSub:'Integriere Helptyfy-Matching in dein Produkt oder werde Partner für weltweite Reichweite.', b2b1t:'API integrieren', b2b1d:'Bring Matching mit wenigen Endpunkten in deine App.', b2b2t:'Partner werden', b2b2d:'Gemeinsames Marketing an ein globales Netzwerk kleiner Unternehmen.', ctaT:'Finde die Menschen, die deiner Arbeit fehlen.', ctaSub:'Tritt der Warteliste bei \u2014 gratis, in fünf Sprachen, weltweit ab Tag eins.', ctaPh:'du@firma.com', ctaBtn:'Gratis beitreten', ctaNote:'Verfügbar auf English, Български, Espa\u00f1ol, Deutsch & Fran\u00e7ais.', foot:'Finde die Person, die deinem Business fehlt.', }, FR: { how:'Comment \u00e7a marche', pricing:'Tarifs', api:'API', business:'Entreprises', signin:'Connexion', join:'Rejoindre', badge:'Mise en relation par IA', h1a:'Trouvez la personne qui', kw:'manque', h1b:'\u00e0 votre activit\u00e9.', sub:'Dites-nous ce que vous avez et ce qu\u2019il vous faut. Notre IA trouve les personnes qui compl\u00e8tent le tableau \u2014 et vous ne payez que si c\u2019est mutuel.', cta1:'Trouver mon match', cta2:'Comment \u00e7a marche', free:'Gratuit \u00b7 navigation libre \u00b7 payez seulement sur un oui mutuel', stepK:'Comment \u00e7a marche', stepT:'Matcher. Connecter. Collaborer.', s1t:'Matcher', s1d:'L\u2019IA lit les deux c\u00f4t\u00e9s et propose des profils compl\u00e9mentaires, avec une ligne sur pourquoi vous collez.', s2t:'Connecter', s2d:'Les deux disent oui ? Un petit frais ouvre le chat. Personne ne paie pour un fant\u00f4me.', s3t:'Collaborer', s3d:'\u00c9crivez et faites-le \u2014 sans commissions ni interm\u00e9diaires.', priceK:'Tarifs honn\u00eates', priceT:'Gratuit \u00e0 l\u2019inscription. Vous payez seulement sur un oui mutuel.', connectN:'Frais de connexion', connectD:'Pr\u00e9lev\u00e9 quand les deux acceptent, sous 72 heures \u2014 sinon lib\u00e9r\u00e9.', perSide:'par c\u00f4t\u00e9', ghostN:'La garantie anti-fant\u00f4me', ghostD:'Vos \u20ac9 sont seulement retenus jusqu\u2019\u00e0 ce que l\u2019autre c\u00f4t\u00e9 paie. Sans paiement sous 72h, ils sont lib\u00e9r\u00e9s \u2014 automatiquement.', apiK:'Construire sur Helptyfy', apiT:'Une API pour vos agents IA.', apiSub:'G\u00e9n\u00e9rez des cl\u00e9s qui laissent les agents agir selon les scopes choisis. 20\u00a0$/mois par cl\u00e9, r\u00e9vocable \u00e0 tout moment.', scopeView:'Voir', scopeEdit:'Modifier', scopeEvery:'Tout', apiCta:'Lire la doc', b2bK:'Entreprises', b2bT:'Partenariats & int\u00e9grations.', b2bSub:'Int\u00e9grez le matching Helptyfy \u00e0 votre produit ou devenez partenaire pour une port\u00e9e mondiale.', b2b1t:'Int\u00e9grer l\u2019API', b2b1d:'Ajoutez le matching \u00e0 votre app en quelques endpoints.', b2b2t:'Devenir partenaire', b2b2d:'Co-marketing vers un r\u00e9seau mondial de petites entreprises.', ctaT:'Trouvez les personnes qui manquent \u00e0 votre travail.', ctaSub:'Rejoignez la liste \u2014 gratuit, en cinq langues, mondial d\u00e8s le premier jour.', ctaPh:'vous@entreprise.com', ctaBtn:'Rejoindre', ctaNote:'Disponible en English, Български, Espa\u00f1ol, Deutsch & Fran\u00e7ais.', foot:'Trouvez la personne qui manque \u00e0 votre activit\u00e9.', }, }; function Section({ id, children, style }) { return
{children}
; } function Kicker({ children }) { return
{children}
; } function Nav({ t, lang, setLang }) { const scroll = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: window.scrollY + el.getBoundingClientRect().top - 90, behavior: 'smooth' }); }; return (
); } function Hero({ t }) { return (

{t.h1a} {t.kw} {t.h1b}

{t.sub}

{t.free}
); } function HeroPreview({ t }) { return (
Matches Boosted
{[ { n: 'DigitalRepeal', sub: 'Automation & web studio', cat: 'Engineering', p: 92, has: ['Automation', 'Design', 'Websites'], need: 'New clients', boost: true, stance: 'offering', logo: (window.__resources && window.__resources.logoDR) || '../../assets/logo-digitalrepeal.png' }, { n: 'YS1Pro', sub: 'Accounting & operations', cat: 'Finance', p: 86, has: ['Accounting', 'Save time'], need: 'Automation', stance: 'offering', logo: (window.__resources && window.__resources.logoYS) || '../../assets/logo-ys1.png' }, ].map((m, i) => (
{m.logo ? : }
{m.n} {m.boost && Boosted} Digital
{m.sub} {m.stance === 'offering' ? : } {m.stance === 'offering' ? 'Offering help/ Need' : 'Looking for help'}
{m.has.map(h => {h})} {m.need}
{m.p}%
))}
); } function HowItWorks({ t }) { const steps = [ { t: t.s1t, d: t.s1d, icon: }, { t: t.s2t, d: t.s2d, icon: }, { t: t.s3t, d: t.s3d, icon: }, { t: t.s4t || 'Team up', d: t.s4d || 'Found people building something similar? Form a squad. Team Up turns matches into a group — several people, one shared project, moving as one.', icon: , featured: true, tag: 'Multiplayer' }, ]; return (
{t.stepK}

{t.stepT}

{steps.map((s, i) => (
{s.featured && }
{s.icon}
{s.tag ? }>{s.tag} : 0{i + 1}}
{s.tag && 0{i + 1}}

{s.t}

{s.d}
))}
); } function Pricing({ t }) { return (
{t.priceK}

{t.priceT}

{t.connectN}
\u20ac9 {t.perSide}

{t.connectD}

{t.ghostN}

{t.ghostD}

{[['Hold', 'on agreement'], ['Capture', 'when both pay'], ['Release', 'after 72h']].map(([a, b]) => (
{a} {b}
))}
); } function ApiSection({ t }) { const scopes = [ { n: t.scopeView, c: 'var(--info)', d: 'Read-only' }, { n: t.scopeEdit, c: 'var(--accent)', d: 'Read + write' }, { n: t.scopeEvery, c: 'var(--boost)', d: 'Full access' }, ]; return (
{t.apiK}

{t.apiT}

{t.apiSub}

{scopes.map(s => (
{s.n} {s.d}
))}
helpty_sk_live_4f9c\u2026a92f
POST /v1/matches
{'{'} need: "growth engineer", scope: "edit" {'}'}
// 200 \u2014 3 matches, each with a why_fit line
$20/mo \u00b7 per key revocable anytime
); } function B2B({ t }) { const F = (k, fb) => t[k] || fb; const values = [ { t: F('b2b1t', 'Do business, make money'), d: F('b2b1d', 'Find businesses ready to buy, sell, and refer. Offer your services or hire others — deals happen directly and you keep what you earn.'), icon: }, { t: F('b2b2t', 'Partner up, not pay up'), d: F('b2b2d', 'No budget? Trade value instead. Connect to build something together and share the upside — partnership over payment.'), icon: }, ]; const offers = ['Automation', 'Websites', 'Operations', 'AI agents', 'Anything your business needs']; const openTo = ['Paid projects', 'Partnerships', 'Equity deals', 'Referrals', 'and More']; return (
{F('b2bK', 'For business')}

{F('b2bT', 'Where businesses connect to work on projects.')}

{F('b2bSub', '')}

{/* The "open for business" post */}
{F('bizName', 'DigitalRepeal × YS1')}
{F('bizRole', 'Automation, web & operations studio')}
}>{F('bizPostTag', 'Open for business')}

{F('bizPostBody', '')}

{F('bizOffer', 'Offering')}
{offers.map(x => {x})}
{F('bizOpen', 'Open to')}
{openTo.map(x => {x})}
 {/* Two value points */}
{values.map((it, i) => (
{it.icon}

{it.t}

{it.d}

 ))}
); } const BOOST_PEOPLE = [ { id: 'p1', name: 'DigitalRepeal', role: 'Automation & web studio', stance: 'offering', has: ['Automation', 'Design', 'Websites', 'Systems', 'AI agents'], need: ['New clients'], pct: 92, boostLevel: 'ultimate', verified: true, email: 'Digitalrepeal08@gmail.com', tagline: '120+ launches · replies within a day', logo: 'assets/logo-digitalrepeal.png' }, { id: 'p2', name: 'YS1Pro', role: 'Accounting & operations', stance: 'offering', has: ['Accounting', 'Save time'], need: ['Automation'], pct: 86, boostLevel: 'ultimate', verified: true, email: 'ilia@ys1inc.com', tagline: 'Trusted by 40 small businesses', logo: 'assets/logo-ys1.png' }, ]; /* Other boosted accounts (pro tier) shown in the grid below the featured handshake */ const BOOST_MORE = []; const BOOST_COLORS = { purple: '#8b5cf6', red: '#ef4444' }; function ColorGroup({ label, color, items }) { return (
{label} {items.map(h => ( {h} ))}
); } function ShakeEmblem() { return (
); } function BoostedCard({ p, onConnect, className, compact = false }) { return (
{!compact && p.boostLevel === 'ultimate' &&
Ultimate · Exclusive
}
{p.logo ? : }
{p.name} {p.verified && }
{p.role}
{p.pct}%
}>{p.boostLevel === 'ultimate' ? 'Ultimate' : 'Boosted'} {p.stance === 'offering' && }>Offering help}
{p.tagline && !compact &&
{p.tagline}
}
{p.has.length > 0 && } {p.need.length > 0 && !compact && }
{!compact && } {p.email && !compact && {p.email}}
); } function Partnership({ compact = false }) { const [dr, ys] = BOOST_PEOPLE; const sparks = [{ left: '12%', top: '20%', d: '0s' }, { left: '88%', top: '14%', d: '1.2s' }, { left: '58%', top: '6%', d: '2.1s' }, { left: '30%', top: '82%', d: '.6s' }, { left: '80%', top: '76%', d: '1.7s' }]; const onConnect = () => go(GO.join); const showcase = (
{sparks.map((s, i) => )}

Boosted accounts

{!compact && ⚡ Exclusive}
{!compact &&
Top-of-feed, verified, and ready to connect.
}
{!compact && BOOST_MORE.length > 0 && (
{BOOST_MORE.map(p => )}
)}
); if (compact) return
{showcase}
; return
{showcase}
; } function CTA({ t }) { const [email, setEmail] = useState(''); const [done, setDone] = useState(false); return (

{t.ctaT}

{t.ctaSub}

setEmail(e.target.value)} iconLeft={} />
{t.ctaNote}
); } function Footer({ t, lang, setLang }) { return ( ); } function EyesBg() { const ref = React.useRef(null); useEffect(() => { const canvas = ref.current; const ctx = canvas.getContext('2d'); let w, h, dpr, eyes = [], raf, last = performance.now(); const mouse = { x: window.innerWidth / 2, y: window.innerHeight * 0.4 }; const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const build = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); w = window.innerWidth; h = window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); eyes = []; const gap = Math.max(104, Math.min(168, w / 8)); for (let y = gap * 0.55; y < h + gap * 0.3; y += gap) { for (let x = gap * 0.55; x < w + gap * 0.3; x += gap) { const r = gap * 0.17 * (0.72 + Math.random() * 0.75); eyes.push({ x: x + (Math.random() - 0.5) * gap * 0.42, y: y + (Math.random() - 0.5) * gap * 0.42, r, phase: 0, blinking: false, tmr: Math.random() * 4200 }); } } }; build(); const onMove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; }; window.addEventListener('resize', build); window.addEventListener('mousemove', onMove); const draw = (now) => { const dt = Math.min(48, now - last); last = now; ctx.clearRect(0, 0, w, h); for (const e of eyes) { if (!reduced) { e.tmr -= dt; if (e.blinking) { e.phase += dt / 165; if (e.phase >= 1) { e.blinking = false; e.phase = 0; e.tmr = 1900 + Math.random() * 5200; } } else if (e.tmr <= 0) { e.blinking = true; e.phase = 0.0001; } } const open = e.blinking ? Math.abs(Math.cos(e.phase * Math.PI)) : 1; ctx.save(); ctx.translate(e.x, e.y); ctx.scale(1, Math.max(0.05, open)); ctx.beginPath(); ctx.arc(0, 0, e.r, 0, 7); ctx.fillStyle = 'rgba(247,248,255,0.95)'; ctx.fill(); ctx.lineWidth = Math.max(1, e.r * 0.07); ctx.strokeStyle = 'rgba(18,16,28,0.45)'; ctx.stroke(); ctx.restore(); if (open > 0.22) { const dx = mouse.x - e.x, dy = mouse.y - e.y, d = Math.hypot(dx, dy) || 1; const pr = e.r * 0.44, maxOff = e.r - pr - e.r * 0.07; const off = Math.min(maxOff, d); const px = e.x + dx / d * off, py = e.y + dy / d * off; ctx.beginPath(); ctx.arc(px, py, pr, 0, 7); ctx.fillStyle = 'rgba(14,12,22,0.96)'; ctx.fill(); ctx.beginPath(); ctx.arc(px - pr * 0.32, py - pr * 0.36, pr * 0.3, 0, 7); ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.fill(); } } raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', build); window.removeEventListener('mousemove', onMove); }; }, []); return ; } function DotsBomb({ density = 'balanced', size = 1.1 }) { const ref = React.useRef(null); const sizeRef = React.useRef(size); sizeRef.current = size; useEffect(() => { const canvas = ref.current; const ctx = canvas.getContext('2d'); const css = getComputedStyle(document.documentElement); const hexToRgb = (hex) => { hex = (hex || '').trim().replace('#', ''); if (hex.length === 3) hex = hex.split('').map(c => c + c).join(''); const n = parseInt(hex, 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }; const cy = hexToRgb(css.getPropertyValue('--accent-2') || '#22d3ee'); const vi = hexToRgb(css.getPropertyValue('--accent') || '#8b5cf6'); const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; let w, h, dpr, N, px, py, vx, vy, col, raf, last = performance.now(), t = 0; const FUSE = 1.8; const mouse = { x: -9999, y: -9999, present: false }; let prevX = -9999, prevY = -9999, charge = 0, armed = true, flash = 0, shockX = 0, shockY = 0; const build = () => { dpr = Math.min(window.devicePixelRatio || 1, 1.5); w = window.innerWidth; h = window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const divisor = density === 'sparse' ? 96 : density === 'dense' ? 22 : 42; const floor = density === 'sparse' ? 4000 : density === 'dense' ? 14000 : 8000; const ceil = density === 'sparse' ? 14000 : density === 'dense' ? 48000 : 28000; N = Math.min(reduced ? floor : ceil, Math.max(floor, Math.round(w * h / divisor))); px = new Float32Array(N); py = new Float32Array(N); vx = new Float32Array(N); vy = new Float32Array(N); col = new Uint8Array(N); for (let i = 0; i < N; i++) { px[i] = Math.random() * w; py[i] = Math.random() * h; vx[i] = (Math.random() - 0.5) * 0.2; vy[i] = (Math.random() - 0.5) * 0.2; col[i] = Math.random() < 0.5 ? 0 : 1; } }; build(); let down = false; const onMove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; mouse.present = true; }; const onDown = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; mouse.present = true; down = true; }; const onUp = () => { down = false; charge = 0; armed = true; }; const onLeave = () => { mouse.present = false; charge = 0; }; window.addEventListener('resize', build); window.addEventListener('mousemove', onMove); window.addEventListener('mousedown', onDown); window.addEventListener('mouseup', onUp); window.addEventListener('mouseout', onLeave); const explode = () => { shockX = mouse.x; shockY = mouse.y; flash = 1; armed = false; charge = 0; for (let i = 0; i < N; i++) { px[i] = Math.random() * w; py[i] = Math.random() * h; const dir = Math.random() < 0.5 ? -1 : 1; vx[i] = dir * (16 + Math.random() * 18); vy[i] = (Math.random() - 0.5) * 1.4; } }; const draw = (now) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt; ctx.clearRect(0, 0, w, h); // cursor speed (per frame) const charging = mouse.present && down && armed; if (charging) { charge += dt; if (charge >= FUSE) explode(); } else if (!down) charge = 0; const factor = charge / FUSE; const fric = charging ? 0.9 : 0.985; for (let i = 0; i < N; i++) { if (charging) { const dx = mouse.x - px[i], dy = mouse.y - py[i], d = Math.sqrt(dx * dx + dy * dy) + 0.01; if (d < 13) { const e = Math.random() * 4 | 0; if (e === 0) { px[i] = Math.random() * w; py[i] = -2; } else if (e === 1) { px[i] = Math.random() * w; py[i] = h + 2; } else if (e === 2) { px[i] = -2; py[i] = Math.random() * h; } else { px[i] = w + 2; py[i] = Math.random() * h; } vx[i] = 0; vy[i] = 0; continue; } const pull = 0.07 + 0.95 * factor; vx[i] += dx / d * pull - dy / d * 0.3 * factor; vy[i] += dy / d * pull + dx / d * 0.3 * factor; } else if (!reduced) { vx[i] += (Math.random() - 0.5) * 0.06; vy[i] += (Math.random() - 0.5) * 0.06; } vx[i] *= fric; vy[i] *= fric; let sp = vx[i] * vx[i] + vy[i] * vy[i]; if (sp > 1156) { sp = 34 / Math.sqrt(sp); vx[i] *= sp; vy[i] *= sp; } px[i] += vx[i]; py[i] += vy[i]; if (px[i] < 0) px[i] += w; else if (px[i] > w) px[i] -= w; if (py[i] < 0) py[i] += h; else if (py[i] > h) py[i] -= h; } // draw — two color passes const sz = sizeRef.current; ctx.globalAlpha = 0.85; ctx.fillStyle = `rgb(${cy[0]},${cy[1]},${cy[2]})`; for (let i = 0; i < N; i++) if (col[i] === 0) ctx.fillRect(px[i], py[i], sz, sz); ctx.fillStyle = `rgb(${vi[0]},${vi[1]},${vi[2]})`; for (let i = 0; i < N; i++) if (col[i] === 1) ctx.fillRect(px[i], py[i], sz, sz); ctx.globalAlpha = 1; // fuse ring on cursor if (charging && charge > 0.04) { const cr = Math.round(34 + (255 - 34) * factor), cg = Math.round(211 + (70 - 211) * factor), cb = Math.round(238 + (60 - 238) * factor); const pulse = 1 + Math.sin(t * (6 + 20 * factor)) * (0.12 + 0.18 * factor); const rad = (15 + 30 * factor) * pulse; ctx.strokeStyle = `rgba(${cr},${cg},${cb},0.85)`; ctx.lineWidth = 1.5 + 2 * factor; ctx.beginPath(); ctx.arc(mouse.x, mouse.y, rad, 0, Math.PI * 2); ctx.stroke(); ctx.strokeStyle = `rgba(${cr},${cg},${cb},0.95)`; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(mouse.x, mouse.y, rad + 6, -Math.PI / 2, -Math.PI / 2 + factor * Math.PI * 2); ctx.stroke(); ctx.fillStyle = `rgba(${cr},${cg},${cb},${0.12 + 0.25 * factor})`; ctx.beginPath(); ctx.arc(mouse.x, mouse.y, rad, 0, Math.PI * 2); ctx.fill(); } // explosion flash if (flash > 0) { const rr = (1 - flash) * Math.max(w, h) * 0.7; ctx.strokeStyle = `rgba(255,255,255,${flash * 0.6})`; ctx.lineWidth = 2 + flash * 8; ctx.beginPath(); ctx.arc(shockX, shockY, rr, 0, Math.PI * 2); ctx.stroke(); const g = ctx.createRadialGradient(shockX, shockY, 0, shockX, shockY, 120 + 200 * (1 - flash)); g.addColorStop(0, `rgba(255,255,255,${flash * 0.5})`); g.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, w, h); flash -= dt / 0.6; if (flash < 0) flash = 0; } raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', build); window.removeEventListener('mousemove', onMove); window.removeEventListener('mousedown', onDown); window.removeEventListener('mouseup', onUp); window.removeEventListener('mouseout', onLeave); }; }, [density]); return ; } function NetworkBg() { const ref = React.useRef(null); useEffect(() => { const canvas = ref.current; const ctx = canvas.getContext('2d'); let w, h, dpr, nodes = [], raf, t = 0; const mouse = { x: -9999, y: -9999, active: false }; const css = getComputedStyle(document.documentElement); const hexToRgb = (hex) => { hex = (hex || '').trim().replace('#', ''); if (hex.length === 3) hex = hex.split('').map(c => c + c).join(''); const n = parseInt(hex, 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }; const c1 = hexToRgb(css.getPropertyValue('--accent') || '#8b5cf6'); const c2 = hexToRgb(css.getPropertyValue('--accent-2') || '#22d3ee'); const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const resize = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); w = window.innerWidth; h = window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const target = Math.round(Math.min(120, Math.max(40, (w * h) / 17000))); nodes = []; for (let i = 0; i < target; i++) { const dig = Math.random() < 0.5; nodes.push({ x: Math.random() * w, y: Math.random() * h, vx: (Math.random() - 0.5) * 0.26, vy: (Math.random() - 0.5) * 0.26, r: Math.random() * 1.7 + 1.3, dig, c: dig ? c2 : c1 }); } }; resize(); const onMove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; mouse.active = true; }; const onLeave = () => { mouse.active = false; mouse.x = mouse.y = -9999; }; window.addEventListener('resize', resize); window.addEventListener('mousemove', onMove); window.addEventListener('mouseout', onLeave); const LINK = 134, MR = 215; const draw = () => { ctx.clearRect(0, 0, w, h); t += 16; for (const n of nodes) { if (!reduced) { n.x += n.vx; n.y += n.vy; } if (n.x < -20) n.x = w + 20; if (n.x > w + 20) n.x = -20; if (n.y < -20) n.y = h + 20; if (n.y > h + 20) n.y = -20; if (mouse.active) { const dx = mouse.x - n.x, dy = mouse.y - n.y, d = Math.hypot(dx, dy); if (d < MR && d > 0.01) { const f = (1 - d / MR) * 0.05; n.vx += dx / d * f; n.vy += dy / d * f; } } n.vx *= 0.984; n.vy *= 0.984; } for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const a = nodes[i], b = nodes[j], dx = a.x - b.x, dy = a.y - b.y, d = Math.hypot(dx, dy); if (d < LINK) { const cross = a.dig !== b.dig; const o = (1 - d / LINK) * (cross ? 0.72 : 0.24); ctx.strokeStyle = cross ? `rgba(202,209,255,${o})` : `rgba(${a.c[0]},${a.c[1]},${a.c[2]},${o})`; ctx.lineWidth = cross ? 1.3 : 0.9; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); if (cross && d < LINK * 0.5) { const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2, pulse = 1.5 + Math.sin(t * 0.005 + a.x * 0.05) * 0.7; ctx.fillStyle = `rgba(255,255,255,${o})`; ctx.beginPath(); ctx.arc(mx, my, pulse, 0, 7); ctx.fill(); } } } } if (mouse.active) { for (const n of nodes) { const dx = mouse.x - n.x, dy = mouse.y - n.y, d = Math.hypot(dx, dy); if (d < MR) { const o = (1 - d / MR) * 0.8; ctx.strokeStyle = `rgba(${c2[0]},${c2[1]},${c2[2]},${o})`; ctx.lineWidth = 1.1; ctx.beginPath(); ctx.moveTo(mouse.x, mouse.y); ctx.lineTo(n.x, n.y); ctx.stroke(); } } ctx.fillStyle = `rgba(${c2[0]},${c2[1]},${c2[2]},0.95)`; ctx.beginPath(); ctx.arc(mouse.x, mouse.y, 3.4, 0, 7); ctx.fill(); } for (const n of nodes) { ctx.fillStyle = `rgba(${n.c[0]},${n.c[1]},${n.c[2]},0.95)`; if (n.dig) { const s = n.r * 1.7; ctx.fillRect(n.x - s / 2, n.y - s / 2, s, s); } else { ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, 7); ctx.fill(); } } raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseout', onLeave); }; }, []); return ; } // Vectorized "businessman holding a glowing brain" — reconstructed entirely from glowing // dots that trace the silhouette (a reference image is used only as a luminance mask; the // photo is never drawn). The figure is a crisp static dot-field; the brain is a live particle // system you can click to zoom into and detonate. Golden dust on black. function BrainScene() { const ref = React.useRef(null); useEffect(() => { const canvas = ref.current; const ctx = canvas.getContext('2d'); const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; let w, h, dpr, raf, last = performance.now(), t = 0; let buffer = null, dots = [], sparks = []; let N = 0, hx, hy, px, py, vx, vy, pal; let BX = 0, BY = 0, BRAD = 120; let phase = 'idle', phaseT = 0, cam = 1, flash = 0, core = 0.2; const ZOOM_DUR = 2.0, ZMAX = 2.7, BURST_DUR = 1.0, HOLD_DUR = 1.8, SETTLE_DUR = 2.4; const img = new Image(); let imgReady = false; img.onload = () => { imgReady = true; build(); }; img.src = 'assets/brainman-ref.png'; const COL = [[150, 92, 34], [205, 132, 52], [240, 176, 92], [255, 214, 150], [255, 244, 222]]; const bucket = (L, g) => (g > 42 || L > 232) ? 4 : L > 188 ? 3 : L > 140 ? 2 : L > 92 ? 1 : 0; const BR = { x0: 0.03, x1: 0.42, y0: 0.45, y1: 0.72 }; const buildScene = () => { dots = []; if (!imgReady || !img.naturalWidth) { buffer = null; N = 0; return; } const OW = 420, OH = Math.round(OW * img.naturalHeight / img.naturalWidth); const oc = document.createElement('canvas'); oc.width = OW; oc.height = OH; const o = oc.getContext('2d'); o.drawImage(img, 0, 0, OW, OH); let d; try { d = o.getImageData(0, 0, OW, OH).data; } catch (e) { return; } const lum = new Float32Array(OW * OH); for (let i = 0; i < OW * OH; i++) { const k = i * 4; lum[i] = 0.299 * d[k] + 0.587 * d[k + 1] + 0.114 * d[k + 2]; } const SH = Math.min(h * 0.98, 1240), SW = SH * (OW / OH); const sx0 = w - SW - w * 0.10, sy0 = (h - SH) * 0.5 + 16; const mapX = (ox) => sx0 + (ox / OW) * SW, mapY = (oy) => sy0 + (oy / OH) * SH; const buf = document.createElement('canvas'); buf.width = w; buf.height = h; const bc = buf.getContext('2d'); bc.globalCompositeOperation = 'lighter'; const BH = []; let bx = 0, by = 0, bn = 0; const bx0 = OW * BR.x0, bx1 = OW * BR.x1, by0 = OH * BR.y0, by1 = OH * BR.y1; for (let oy = 0; oy < OH; oy++) { for (let ox = 0; ox < OW; ox++) { const i = oy * OW + ox, L = lum[i]; if (L < 14) continue; const lx = ox < OW - 1 ? lum[i + 1] : L, ly = oy < OH - 1 ? lum[i + OW] : L; const g = Math.abs(L - lx) + Math.abs(L - ly); const inBrain = ox >= bx0 && ox <= bx1 && oy >= by0 && oy <= by1; const pe = Math.min(1, (L / 255) * 0.55 + g / 80); if (Math.random() > pe * (reduced ? 0.6 : (inBrain ? 1.0 : 0.98))) continue; const c = bucket(L, g); const x = mapX(ox + Math.random()), y = mapY(oy + Math.random()); if (inBrain && L > 40) { BH.push(x, y, c); bx += x; by += y; bn++; } else { const sz = c === 4 ? 1.9 : c >= 2 ? 1.5 : 1.2; const cc = COL[c]; bc.fillStyle = 'rgba(' + cc[0] + ',' + cc[1] + ',' + cc[2] + ',' + (0.5 + 0.45 * (c / 4)) + ')'; bc.fillRect(x, y, sz, sz); if (c >= 3 && dots.length < 2200 && Math.random() < 0.22) dots.push([x, y]); } } } buffer = buf; if (bn > 0) { BX = bx / bn; BY = by / bn; BRAD = SW * 0.22; } N = BH.length / 3; hx = new Float32Array(N); hy = new Float32Array(N); px = new Float32Array(N); py = new Float32Array(N); vx = new Float32Array(N); vy = new Float32Array(N); pal = new Uint8Array(N); for (let i = 0; i < N; i++) { hx[i] = BH[i * 3]; hy[i] = BH[i * 3 + 1]; px[i] = hx[i]; py[i] = hy[i]; pal[i] = BH[i * 3 + 2]; } }; const buildSparks = () => { sparks = []; const n = reduced ? 380 : 900; for (let i = 0; i < n; i++) { sparks.push({ x: Math.random() * w, y: Math.random() * h, ph: Math.random() * 6.283, sp: 0.4 + Math.random() * 1.1, r: 0.6 + Math.random() * 1.4, dx: (Math.random() - 0.5) * 0.12, dy: -0.05 - Math.random() * 0.12, c: COL[2 + (Math.random() * 3 | 0)], }); } }; const build = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); w = window.innerWidth; h = window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); buildScene(); buildSparks(); }; build(); const onResize = () => build(); const onDown = (e) => { if (phase !== 'idle' || reduced || !N) return; if (e.target && e.target.closest && e.target.closest('button,a,input,textarea,select,label,[role="button"]')) return; phase = 'zoom'; phaseT = 0; }; window.addEventListener('resize', onResize); window.addEventListener('mousedown', onDown); const easeIn = (x) => x * x * x; const burst = () => { phase = 'burst'; phaseT = 0; flash = 1; cam = 1; const big = Math.max(w, h) * 0.05; for (let i = 0; i < N; i++) { const ang = Math.atan2(hy[i] - BY, hx[i] - BX) + (Math.random() - 0.5) * 1.1, sp = 5 + Math.random() * big; vx[i] = Math.cos(ang) * sp; vy[i] = Math.sin(ang) * sp; } }; const draw = (now) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); ctx.globalCompositeOperation = 'lighter'; if (phase === 'zoom') { phaseT += dt; const p = Math.min(1, phaseT / ZOOM_DUR); cam = 1 + (ZMAX - 1) * easeIn(p); core = 0.2 + 0.8 * p; if (p >= 1) burst(); } else if (phase === 'burst') { phaseT += dt; if (phaseT >= BURST_DUR) { phase = 'hold'; phaseT = 0; try { window.dispatchEvent(new CustomEvent('brain-burst')); } catch (e) {} } } else if (phase === 'hold') { phaseT += dt; core = 0; if (phaseT >= HOLD_DUR) { phase = 'settle'; phaseT = 0; } } else if (phase === 'settle') { phaseT += dt; const p = Math.min(1, phaseT / SETTLE_DUR); cam = 1; core = 0.2 + 0.8 * (1 - p); if (p >= 1) { phase = 'idle'; phaseT = 0; core = 0.2; } } else { core = 0.2 + 0.12 * Math.sin(t * 1.4); } if (flash > 0) { flash -= dt / 0.5; if (flash < 0) flash = 0; } const pulse = 0.5 + 0.5 * Math.sin(t * 1.3); const halo = ctx.createRadialGradient(BX, BY, 0, BX, BY, BRAD * 1.9); halo.addColorStop(0, 'rgba(255,206,130,' + (0.15 + 0.10 * pulse + 0.25 * core) + ')'); halo.addColorStop(0.5, 'rgba(190,120,50,0.06)'); halo.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = halo; ctx.fillRect(0, 0, w, h); if (buffer) { const figA = (phase === 'zoom' || phase === 'burst' || phase === 'hold') ? 0.5 : 1; ctx.globalAlpha = figA * (0.84 + 0.16 * (0.5 + 0.5 * Math.sin(t * 0.8))); ctx.drawImage(buffer, 0, 0, w, h); ctx.globalAlpha = 1; } const drifting = phase === 'burst' || phase === 'hold'; const fric = phase === 'burst' ? 0.95 : phase === 'hold' ? 0.97 : 0.7; const k = phase === 'settle' ? 0.06 : phase === 'zoom' ? 0.2 : 0.14; const jit = phase === 'idle' ? 0.35 : phase === 'zoom' ? 0.7 : phase === 'hold' ? 0.2 : 0; for (let i = 0; i < N; i++) { if (drifting) { vx[i] += (Math.random() - 0.5) * jit; vy[i] += (Math.random() - 0.5) * jit; vx[i] *= fric; vy[i] *= fric; px[i] += vx[i]; py[i] += vy[i]; continue; } vx[i] += (hx[i] - px[i]) * k; vy[i] += (hy[i] - py[i]) * k; if (jit) { vx[i] += (Math.random() - 0.5) * jit; vy[i] += (Math.random() - 0.5) * jit; } vx[i] *= fric; vy[i] *= fric; px[i] += vx[i]; py[i] += vy[i]; } const sz = cam > 1.8 ? 2.1 : 1.5; for (let p = 0; p < COL.length; p++) { const cc = COL[p]; ctx.fillStyle = 'rgb(' + cc[0] + ',' + cc[1] + ',' + cc[2] + ')'; const ss = p === 4 ? sz + 0.5 : sz; for (let i = 0; i < N; i++) { if (pal[i] !== p) continue; const x = BX + (px[i] - BX) * cam, y = BY + (py[i] - BY) * cam; if (x < -4 || x > w + 4 || y < -4 || y > h + 4) continue; ctx.fillRect(x, y, ss, ss); } } const glowR = BRAD * 0.45 * (0.5 + 0.9 * core) * (phase === 'zoom' ? cam : 1); const gi = ctx.createRadialGradient(BX, BY, 0, BX, BY, glowR); gi.addColorStop(0, 'rgba(255,242,214,' + (0.1 + 0.4 * core) + ')'); gi.addColorStop(0.4, 'rgba(245,176,82,' + (0.08 + 0.24 * core) + ')'); gi.addColorStop(1, 'rgba(20,12,4,0)'); ctx.fillStyle = gi; ctx.beginPath(); ctx.arc(BX, BY, glowR, 0, 7); ctx.fill(); if (!reduced && dots.length) { for (let i = 0; i < 70; i++) { const pp = dots[(Math.random() * dots.length) | 0]; ctx.fillStyle = 'rgba(255,246,224,' + (0.3 + 0.7 * Math.random()) + ')'; const s = 1 + Math.random() * 1.6; ctx.fillRect(pp[0], pp[1], s, s); } } for (let i = 0; i < sparks.length; i++) { const s = sparks[i]; s.x += s.dx; s.y += s.dy; if (s.y < -4) { s.y = h + 4; s.x = Math.random() * w; } if (s.x < -4) s.x = w + 4; else if (s.x > w + 4) s.x = -4; const a = 0.12 + 0.5 * (0.5 + 0.5 * Math.sin(t * s.sp + s.ph)); ctx.fillStyle = 'rgba(' + s.c[0] + ',' + s.c[1] + ',' + s.c[2] + ',' + a + ')'; ctx.fillRect(s.x, s.y, s.r, s.r); } if (flash > 0) { const gg = ctx.createRadialGradient(BX, BY, 0, BX, BY, 140 + 520 * (1 - flash)); gg.addColorStop(0, 'rgba(255,244,222,' + (flash * 0.6) + ')'); gg.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = gg; ctx.fillRect(0, 0, w, h); ctx.strokeStyle = 'rgba(255,224,168,' + (flash * 0.45) + ')'; ctx.lineWidth = 2 + flash * 8; ctx.beginPath(); ctx.arc(BX, BY, (1 - flash) * Math.max(w, h) * 0.5, 0, 7); ctx.stroke(); } ctx.globalCompositeOperation = 'source-over'; raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); window.removeEventListener('mousedown', onDown); }; }, []); return ; } // Reactive brain hero — photoreal render + gold-dust particle canvas (cursor light-web, // parallax, brain flare on hover). Scoped behind the hero content, first viewport only. function ReactiveHero() { const imgRef = React.useRef(null); const cvRef = React.useRef(null); useEffect(() => { const cv = cvRef.current, ctx = cv.getContext('2d'), imgEl = imgRef.current; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const CONFIG = { brain: { x: 0.275, y: 0.58 }, imgNatural: { w: 1024, h: 1535 }, particles: 95, gold: ['#ffe6ad', '#ffcf7a', '#f5b942', '#d4862a'], driftSpeed: 0.20, parallaxImg: 14, parallaxDust: 34, cursorRadius: 140, brainPulse: 0.55, brainGlow: 200, }; const isMobile = window.matchMedia('(max-width:760px)').matches; let W = 0, H = 0, DPR = 1, P = [], raf = 0, running = true, t = 0; const sparks = []; const mouse = { x: -9999, y: -9999, tx: -9999, ty: -9999, active: false }; const par = { x: 0, y: 0, tx: 0, ty: 0 }; let _seed = 1234.5678; const fr = () => { _seed = (_seed * 9301 + 49297) % 233280; return _seed / 233280; }; const rand = (a, b) => a + (b - a) * fr(); const hexA = (hex, a) => { const n = parseInt(hex.slice(1), 16); return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + a + ')'; }; function brainScreen() { const r = imgEl.getBoundingClientRect(); const nw = CONFIG.imgNatural.w, nh = CONFIG.imgNatural.h; const scale = isMobile ? Math.min(r.width / nw, r.height / nh) : Math.max(r.width / nw, r.height / nh); const dispW = nw * scale, dispH = nh * scale; const offX = r.left + (r.width - dispW) / 2, offY = r.top + (r.height - dispH) / 2; return { x: offX + CONFIG.brain.x * dispW, y: offY + CONFIG.brain.y * dispH }; } function buildParticles() { const n = isMobile ? Math.round(CONFIG.particles * 0.45) : CONFIG.particles; P = []; const b = brainScreen(); for (let i = 0; i < n; i++) { const core = i < n * 0.45; const x = core ? b.x + rand(-W * 0.18, W * 0.30) : rand(0, W); const y = core ? b.y + rand(-H * 0.32, H * 0.30) : rand(0, H); P.push({ x, y, r: rand(0.5, core ? 2.4 : 1.8), a: rand(0.15, core ? 0.9 : 0.55), tw: rand(0, 6.28), tws: rand(0.6, 1.8), vx: rand(-0.4, 0.4), vy: rand(-0.45, 0.2), c: CONFIG.gold[(i * 7) % CONFIG.gold.length] }); } } function resize() { DPR = Math.min(2, window.devicePixelRatio || 1); W = window.innerWidth; H = window.innerHeight; cv.width = W * DPR; cv.height = H * DPR; cv.style.width = W + 'px'; cv.style.height = H + 'px'; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); buildParticles(); } function frame() { if (!running) return; t += 0.016; par.x += (par.tx - par.x) * 0.06; par.y += (par.ty - par.y) * 0.06; mouse.x += (mouse.tx - mouse.x) * 0.18; mouse.y += (mouse.ty - mouse.y) * 0.18; if (imgEl) imgEl.style.transform = 'translate(' + par.x + 'px,' + par.y + 'px)'; ctx.clearRect(0, 0, W, H); ctx.globalCompositeOperation = 'lighter'; const b = brainScreen(); const dB = Math.hypot(mouse.x - b.x, mouse.y - b.y); const near = mouse.active ? Math.max(0, 1 - dB / 280) : 0; const pulse = 0.5 + 0.5 * Math.sin(t * 1.4); const intensity = (0.45 + CONFIG.brainPulse * pulse * 0.55) + near * 0.9; const R = CONFIG.brainGlow * (0.85 + 0.15 * pulse + near * 0.5); const g = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, R); g.addColorStop(0, hexA('#ffe6ad', Math.min(0.6, 0.22 * intensity))); g.addColorStop(0.4, hexA('#f5b942', Math.min(0.4, 0.14 * intensity))); g.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(b.x, b.y, R, 0, 6.2832); ctx.fill(); if (near > 0.55 && (t % 0.12) < 0.016) { for (let k = 0; k < 2; k++) sparks.push({ x: b.x + rand(-40, 40), y: b.y + rand(-30, 30), vx: rand(-0.4, 0.4), vy: rand(-1.4, -0.5), life: 1, c: CONFIG.gold[k % CONFIG.gold.length] }); } const dustOffX = (mouse.active ? (mouse.x / W - 0.5) : 0) * -CONFIG.parallaxDust; const dustOffY = (mouse.active ? (mouse.y / H - 0.5) : 0) * -CONFIG.parallaxDust; for (const p of P) { p.x += p.vx * CONFIG.driftSpeed; p.y += p.vy * CONFIG.driftSpeed; if (p.x < -20) p.x = W + 20; if (p.x > W + 20) p.x = -20; if (p.y < -20) p.y = H + 20; if (p.y > H + 20) p.y = -20; const sx = p.x + dustOffX, sy = p.y + dustOffY; let a = p.a * (0.6 + 0.4 * Math.sin(t * p.tws + p.tw)); if (mouse.active) { const d = Math.hypot(sx - mouse.x, sy - mouse.y); if (d < CONFIG.cursorRadius) { const f = 1 - d / CONFIG.cursorRadius; a = Math.min(1, a + f * 0.7); p.x += (mouse.x - sx) * 0.012 * f; p.y += (mouse.y - sy) * 0.012 * f; ctx.strokeStyle = hexA('#ffcf7a', f * 0.16); ctx.lineWidth = 0.6; ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); } } ctx.fillStyle = hexA(p.c, a); ctx.beginPath(); ctx.arc(sx, sy, p.r, 0, 6.2832); ctx.fill(); } for (let i = sparks.length - 1; i >= 0; i--) { const s = sparks[i]; s.x += s.vx; s.y += s.vy; s.vy += 0.01; s.life -= 0.02; if (s.life <= 0) { sparks.splice(i, 1); continue; } ctx.fillStyle = hexA(s.c, s.life * 0.9); ctx.beginPath(); ctx.arc(s.x, s.y, 1.6 * s.life + 0.4, 0, 6.2832); ctx.fill(); } ctx.globalCompositeOperation = 'source-over'; raf = requestAnimationFrame(frame); } function staticFrame() { ctx.clearRect(0, 0, W, H); ctx.globalCompositeOperation = 'lighter'; const b = brainScreen(); const g = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, CONFIG.brainGlow); g.addColorStop(0, hexA('#ffe6ad', 0.18)); g.addColorStop(0.4, hexA('#f5b942', 0.1)); g.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(b.x, b.y, CONFIG.brainGlow, 0, 6.2832); ctx.fill(); for (const p of P) { ctx.fillStyle = hexA(p.c, p.a * 0.7); ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 6.2832); ctx.fill(); } ctx.globalCompositeOperation = 'source-over'; } function setMouse(x, y) { mouse.tx = x; mouse.ty = y; mouse.active = true; par.tx = (x / W - 0.5) * -CONFIG.parallaxImg; par.ty = (y / H - 0.5) * -CONFIG.parallaxImg; } const onMove = (e) => setMouse(e.clientX, e.clientY); const onTouch = (e) => { const t0 = e.touches[0]; if (t0) setMouse(t0.clientX, t0.clientY); }; const onLeave = () => { mouse.active = false; par.tx = 0; par.ty = 0; }; const onVis = () => { if (reduce) return; if (document.hidden) { running = false; cancelAnimationFrame(raf); } else if (!running) { running = true; raf = requestAnimationFrame(frame); } }; window.addEventListener('mousemove', onMove); window.addEventListener('touchmove', onTouch, { passive: true }); window.addEventListener('mouseleave', onLeave); window.addEventListener('resize', resize); document.addEventListener('visibilitychange', onVis); resize(); if (reduce) { staticFrame(); } else { raf = requestAnimationFrame(frame); } return () => { cancelAnimationFrame(raf); running = false; window.removeEventListener('mousemove', onMove); window.removeEventListener('touchmove', onTouch); window.removeEventListener('mouseleave', onLeave); window.removeEventListener('resize', resize); document.removeEventListener('visibilitychange', onVis); }; }, []); return (
); } function Page() { const [lang, setLang] = useState(() => localStorage.getItem('helpty-lang') || 'EN'); useEffect(() => { localStorage.setItem('helpty-lang', lang); }, [lang]); const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); // Mood — recolor the entire site by driving the accent token trio useEffect(() => { const s = document.documentElement.style, m = tw.mood || MOOD_SWATCHES[0]; s.setProperty('--accent', m[0]); s.setProperty('--accent-2', m[1]); s.setProperty('--accent-strong', m[2]); }, [tw.mood]); // Material — reshape every surface (glass / solid / outline) site-wide useEffect(() => { const s = document.documentElement.style, keys = ['--surface-glass', '--surface-glass-strong', '--surface-glass-hover', '--glass-blur', '--border-glass']; const set = MATERIAL_TOKENS[tw.material]; keys.forEach((k) => set && set[k] != null ? s.setProperty(k, set[k]) : s.removeProperty(k)); }, [tw.material]); const [showMatches, setShowMatches] = useState(false); useEffect(() => { let tmr; const onBurst = () => { setShowMatches(true); clearTimeout(tmr); tmr = setTimeout(() => setShowMatches(false), 2000); }; window.addEventListener('brain-burst', onBurst); return () => { window.removeEventListener('brain-burst', onBurst); clearTimeout(tmr); }; }, []); const t = T[lang] || T.EN; return (
{tw.atmosphere === 'charged' && } {tw.atmosphere === 'network' && }
setTweak('atmosphere', v)} /> {tw.atmosphere === 'charged' && ( <> setTweak('dotDensity', v)} /> setTweak('dotSize', v)} /> )} setTweak('mood', v)} /> setTweak('material', v)} />
); } ReactDOM.createRoot(document.getElementById('root')).render();