Aurora createAurora
Cortinas de luz boreal con rayos y estrellas en un único shader. Ideal para productos creativos y de IA.
THREE.JS · 5 FONDOS ANIMADOS · PAGO ÚNICO
Nahum 3D Backgrounds Vol.01
Cinco fondos animados para poner detrás de tu hero en una línea de código. Auroras, océanos de puntos, constelaciones, hiperespacio y un planeta con rutas en vivo. Ligeros, configurables y pensados para producción.
$2.00
USD · Pago único
- Código fuente ES modules
- Bundle listo para <script>
- Compatible con CSP estricta
5Fondos animados
15Paletas de color de ejemplo
1Línea para montarlo
$2Pago único · sin suscripción
Los cinco fondos
Uno para cada tipo de producto.
Grabaciones reales de cada fondo. Todos aceptan colores, velocidad y densidad desde las opciones.
Aurora
Dot Globe createDotGlobe
Planeta de puntos con continentes, atmósfera y rutas con pulsos viajeros. Para SaaS, fintech y logística.
Wave Grid createWaveGrid
Océano de puntos que respira; el cursor genera ondas. Todo en el vertex shader.
Constellation createConstellation
Partículas que se enlazan al acercarse y siguen al cursor. El clásico "red" hecho bien.
Warp createWarp
Estrellas en hiperespacio con intensidad ajustable. Sube warp al hacer clic en tu CTA.
Integración
Detrás de tu hero en una línea.
Pasa el contenedor y listo: el fondo crea su canvas, se ajusta al tamaño, limita el pixel ratio y se pausa solo cuando sale de la pantalla o la pestaña se oculta. Con dispose() libera la GPU.
import { createDotGlobe } from './nahum-3d-backgrounds.esm.js'; const bg = createDotGlobe(document.querySelector('.hero'), { offsetX: 0.45, // deja sitio a tu texto arcs: 16, colors: { land: '#8fb4ff', arc: '#22e3c4' } }); bg.setOptions({ speed: 0.6 }); // en caliente bg.dispose(); // al desmontar
Pensado para producción
Bonito, pero también responsable.
Un fondo 3D no debería calentar el teléfono de tu visitante ni romper tu política de seguridad.
Pausa automática
El loop se detiene cuando el fondo no está en pantalla o la pestaña está oculta. Cero GPU desperdiciada.
Movimiento reducido
Si el usuario activa "reducir movimiento", se dibuja un fotograma fijo en lugar de la animación.
CSP estricta
No escribe estilos ni scripts en línea: funciona con script-src 'self' y style-src 'self'.
Pixel ratio limitado
Nítido en pantallas Retina sin renderizar de más en pantallas 3× (máximo configurable).
API mínima
start, stop, setOptions, renderAt y dispose. Nada más que aprender.
Dos formas de usarlo
Módulos ES para Vite, Next o Astro, y un bundle IIFE para una página HTML simple.
Qué recibes
Todo lo que entra en el pack.
La descarga se entrega después de confirmar el pago, nunca desde esta página pública.
Código
- Código fuente comentado
- 5 fondos + núcleo compartido
- Bundle ESM (three externo)
- Bundle IIFE listo para usar
Además
- Demo con controles en vivo
- 15 paletas de ejemplo
- Guía de integración
- Licencia de uso
FAQ
Antes de comprar.
Lo esencial sobre el pack, el uso y la licencia.
¿Necesito saber Three.js?
No. Cada fondo se monta con una función y se configura con un objeto de opciones. Si sabes Three.js, el código fuente está listo para que lo extiendas.
¿Funciona con React, Vue, Next o Astro?
Sí. Monta el fondo en un efecto o hook cuando el contenedor exista y llama a dispose() al desmontar.
¿Qué versión de Three.js usa?
Funciona con Three.js r160 o superior. El bundle IIFE ya incluye Three.js, así que no necesitas instalar nada para probarlo.
¿Puedo usarlo en proyectos de clientes?
Sí, puedes usarlo en tus sitios y en proyectos de clientes. No se permite revender el código como otro pack o plantilla.
¿Cómo recibo los archivos?
Después de confirmar el pago recibes el acceso a la descarga del pack. Si algo falla, escríbenos desde Contacto.