BREA — Breakthrough Smash Room (demo portafolio)

Fecha: 2026-07-13 Proyecto: ~/Desktop/breakthrough-smashroom Origen: mockups PDF ~/Downloads/BREA(2)/ (concepto 2021-ish para Foundersworkshop). OJO: es smash room (rage room), no “mushroom”.

Stack

• Vite + React 18 + TS estricto + Tailwind
• GSAP 3.13 (ScrollTrigger) + Lenis smooth scroll
• Three.js (r169) — hero “muro que estalla”
• Fuentes locales via @fontsource (Anton + Instrument Sans) — sin CDN

Decisiones clave

• Assets reales extraídos de los PDFs con pdfimages -j + magick → webp en public/img/. El recorte de la chica se recompuso con su softmask (Home-004.jpg + Home-005.png → CopyOpacity).
• Hero = BrickWall.tsx: port del prototipo ~/Downloads/muro-slider.html (Three.js, muro de ladrillo índigo que revienta → hueco con estrellas → titular cíclico → se reconstruye). 3 slides del deck original: stress & anxiety / corporate events / dull dates.
  • Iteración 2 (feedback: “compiten los dos titulares”): slider protagonista, centrado, fullscreen. Secuencia 3 slides → closer fijo en rojo (“Bad day? Break through it.”, el muro ya no se reconstruye) + CTA fade-in. Copy “BAD DAY” bajó a sección propia (BadDay.tsx) con reveal. Interactividad: click en el muro = siguiente slide (“hit the wall to skip”); en el closer, click = replay.
  • Iteración 3 (feedback: “falta espectacularidad, olvidemos las frases, concentrémonos en BAD DAY”): fuera slides. Secuencia única: muro intacto con “BAD DAY?” gigante (canvas→textura Anton, layout apilado estilo Slider-2 del deck) → entra bate 3D (LatheGeometry) con windup → golpe → las letras se fragmentan en ~100 piezas físicas (plano partido en grid con UVs remapeadas, solo celdas con tinta; velocidad radial desde el impacto + gravedad + spin) + burst de chispas aditivas + flash + camera shake + el muro revienta detrás → “BREAK THROUGH IT.” rojo fijo + CTA. Click = adelantar golpe / replay.
  • Técnica QA: para verificar animación rápida con screenshots lentos, preserveDrawingBuffer:true temporal + capturas canvas.toDataURL agendadas con setTimeout en el timeline exacto → collage inyectado en el DOM. Patrón reutilizable para QA de WebGL.
  • Pausa via IntersectionObserver fuera de viewport; reduced-motion = hueco fijo, solo cicla texto.
• Lenis + anchors: los href="#…" nativos pelean con Lenis (lerp regresa el scroll). Fix: delegación de click → lenis.scrollTo(target). Patrón reutilizable en cualquier proyecto con Lenis.
• TS gotcha: narrowing de const no aplica dentro de function declarations (hoisting) — usar arrow functions.
• Bundle: manualChunks separa three (467KB) / motion / react; app queda en 75KB.

Correr

cd ~/Desktop/breakthrough-smashroom && npm run dev   # puerto 5199
npm run build  # dist/

Preview configurado en ~/.claude/launch.json como breakthrough-smashroom.

Pendiente / ideas

• Slider-4.pdf tiene una 4ª slide sin portar.
• Página “What to expect” tiene 3 estados hover en los PDFs — el acordeón actual cubre 1.
• Deploy: Cloudflare Pages o el hosting del portafolio; es 100% estático.