/* global React */ const { useState, useEffect, useRef } = React; /* ============ DATA ============ */ const PACKAGES_TIERRA = [ { id: "lumen", name: "LUMEN", price: "195,000", currency: "CRC", tagline: "Despertar creativo · Punto de entrada", tier: "LOW", line: "TIERRA", description: "El primer destello. La musa llega y te muestra la luz. Ideal para creadores que están empezando a darle forma cinematográfica a su marca o evento.", includes: [ "Pre-producción ligera · Brief + moodboard", "1 día de rodaje en locación", "Edición principal · 1 video master 60-90s", "Color grading cinematográfico base", "2 rondas de revisión", "Entrega en 4K · 14 días hábiles"], popular: false }, { id: "anima", name: "ÁNIMA", price: "380,000", currency: "CRC", tagline: "Inspiración con alma · Sweet spot", tier: "MEDIUM", line: "TIERRA", description: "Cuando la musa ya no solo ilumina — le da alma a tu obra. El paquete donde la mayoría encuentra su lenguaje cinematográfico. Producción completa, narrativa con respiración propia.", includes: [ "Pre-producción completa · Concepto + storyboard", "2 días de rodaje · Multi-locación", "Edición narrativa · 1 master + 3 cortes sociales", "Color grading premium · LUT propio", "Sound design original", "3 rondas de revisión", "Entrega en 4K · 21 días hábiles"], popular: true }, { id: "olimpo", name: "OLIMPO", price: "780,000", currency: "CRC", tagline: "La morada de las musas · Premium", tier: "HIGH", line: "TIERRA", description: "El nivel donde la musa habita contigo. Producción integral, equipo completo, dirección creativa total. Para marcas y eventos que necesitan posicionarse al nivel de los grandes.", includes: [ "Dirección creativa total · Concepto + guion", "3-5 días de rodaje · Equipo completo", "Edición + post extendida · Master + 6 versiones", "Color grading premium + VFX ligeros", "Score / sound design original a medida", "Revisiones ilimitadas dentro de scope", "Entrega en 4K/6K · 30 días hábiles"], popular: false }]; const PACKAGES_WORLD = [ { id: "wander", name: "WANDER", price: "750", currency: "USD", tagline: "The muse who wanders · Entry tier", tier: "LOW", line: "WORLD", description: "The first wandering of the muse. A starting point for international brands or creators ready to build their cinematic identity from the ground up.", includes: [ "Light pre-production · Brief + moodboard", "1 day shoot · Single location", "1 master cut · 60-90s", "Cinematic base grade", "2 rounds of revisions", "4K delivery · 14 business days"], popular: false }, { id: "soul", name: "SOUL", price: "2,500", currency: "USD", tagline: "The muse becomes soul · Sweet spot", tier: "MEDIUM", line: "WORLD", description: "Where the muse becomes soul. Most international clients find their language here — fully produced narrative, original sound, the cinematic depth a serious brand demands.", includes: [ "Full pre-production · Concept + storyboard", "2-day shoot · Multi-location", "Master cut + 3 social cuts", "Premium color grade · custom LUT", "Original sound design", "3 rounds of revisions", "4K delivery · 21 business days"], popular: false }, { id: "eternal", name: "ETERNAL", price: "5,500", currency: "USD", tagline: "The muse turns eternal · Premium", tier: "HIGH", line: "WORLD", description: "The level where the muse turns eternal. End-to-end creative direction, full crew, no compromise. Built for brands that intend to be remembered.", includes: [ "Total creative direction · Concept + script", "3-5 day shoot · Full crew", "Extended edit · Master + 6 versions", "Premium grade + light VFX", "Custom score / sound design", "Unlimited revisions within scope", "4K/6K delivery · 30 business days"], popular: false }]; const PORTFOLIO = [ { name: "Daddy Yankee", emWord: "Yankee", kind: "Concierto", year: "2023", loc: "San José · CR", frame: "Farewell Tour", format: "6K · ARRI", brand: "Cartel de Estrellas · Live Nation", role: "Cinematografía multi-cámara · Edit highlights", story: "Cobertura del cierre del tour mundial en suelo costarricense. Multi-cam con switching en vivo, drone seguimiento y aftermovie editorial entregado en 72h. La cámara estuvo donde el público gritaba más fuerte.", bullets: ["3 cámaras cine A-cam + 2 mobile", "Aftermovie 90s · entrega 72h", "Sound design + mezcla a tiempo", "Master HDR + 4 cortes vertical"], link: "https://wa.me/50670470555" }, { name: "Danny Ocean", emWord: "Ocean", kind: "Concierto", year: "2023", loc: "San José · CR", frame: "Antídoto", format: "4K · CINE", brand: "Ocean Music · Promotor regional", role: "Dirección de cámara · Color grading", story: "Tour latinoamericano. Captura cinematográfica con ópticas anamórficas, look development definido en pre-producción. Cada show editado como pieza independiente con identidad visual única.", bullets: ["Ópticas anamórficas 2.39:1", "Color grading propio · LUT BWAY", "Edit narrativo por canción", "Delivery social + master archivo"], link: "https://wa.me/50670470555" }, { name: "Flowfest", emWord: "Flowfest", kind: "Festival", year: "2024", loc: "Costa Rica", frame: "Front Row", format: "8K · MULTICAM", brand: "Flowfest · Producción festival", role: "Aftermovie principal · Highlights por artista", story: "El festival de música urbana más grande del país. Cobertura simultánea de 3 escenarios, equipo de 8 operadores. Aftermovie principal de 2 minutos + un highlight personalizado por cada headliner.", bullets: ["8 operadores en simultáneo", "8K front + 4K running", "Edit por escenario + master", "Tiempo de entrega: 5 días"], link: "https://wa.me/50670470555" }, { name: "Ocaso", emWord: "Ocaso", kind: "Festival", year: "2024", loc: "Playa Hermosa", frame: "Golden Hour", format: "4K · ANAMORPHIC", brand: "Ocaso Festival · Boutique brand", role: "Cinematografía hora dorada · Color editorial", story: "Festival boutique de electrónica en playa. Concepto visual construido alrededor de la golden hour. Movimiento de cámara meditativo, color grading saturado tipo film. Lookbook para la edición 2025.", bullets: ["Captura golden hour exclusiva", "Look film 35mm emulado", "Gimbal + drone hora azul", "Lookbook + reel principal"], link: "https://wa.me/50670470555" }, { name: "Ritvales", emWord: "Ritvales", kind: "Internacional", year: "2024", loc: "LATAM Tour", frame: "Archivo", format: "6K · MOBILE", brand: "Ritvales Records · Sello LATAM", role: "Documental de gira · Behind the scenes", story: "Documentación de gira por 6 países. Unidad ligera, formato vertical y horizontal. Material editado en serie de 8 episodios cortos para plataformas más documental largo en pos-producción.", bullets: ["6 países · 14 ciudades", "Unidad compacta full-frame", "Serie 8 episodios + largo", "Master para festivales 2025"], link: "https://wa.me/50670470555" }]; /* ============ HOOKS ============ */ function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.15, rootMargin: "0px 0px -60px 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } function useScrolled(threshold = 50) { const [s, setS] = useState(false); useEffect(() => { const onScroll = () => setS(window.scrollY > threshold); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, [threshold]); return s; } function useScrollY() { const [y, setY] = useState(0); useEffect(() => { let raf = null; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { setY(window.scrollY); raf = null; }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return y; } // Respect users that prefer reduced motion — kills JS-driven motion globally const REDUCED_MOTION = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; // Precision pointer (desktop) — gates cursor-aware depth and smooth scroll const FINE_POINTER = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(pointer: fine)").matches; // V2 — Lenis inertial scroll. Drives native scroll, so every existing // rAF/scroll-listener system keeps working untouched. Motion-safe only. if (!REDUCED_MOTION && FINE_POINTER && typeof Lenis !== "undefined") { // Block Lenis from treating hash routes (#/login, #/dashboard/...) as // in-page anchors — `#/login` is not a valid querySelector. Intercept the // click in capture phase so Lenis never sees it; let the hash change // naturally so the hash-router responds. document.addEventListener("click", (ev) => { const a = ev.target.closest && ev.target.closest("a[href^='#/']"); if (!a) return; ev.stopPropagation(); window.location.hash = a.getAttribute("href").slice(1); ev.preventDefault(); }, true); const lenis = new Lenis({ duration: 1.9, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -12 * t)), smoothWheel: true, wheelMultiplier: 0.78, touchMultiplier: 1.4, lerp: 0.065, syncTouch: true, anchors: { offset: -20 }, }); const lenisRaf = (time) => { lenis.raf(time); requestAnimationFrame(lenisRaf); }; requestAnimationFrame(lenisRaf); // Expose so dashboard.jsx can stop/start Lenis when its overlay mounts. // Lenis hijacks wheel events globally — if it runs during dashboard the // .dash-main scroll appears frozen. window.bwayLenis = lenis; // --------------------------------------------------------- // Global scroll-driven reveal observer. // Any element with [data-reveal] (and its children with [data-stagger]) // animate in when entering the viewport. Drives the "every element has // its own scroll animation" feel without rewriting every component. // --------------------------------------------------------- const seen = new WeakSet(); const revealObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting && !seen.has(entry.target)) { seen.add(entry.target); entry.target.classList.add("is-in"); // Stagger children const kids = entry.target.querySelectorAll("[data-stagger]"); kids.forEach((k, i) => { k.style.setProperty("--stagger-i", i); requestAnimationFrame(() => k.classList.add("is-in")); }); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }); function bindReveals() { document.querySelectorAll("[data-reveal]:not(.reveal-bound)").forEach((el) => { el.classList.add("reveal-bound"); revealObserver.observe(el); }); } // Auto-tag every direct section so they reveal naturally even without explicit data-reveal. function autoTagSections() { document.querySelectorAll("section:not([data-reveal]):not(.bn-hero):not(.bway-showroom)").forEach((s) => { s.setAttribute("data-reveal", "auto"); }); } // Run once on mount + observe DOM additions setTimeout(() => { autoTagSections(); bindReveals(); }, 100); const mutationObserver = new MutationObserver(() => bindReveals()); mutationObserver.observe(document.body, { childList: true, subtree: true }); // --------------------------------------------------------- // Scroll-velocity-driven body class. Lets CSS react to fast vs slow scroll. // --------------------------------------------------------- let lastY = window.scrollY; let lastT = performance.now(); let velRaf; function tickVel() { const y = window.scrollY; const t = performance.now(); const dy = Math.abs(y - lastY); const dt = Math.max(1, t - lastT); const v = dy / dt; document.body.classList.toggle("is-scrolling-fast", v > 1.2); lastY = y; lastT = t; velRaf = requestAnimationFrame(tickVel); } velRaf = requestAnimationFrame(tickVel); } // Smoothed scroll velocity (px/frame, signed). Drives skew / inertia effects. function useScrollVelocity() { const [v, setV] = useState(0); useEffect(() => { if (REDUCED_MOTION) return; let lastY = window.scrollY; let vel = 0; let raf; let idle = 0; const tick = () => { const y = window.scrollY; const dy = y - lastY; lastY = y; // low-pass filter → buttery, no jitter vel += (dy - vel) * 0.12; if (Math.abs(dy) < 0.1) idle++; else idle = 0; if (Math.abs(vel) < 0.05 && idle > 30) vel = 0; setV(vel); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return v; } function useTimecode() { const [tc, setTc] = useState("00:00:00:00"); useEffect(() => { const start = Date.now(); const i = setInterval(() => { const t = Math.floor((Date.now() - start) / 1000); const h = String(Math.floor(t / 3600)).padStart(2, "0"); const m = String(Math.floor(t % 3600 / 60)).padStart(2, "0"); const s = String(t % 60).padStart(2, "0"); const f = String(Math.floor((Date.now() - start) % 1000 / 41.66)).padStart(2, "0"); setTc(`${h}:${m}:${s}:${f}`); }, 80); return () => clearInterval(i); }, []); return tc; } /* ============ COMPONENTS ============ */ function useLoadingProgress(duration = 2700) { const [count, setCount] = useState(0); const [done, setDone] = useState(false); useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / duration); setCount(Math.floor(t * 100)); if (t < 1) raf = requestAnimationFrame(tick); else setTimeout(() => setDone(true), 400); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [duration]); return [count, done]; } function LoadingScreen({ onComplete }) { const [count, done] = useLoadingProgress(2700); const words = ["Invocar", "Canalizar", "Eternizar"]; const [wIdx, setWIdx] = useState(0); useEffect(() => { const i = setInterval(() => setWIdx((w) => (w + 1) % words.length), 900); return () => clearInterval(i); }, []); useEffect(() => { if (done) onComplete?.(); }, [done, onComplete]); return (
BWAY · PROD / EST. 2019
{words.map((w, i) => {w} )}
{String(count).padStart(3, "0")}
SAN JOSÉ · COSTA RICA RITUAL CINEMATOGRÁFICO
); } function Nav() { const scrolled = useScrolled(60); return ( ); } /* ============ FUTURE LAYER ============ */ // Floating gold dust — canvas particle field with mouse + scroll depth parallax. // Sits between the bg video and the content, like dust caught in a projector beam. function GoldDust() { const canvasRef = useRef(null); useEffect(() => { if (REDUCED_MOTION) return; const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const dpr = Math.min(2, window.devicePixelRatio || 1); let W = 0, H = 0; let parts = []; let mx = 0.5, my = 0.5; // raw mouse (0..1) let smx = 0.5, smy = 0.5; // smoothed mouse let raf; const resize = () => { 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 N = window.innerWidth < 768 ? 28 : 64; const seed = () => { parts = Array.from({ length: N }, () => { const depth = 0.25 + Math.random() * 0.75; // 0.25 far → 1 near return { x: Math.random(), y: Math.random(), depth, r: 0.6 + depth * 1.8, vy: (0.06 + Math.random() * 0.1) * depth, // slow upward drift ph: Math.random() * Math.PI * 2, // sway phase tw: 0.5 + Math.random() * 0.5, // twinkle hue: Math.random() < 0.7 ? "242,161,30" : "212,175,55" }; }); }; const onMove = (e) => { mx = e.clientX / W; my = e.clientY / H; }; let t = 0; const draw = () => { t += 0.016; smx += (mx - smx) * 0.04; smy += (my - smy) * 0.04; const scroll = window.scrollY; ctx.clearRect(0, 0, W, H); for (const p of parts) { p.y -= p.vy / H; // drift up if (p.y < -0.05) { p.y = 1.05; p.x = Math.random(); } const sway = Math.sin(t * 0.6 + p.ph) * 14 * p.depth; // Parallax: near particles react more to mouse + scroll const px = p.x * W + sway + (smx - 0.5) * 60 * p.depth; const py = (p.y * H + (smy - 0.5) * 40 * p.depth + scroll * 0.04 * p.depth) % (H + 40); const alpha = (0.16 + 0.5 * p.depth) * (0.7 + 0.3 * Math.sin(t * p.tw * 2 + p.ph)); ctx.beginPath(); ctx.fillStyle = `rgba(${p.hue},${Math.max(0, alpha).toFixed(3)})`; ctx.arc(px, py < 0 ? py + H + 40 : py, p.r, 0, Math.PI * 2); ctx.fill(); } raf = requestAnimationFrame(draw); }; const onVisibility = () => { cancelAnimationFrame(raf); if (!document.hidden) raf = requestAnimationFrame(draw); }; resize(); seed(); raf = requestAnimationFrame(draw); window.addEventListener("resize", resize); window.addEventListener("mousemove", onMove, { passive: true }); document.addEventListener("visibilitychange", onVisibility); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); window.removeEventListener("mousemove", onMove); document.removeEventListener("visibilitychange", onVisibility); }; }, []); return