Añade efectos visuales que harán suspirar a tus visitantes en solo 5 minutos. Sin configuración complicada, sin dolores de cabeza, sin excusas.
Solo necesitas 3 pasos simples para tener partículas que harán que tu competencia se muera de envidia
Copia el enlace
Añade Flux.js a tu HTML con un simple script (más fácil que hacer café)
Crea un contenedor
Un simple <div> donde nacerán las partículas más seductoras
¡Disfruta la magia!
Tus partículas ya están funcionando mejor que tu motivación de lunes
Recomendada para conquistar corazones - funciona al instante
<script src="https://unpkg.com/@pablotheblink/fluxjs@1.0.5/flux.js"></script><div id="mis-particulas"></div><script>
// ¡Esto crea partículas automáticamente!
const particulas = new FluxJS({
container: document.getElementById('mis-particulas')
});
</script>Copia este código y ten partículas más seductoras que un atardecer
<!DOCTYPE html>
<html>
<head>
<title>Mi Web con Partículas</title>
<style>
#mis-particulas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Detrás del contenido */
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #1a1a1a;
color: white;
}
.contenido {
position: relative;
z-index: 1;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="mis-particulas"></div>
<div class="contenido">
<h1>¡Mi Web Increíble!</h1>
<p>Con partículas de fondo geniales</p>
</div>
<script src="https://unpkg.com/@pablotheblink/fluxjs@1.0.5/flux.js"></script>
<script>
const particulas = new FluxJS({
container: document.getElementById('mis-particulas')
});
</script>
</body>
</html>Si usas herramientas como npm, webpack, bundlers y ese tipo de magia
npm install @pablotheblink/fluxjs💡 Pro tip: También funciona con yarn, pnpm y bun (somos políglotas)
import { FluxJS } from '@pablotheblink/fluxjs';
const flux = new FluxJS({
container: document.getElementById('mi-contenedor')
});⚡ Compatible con: React, Vue, Angular, Svelte y cualquier framework que se te ocurra
Para proyectos profesionales que necesitan ese toque irresistible
// Configuración completa para proyectos profesionales
import { FluxJS } from '@pablotheblink/fluxjs';
const advancedFlux = new FluxJS({
container: document.getElementById('particles-container'),
count: 100,
color: '#4fc3f7',
size: { min: 2, max: 8 },
speed: { min: 0.1, max: 0.5 },
connections: {
enabled: true,
distance: 150,
opacity: 0.3
},
mouse: {
interact: true,
attract: true,
repel: false,
radius: 200
},
responsive: {
mobile: { count: 50 },
tablet: { count: 75 }
}
});Tu web va a lucir increíble con estas partículas
En menos de 5 minutos ya tienes partículas funcionando en tu web. Ahora vamos a ver ejemplos geniales que puedes usar para inspirarte...
Aquí tienes las 3 formas más comunes de usar Flux.js. Elige la que mejor se adapte a lo que necesitas
📚 Guía rápida: Cada opción está pensada para diferentes necesidades. ¡Todas son súper fáciles de implementar!
Para que toda tu página tenga partículas de fondo espectaculares
// Solo cambia 'mi-fondo' por tu ID
new FluxJS({
container: document.getElementById('mi-fondo'),
count: 50
});Para añadir partículas solo a una parte específica de tu web
// Cambia 'mi-seccion' por tu ID
new FluxJS({
container: document.getElementById('mi-seccion'),
count: 30
});Para tener diferentes efectos en varias partes de tu web
// Crea varios con diferentes colores
new FluxJS({ container: header, color: '#fff' });
new FluxJS({ container: footer, color: '#4fc3f7' });Descubre ejemplos listos para usar que harán que tu web luzca profesional
🎨 Inspiración lista: Cada ejemplo incluye el código completo y una demo interactiva. ¡Solo copia, pega y personaliza!
Efecto elegante de burbujas flotantes perfecto para fondos que enamoran
// HTML
<div id="bubbles-background"></div>
// CSS
#bubbles-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
// JavaScript
const bubbles = new Flux({
container: document.getElementById('bubbles-background'),
count: 30,
color: '#ffffff',
size: { min: 5, max: 25 },
speed: { min: 0.02, max: 0.1 },
opacity: { min: 0.1, max: 0.4 },
connections: { enabled: false },
mouse: { interact: false },
movement: 'float'
});Partículas conectadas que bailan al ritmo de tu mouse como si fuera magia pura
// HTML
<div id="network-container"></div>
// CSS
#network-container {
width: 100%;
height: 400px;
background: #1a1a1a;
border-radius: 12px;
}
// JavaScript
const network = new Flux({
container: document.getElementById('network-container'),
count: 60,
color: '#4fc3f7',
size: { min: 2, max: 4 },
speed: { min: 0.1, max: 0.3 },
opacity: { min: 0.6, max: 1 },
connections: {
enabled: true,
distance: 120,
color: '#4fc3f7',
opacity: 0.3
},
mouse: {
interact: true,
distance: 150,
force: 0.5
}
});Efecto hipnótico de partículas girando en espiral con gravedad central que te dejará en trance
// HTML
<div id="galaxy-container"></div>
// CSS
#galaxy-container {
width: 100%;
height: 500px;
background: radial-gradient(circle, #1a0a2e, #000);
border-radius: 12px;
}
// JavaScript
const galaxy = new Flux({
container: document.getElementById('galaxy-container'),
count: 200,
color: {
type: 'gradient',
gradient: ['#8B00FF', '#4B0082', '#9400D3',
'#8A2BE2', '#DA70D6', '#FF69B4']
},
size: { min: 1, max: 4, pulse: true },
speed: { min: 0.05, max: 0.3 },
opacity: { min: 0.3, max: 0.8, flicker: true },
connections: {
enabled: true,
distance: 80,
opacity: 0.3
},
animation: {
type: 'orbit',
orbit: { radius: 120, speed: 0.012 }
},
effects: {
glow: true,
glowColor: '#8B00FF',
twinkle: true
},
mouse: { interact: true, attraction: 0.1 }
});Partículas que cambian de color dinámicamente con efecto de rastro que parece sacado del futuro
// HTML
<div id="rainbow-container"></div>
// CSS
#rainbow-container {
width: 100%;
height: 400px;
background: linear-gradient(45deg, #1a1a1a, #2d2d2d);
border-radius: 12px;
}
// JavaScript
const rainbow = new Flux({
container: document.getElementById('rainbow-container'),
count: 60,
color: {
type: 'rainbow',
rainbowSpeed: 0.02
},
size: { min: 2, max: 6, pulse: true },
speed: { min: 0.15, max: 0.4, turbulence: 0.2 },
opacity: { min: 0.7, max: 1 },
mouse: {
interact: true,
trail: true,
trailLength: 25,
trailWidth: 10,
trailGlow: true,
trailFadeTime: 2000,
distance: 180,
sparkles: true
},
effects: { glow: true, twinkle: true }
});Sumérgete en todas las capacidades de Flux.js con nuestra demo interactiva que te dejará sin palabras
Flux.js piensa por ti con IA integrada que optimiza automáticamente cada detalle
🤖 Zero configuración: La IA de Flux.js detecta tu dispositivo, batería, conexión y preferencias. ¡Todo funciona automáticamente sin que tengas que hacer nada!
La IA detecta automáticamente el nivel de batería y ajusta el rendimiento. ¡Tu dispositivo te durará todo el día!
AUTO_BATTERY_OPTIMIZATION: ON Reduce automáticamente partículas cuando batería < 20%
Reconoce automáticamente gestos multi-táctiles y se adapta a cada dispositivo. ¡Funciona genial en tablets y móviles!
TOUCH_DETECTION: ADVANCED Soporta hasta 10 toques simultáneos
Detecta cuando cambias de pestaña y pausa automáticamente. ¡Ahorra recursos sin que te des cuenta!
VISIBILITY_API: ACTIVE Pausa automática cuando no estás viendo
Respeta automáticamente las preferencias de accesibilidad del usuario. ¡Funciona para todos sin excepciones!
PREFERS_REDUCED_MOTION: RESPECT Se adapta a preferencias de animación
Algoritmos avanzados de optimización con WebGL y Canvas2D automático. ¡60 FPS garantizados!
WEBGL_ACCELERATION: AUTO Optimización automática GPU/CPU
Detecta errores automáticamente y sugiere soluciones inteligentes. ¡Como tener un experto 24/7!
SMART_DEBUG: ENABLED Análisis automático de errores y soluciones
🔥 Cero configuración manual: Flux.js detecta automáticamente tu dispositivo, ajusta el rendimiento, respeta tus preferencias y optimiza todo sin que tengas que tocar una sola línea de código. ¡Es como magia, pero mejor porque es real!
Para cuando quieras llevar Flux.js al siguiente nivel
🎛️ Personalización avanzada: Estas configuraciones te permiten afinar cada detalle de Flux.js. ¡Cambia solo lo que necesites, el resto funciona automáticamente!
Estas son las opciones que puedes cambiar para crear efectos únicos. ¡Solo ajusta lo que quieras!
{
container: element, // Dónde aparecen
count: 50, // Cuántas partículas
color: '#ffffff', // Color
size: { min: 1, max: 3 }, // Tamaño
speed: { min: 0.1, max: 0.5 }, // Velocidad
opacity: { min: 0.3, max: 0.8 }, // Transparencia
connections: { // Líneas entre partículas
enabled: true,
distance: 100
},
mouse: { // Respuesta al mouse
interact: true,
distance: 150
}
}💡 Pro Tip: Cambia solo las propiedades que necesites. El resto mantendrá valores optimizados automáticamente.
Estas funciones te permiten controlar las partículas dinámicamente. ¡Cambia todo en tiempo real!
// Controlar la animación
flux.start(); // Iniciar
flux.stop(); // Pausar
flux.destroy(); // Eliminar todo
// Cambiar cosas sobre la marcha
flux.setColor('#ff0000'); // Cambiar color
flux.setCount(100); // Cambiar cantidad
flux.updateConfig({
speed: { min: 1, max: 2 } // Cambiar velocidad
});🚀 Pro Tip: Todos los cambios se aplican instantáneamente sin reiniciar la animación.
Experimenta en tiempo real y crea efectos únicos con nuestro generador inteligente
🧪 Experimentación libre: Ajusta cada parámetro y ve los cambios al instante. ¡Cuando encuentres tu combinación perfecta, copia el código y úsalo!
Ajusta cada parámetro y observa cómo cambia la magia en tiempo real
Toca para cambiar
Código generado automáticamente
// Tu código personalizado aparecerá aquí...
// Configurado automáticamente según tus preferencias
const flux = new Flux({
container: document.getElementById('mi-contenedor'),
// Configuración generada dinámicamente
});💡 Pro Tip: El código se actualiza automáticamente mientras juegas con los controles. ¡Experimenta sin miedo!
Desarrolladores de todo el mundo ya están creando magia con Flux.js
Programador Senior
"¡Impresionante!"
Frontend Developer | React · Next.js
"Muy bueno, la landing quedó increíble!"
Frontend Developer | React
"Lo estuve probando y es una pasada! Gracias por tus aportaciones 🚀"
Full Stack Developer
"Se ve increíble, seguramente la usaré en algún proyecto."
Full Stack Developer
"La estás rompiendo mi bro 🔥 gracias por compartir de tu gran creatividad 🥳"
Senior Full-Stack AI Engineer
"✨🔭👀"
Frontend Developer
"Buenísimo, voy a probarlo para ver qué tal, gracias por compartir!"
Desarrollador Full Stack
"Realmente asombroso 😮💨👌"
Software Engineer
"Wow🙌"
Frontend React Developer
"¡Muy bien, Pablo!"
Frontend/Game Developer
"Interesante gracias por compartir"
Software Engineer
"¡Excelente trabajo!"
5.0 estrellas
12+ testimonios reales
100%
Satisfacción de usuarios
Comunidad activa
¿Ya usas Flux.js? ¡Únete a nuestra increíble comunidad de desarrolladores!
Flux.js es 100% open source y cualquier persona puede contribuir a hacerlo mejor
🌟 Comunidad abierta: Desde reportar bugs hasta crear nuevas features, ¡tu contribución hace la diferencia! No importa tu nivel de experiencia.
¿Algo no funciona como debería? ¡Ayúdanos a solucionarlo!
¿Se te ocurre algo genial que podría tener Flux.js? ¡Cuéntanos!
¿Sabes programar? ¡Puedes ayudar a mejorar Flux.js!
Ayuda a que las explicaciones sean más claras para todos.
Crea ejemplos geniales que ayuden a otros a aprender.
Ayuda a probar que Flux.js funcione bien en diferentes dispositivos.
Haz una copia en tu cuenta de GitHub
Para organizar tus cambios
Programa tu mejora y pruébala bien
Crea un Pull Request para que lo revisemos
¿Primera vez contribuyendo? ¡Genial! Busca issues etiquetados como:
Todos los contribuidores son reconocidos y valorados. Tu nombre aparecerá en:
README.md
Release Notes
Contributors Page
Desarrollador Full Stack con un poquito de locura 🤪 por crear herramientas que hagan que los usuarios digan "¡WOW!" Creé Flux.js porque los fondos estáticos me dan sueño 😴 y quería algo que hiciera bailar a las partículas por toda la pantalla ✨
Si este proyecto te ha robado el corazón ❤️ (y algunos cafés ☕), considera invitarme a una pizza 🍕 para seguir creando cositas geniales que hagan que la web sea más divertida
Tu apoyo me ayuda a seguir desarrollando herramientas útiles y gratuitas para la comunidad
