Add visual effects that will make your visitors sigh in just 5 minutes. No complicated setup, no headaches, no excuses.
Solo necesitas 3 pasos simples para tener partículas que harán que tu competencia se muera de envidia
Copy the link
Add Flux.js to your HTML with a simple script (easier than making coffee)
Create a container
A simple <div> where the most seductive particles will be born
Enjoy the magic!
Your particles are already working better than your Monday motivation
Recommended for conquering hearts - works instantly
<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>Copy this code and have particles more seductive than a sunset
<!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>If you use tools like npm, webpack, bundlers and that kind of magic
npm install @pablotheblink/fluxjs💡 Pro tip: Also works with yarn, pnpm and bun (we're polyglots)
import { FluxJS } from '@pablotheblink/fluxjs';
const flux = new FluxJS({
container: document.getElementById('mi-contenedor')
});⚡ Compatible with: React, Vue, Angular, Svelte and any framework you can think of
For professional projects that need that irresistible touch
// 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 }
}
});Your website will look amazing with these particles
In less than 5 minutes you already have particles working on your website. Now let's see awesome examples you can use for inspiration...
Aquí tienes las 3 formas más comunes de usar Flux.js. Elige la que mejor se adapte a lo que necesitas
📚 Quick guide: Each option is designed for different needs. All super easy to implement!
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
🎨 Ready inspiration: Each example includes complete code and an interactive demo. Just copy, paste and customize!
Elegant floating bubble effect perfect for backgrounds that captivate
// 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'
});Connected particles that dance to the rhythm of your mouse like pure magic
// 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
}
});Hypnotic effect of particles spinning in a spiral with central gravity that will leave you in a 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 }
});Particles that change color dynamically with a trail effect that looks like it's from the future
// 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 configuration: Flux.js AI detects your device, battery, connection and preferences. Everything works automatically without you having to do anything!
AI automatically detects battery level and adjusts performance. Your device will last all day!
AUTO_BATTERY_OPTIMIZATION: ON Automatically reduces particles when battery < 20%
Automatically recognizes multi-touch gestures and adapts to each device. Works great on tablets and phones!
TOUCH_DETECTION: ADVANCED Supports up to 10 simultaneous touches
Detects when you switch tabs and automatically pauses. Saves resources without you noticing!
VISIBILITY_API: ACTIVE Automatic pause when not viewing
Automatically respects user accessibility preferences. Works for everyone without exceptions!
PREFERS_REDUCED_MOTION: RESPECT Adapts to animation preferences
Advanced optimization algorithms with automatic WebGL and Canvas2D. 60 FPS guaranteed!
WEBGL_ACCELERATION: AUTO Automatic GPU/CPU optimization
Automatically detects errors and suggests smart solutions. Like having an expert 24/7!
SMART_DEBUG: ENABLED Automatic error analysis and solutions
🔥 Zero manual configuration: 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. It's like magic, but better because it's real!
Para cuando quieras llevar Flux.js al siguiente nivel
🎛️ Advanced customization: Estas configuraciones te permiten afinar cada detalle de Flux.js. Change only what you need, the rest works automatically!
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
🧪 Free experimentation: Adjust each parameter and see changes instantly. When you find your perfect combination, copy the code and use it!
Ajusta cada parámetro y observa cómo cambia la magia en tiempo real
Toca para cambiar
Automatically generated code
// 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
"Impressive!"
Frontend Developer | React · Next.js
"Very good, the landing looks amazing!"
Frontend Developer | React
"I've been testing it and it's amazing! Thanks for your contributions 🚀"
Full Stack Developer
"Looks amazing, I'll surely use it in a project."
Full Stack Developer
"You're killing it bro 🔥 thanks for sharing your great creativity 🥳"
Senior Full-Stack AI Engineer
"✨🔭👀"
Frontend Developer
"Great, I'm gonna try it to see how it goes, thanks for sharing!"
Desarrollador Full Stack
"Really amazing 😮💨👌"
Software Engineer
"Wow🙌"
Frontend React Developer
"Very good, Pablo!"
Frontend/Game Developer
"Interesting thanks for sharing"
Software Engineer
"Excellent work!"
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! Your experience level doesn't matter.
Something not working as it should? Help us fix it!
Got a great idea for Flux.js? Tell us!
Know how to code? You can help improve Flux.js!
Help make explanations clearer for everyone.
Create awesome examples that help others learn.
Help test that Flux.js works well on different devices.
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
Full Stack Developer with a bit of craziness 🤪 for creating tools that make users say "WOW!" I created Flux.js because static backgrounds make me sleepy 😴 and I wanted something that makes particles dance all over the screen ✨
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
