NEXUS Loja Geek

CONTEXTO

Las marcas geek y gamer necesitan una vitrina con cara de producto premium, con un impacto visual que las diferencie de la competencia.

QUÉ SE HIZO

Vitrina conceptual con hero de agujero negro estilo Interestelar (React Three Fiber): disco de acreción turbulento, distorsión gravitacional, planeta y asteroides, iluminación HDRI y posprocesamiento cinematográfico. Una timeline (Theatre.js) hace que la cámara se sumerja en el agujero conforme al scroll.

AGUJERO NEGRO 3D + LENTE GRAVITACIONAL

SOLUCIONES

• Agujero negro en GLSL puro

  Disco de acreción, anillo de fotones y núcleo calculados por píxel con FBM, sin ninguna textura.

• Lente gravitacional custom

  Effect de posprocesamiento propio (deflexión ~1/d²) que curva estrellas y nebulosa alrededor del horizonte de eventos.

• Cámara scrubbed por Theatre.js

  El scroll de la página frota una timeline de cámara con keyframes, sin lib de scroll externa.

• GPU bajo presupuesto

  IntersectionObserver apaga el frameloop de R3F fuera del viewport; dpr limitado y antialiasing off.

DETALLE TÉCNICO

• 01El hero no usa ningún asset de agujero negro listo: es un shader GLSL escrito a mano (BlackHoleScene.jsx) corriendo en un único plano dentro…+

  El hero no usa ningún asset de agujero negro listo: es un shader GLSL escrito a mano (BlackHoleScene.jsx) corriendo en un único plano dentro de React Three Fiber. FBM (fractal Brownian motion) genera la turbulencia del disco de acreción en dos capas de ruido, un perfil radial separa disco fino de núcleo, y el anillo de fotones y el "efecto Doppler" (lado que se acerca más claro) se suman por encima, todo calculado por píxel y sin textura. Sobre eso se suma un planeta con atmósfera en fresnel aditivo y un campo de asteroides vía instancedMesh (38 instancias, una única draw call) girando con ruido propio de rotación.

• 02La distorsión gravitacional es un efecto de posprocesamiento propio, no un filtro listo: una clase LensingEffect que extiende Effect de la l…+

  La distorsión gravitacional es un efecto de posprocesamiento propio, no un filtro listo: una clase LensingEffect que extiende Effect de la lib postprocessing y se conecta al pipeline de R3F vía wrapEffect. El shader de la lente desplaza el UV de muestreo del frame entero en función de la distancia al horizonte de eventos (deflexión ~1/d²), curvando estrellas y nebulosa alrededor del agujero como una lente de Einstein real. La cámara, a su vez, no sigue el scroll directamente. Una timeline de Theatre.js (heroSheet, con keyframes de posición y FOV guardados en theatre-state.json) se 'frota' (sequence.position = t * SEQ_LEN) proporcionalmente al scrollY, y el resultado se suaviza con lerp antes de aplicarlo a la cámara. Es lo que da la inmersión cinematográfica en el agujero sin depender de ninguna lib de scroll externa.

• 03El costo de GPU se trata como presupuesto, no como detalle. El dpr está limitado a [0.75, 1], el antialiasing queda apagado (compensado por …+

  El costo de GPU se trata como presupuesto, no como detalle. El dpr está limitado a [0.75, 1], el antialiasing queda apagado (compensado por el bloom y el noise del posprocesamiento), y un IntersectionObserver en el wrapper del Canvas alterna frameloop entre 'always' y 'never'. Apenas el hero sale del viewport, R3F deja de renderizar frames por completo, en vez de solo quedar invisible consumiendo GPU en el resto del scroll. Es el mismo razonamiento de rendimiento que se aplicaría a un dashboard con gráficos pesados: renderizar solo lo que de hecho está en pantalla.

• 04Debajo del hero, la tienda es datos puros y componentes sin backend. Seis catálogos (héroes, cómics, series, games, setup, gear) viven en sr…+

  Debajo del hero, la tienda es datos puros y componentes sin backend. Seis catálogos (héroes, cómics, series, games, setup, gear) viven en src/data/products.js como arrays simples, y el ProductCard resuelve la imagen en una cadena de fallback resiliente: intenta la foto real (.jpg, después .png si la primera falla), cae al emblema vectorial del héroe si no hay foto, y cae a un visual SVG procedural (hexágono, núcleo y partículas, generado a partir del accent color) si ni eso existe. Ningún card se rompe por imagen ausente. La sección de Games tiene filtro client-side por categoría (cat) que reconstruye el carrusel (key={filter} fuerza una reentrada animada), y toda la UI tiene sonido: bips procedurales vía WebAudio (useSound.js) sin ningún archivo de audio, con AudioContext creado bajo demanda en el primer gesto del usuario, que es la forma de sortear las autoplay policies de los navegadores.

PANTALLAS

RESULTADO

Vitrina conceptual con hero de agujero negro estilo Interestelar (React Three Fiber): disco de acreción turbulento, distorsión gravitacional, planeta y asteroides, iluminación HDRI y posprocesamiento cinematográfico. Una timeline (Theatre.js) hace que la cámara se sumerja en el agujero conforme al scroll.

QUIERO ALGO PARECIDO ↗ABRIR SITIO ↗