Preparando la seducción digital...
v1.0.5 - Listo para usar

Flux.js

Partículas
Increíbles
Sin Esfuerzo

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.

Empezar Ahora → Ver Demo
5min
Para seducir
100%
Irresistible
0
Complicaciones

¡Empezar es Irresistiblemente Fácil! 🚀

Solo necesitas 3 pasos simples para tener partículas que harán que tu competencia se muera de envidia

🎯 Solo 3 Pasos Hacia la Gloria Digital

1

Copia el enlace

Añade Flux.js a tu HTML con un simple script (más fácil que hacer café)

2

Crea un contenedor

Un simple <div> donde nacerán las partículas más seductoras

3

¡Disfruta la magia!

Tus partículas ya están funcionando mejor que tu motivación de lunes

✨

Opción 1: ¡La Más Seductora!

Recomendada para conquistar corazones - funciona al instante

Irresistible

1
Añade esto en tu HTML (antes de </body>): 

<script src="https://unpkg.com/@pablotheblink/fluxjs@1.0.5/flux.js"></script>

2
Crea un contenedor para las partículas: 

<div id="mis-particulas"></div>

3 Añade el código JavaScript (también antes de </body>): 

<script>
// ¡Esto crea partículas automáticamente!
const particulas = new FluxJS({
  container: document.getElementById('mis-particulas')
});
</script>
🎉

Ejemplo Completo - ¡Listo para Enamorar!

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>
✅ Código 100% seductor - Probado y aprobado por el corazón
⚡

Opción 2: Para Seductores Digitales

Si usas herramientas como npm, webpack, bundlers y ese tipo de magia

Nivel Seductor Avanzado

📦 Instalación con NPM: 

npm install @pablotheblink/fluxjs
package installed successfully

💡 Pro tip: También funciona con yarn, pnpm y bun (somos políglotas)

🔧 Uso en tu código: 

import { FluxJS } from '@pablotheblink/fluxjs';

const flux = new FluxJS({
  container: document.getElementById('mi-contenedor')
});
ES6+ modules

⚡ Compatible con: React, Vue, Angular, Svelte y cualquier framework que se te ocurra

🚀

Configuración para Conquistar Corazones

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 }
  }
});
TypeScript support
Tree shaking compatible
Zero dependencies
Bundle size ~15KB
🎯

¡Ya Está Listo!

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...

👀 Ver Ejemplos Increíbles →
Instalación completa
Listo para usar

Tres Formas de Usarlo 💡

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!

🌌

Fondo de Página

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
});
Más Popular
🎯

Solo una Sección

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
});
Más Preciso
✨

Múltiples Efectos

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' });
Más Avanzado
ç

Galería de Pura Genialidad ✨

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!

🫧 Burbujas de Fondo

Efecto elegante de burbujas flotantes perfecto para fondos que enamoran

HTML + JS 
// 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'
});

🔗 Red de Conexiones

Partículas conectadas que bailan al ritmo de tu mouse como si fuera magia pura

HTML + JS 
// 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
  }
});

🌌 Galaxia Rotante

Efecto hipnótico de partículas girando en espiral con gravedad central que te dejará en trance

HTML + JS 
// 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 }
});

🎨 Rastro Arcoíris

Partículas que cambian de color dinámicamente con efecto de rastro que parece sacado del futuro

HTML + JS 
// 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 }
});

🚀 Demo que Te Volará la Cabeza

Sumérgete en todas las capacidades de Flux.js con nuestra demo interactiva que te dejará sin palabras

🎮 Experiencia Interactiva ✨
Interactivo
Tiempo Real
Inmersivo

Inteligencia Artificial Built-In 🧠

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!

🔋
ECO MODE

Cuida tu Batería

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%

👆
MULTI-TOUCH

Perfecto en Móviles

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

👁️
SMART PAUSE

Pausa Inteligente

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

♿
A11Y

Inclusivo por Defecto

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

🚀
TURBO

Velocidad Extrema

Algoritmos avanzados de optimización con WebGL y Canvas2D automático. ¡60 FPS garantizados!

WEBGL_ACCELERATION: AUTO

Optimización automática GPU/CPU

🔧
AI DEBUG

Diagnóstico por IA

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

🤖

IA que Trabaja por Ti

✨

🔥 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!

🧠 INTELIGENCIA ARTIFICIAL INTEGRADA
♻️ 100% AUTOMÁTICO

Guía Express de Personalización 📋

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!

🎛️

Configuración Personalizada

ULTRA FLEXIBLE

Estas son las opciones que puedes cambiar para crear efectos únicos. ¡Solo ajusta lo que quieras!

CONFIGURACIÓN BÁSICA 
{
  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.

⚡

Comandos de Control

CONTROL TOTAL

Estas funciones te permiten controlar las partículas dinámicamente. ¡Cambia todo en tiempo real!

MÉTODOS DISPONIBLES 
// 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.

Laboratorio de Creació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!

CANVAS EN VIVO
TIEMPO REAL INTERACTIVO

Centro de Control 🎛️

Ajusta cada parámetro y observa cómo cambia la magia en tiempo real

⚙️

Parámetros Básicos

ESENCIAL
10 500
0.1 2.0
1 15

Toca para cambiar

🎭

Estilo Visual

PERSONALIZACIÓN
✨

Efectos Avanzados

PRO LEVEL
50 300
0 1
5 50
🎮

Interactividad & Física

DINAMISMO
💫 Efectos Básicos:
🚀 Efectos Pro:
🖱️ Interacción:
🧲 Física:
🧬

Tu Fórmula Mágica

Código generado automáticamente

LISTO PARA USAR AUTO-GENERADO
JAVASCRIPT OPTIMIZADO 
// 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!

Historias de Éxito 💬

Desarrolladores de todo el mundo ya están creando magia con Flux.js

JF

Javier Fernández Gutiérrez

Programador Senior

⭐⭐⭐⭐⭐

"¡Impresionante!"

🔥 Hace 6 horas
JV

Julian Videla

Frontend Developer | React · Next.js

⭐⭐⭐⭐⭐

"Muy bueno, la landing quedó increíble!"

👍 Hace 1 hora
LC

Luis Chicaiza

Frontend Developer | React

⭐⭐⭐⭐⭐

"Lo estuve probando y es una pasada! Gracias por tus aportaciones 🚀"

🚀 Hace 19 horas
SL

Simeí Lavalle

Full Stack Developer

⭐⭐⭐⭐⭐

"Se ve increíble, seguramente la usaré en algún proyecto."

❤️ Hace 21 horas
CF

Caled Flores

Full Stack Developer

⭐⭐⭐⭐⭐

"La estás rompiendo mi bro 🔥 gracias por compartir de tu gran creatividad 🥳"

🔥 Hace 20 horas
JR

Juan Ramón Rodríguez

Senior Full-Stack AI Engineer

⭐⭐⭐⭐⭐

"✨🔭👀"

✨ Hace 18 horas
DL

Denise Lara

Frontend Developer

⭐⭐⭐⭐⭐

"Buenísimo, voy a probarlo para ver qué tal, gracias por compartir!"

👍 Hace 15 horas
PU

Paul Uzcategui

Desarrollador Full Stack

⭐⭐⭐⭐⭐

"Realmente asombroso 😮‍💨👌"

😮‍💨 Hace 17 horas
BR

Brayan Reyes Rodríguez

Software Engineer

⭐⭐⭐⭐⭐

"Wow🙌"

🙌 Hace 43 minutos
AM

Andrés Medina

Frontend React Developer

⭐⭐⭐⭐⭐

"¡Muy bien, Pablo!"

👏 Hace 1 hora
AD

Axel Domingo Lara Parés

Frontend/Game Developer

⭐⭐⭐⭐⭐

"Interesante gracias por compartir"

👍 Hace 17 horas
RG

Reinaldo González

Software Engineer

⭐⭐⭐⭐⭐

"¡Excelente trabajo!"

🎉 Hace 12 horas
⭐⭐⭐⭐⭐

5.0 estrellas

12+ testimonios reales

🚀

100%

Satisfacción de usuarios

👥

LinkedIn

Comunidad activa

¿Ya usas Flux.js? ¡Únete a nuestra increíble comunidad de desarrolladores!

💬 Comparte tu Historia 🤝 Colaborar con Nosotros

Únete a la Revolución 🤝

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.

🐛

Reportar Problemas

¿Algo no funciona como debería? ¡Ayúdanos a solucionarlo!

  • • Explica qué paso mal
  • • Dinos qué navegador usas
  • • Comparte tu código si puedes
Reportar Problema
💡

Sugerir Ideas

¿Se te ocurre algo genial que podría tener Flux.js? ¡Cuéntanos!

  • • Explica tu idea
  • • Dinos para qué serviría
  • • Si tienes ejemplos, ¡mejor!
Sugerir Idea
🔧

Ayudar con Código

¿Sabes programar? ¡Puedes ayudar a mejorar Flux.js!

  • • Ve al repositorio en GitHub
  • • Haz una copia (fork)
  • • Envía tus mejoras
Ver en GitHub
📚

Mejorar Documentación

Ayuda a que las explicaciones sean más claras para todos.

  • • Corregir errores de texto
  • • Hacer ejemplos más claros
  • • Mejorar las instrucciones
Mejorar Documentación
🎨

Crear Ejemplos

Crea ejemplos geniales que ayuden a otros a aprender.

  • • Demos fáciles de entender
  • • Ejemplos para casos específicos
  • • Tutoriales paso a paso
🧪

Probar en Dispositivos

Ayuda a probar que Flux.js funcione bien en diferentes dispositivos.

  • • Probar en celulares y tablets
  • • Ver que funcione rápido
  • • Asegurar compatibilidad
Guía de Pruebas

🚀 Cómo Contribuir (Si Sabes Programar)

1

Copia el Proyecto

Haz una copia en tu cuenta de GitHub

2

Crea una Nueva Rama

Para organizar tus cambios

3

Haz tus Cambios

Programa tu mejora y pruébala bien

4

Envía tu Mejora

Crea un Pull Request para que lo revisemos

📝 Convenciones de Commits

feat: Nueva característica
fix: Corrección de bug
docs: Cambios en documentación
style: Cambios de formato

⚡ Issues para Debutantes Ambiciosos

¿Primera vez contribuyendo? ¡Genial! Busca issues etiquetados como:

good first issue help wanted difficulty: easy
Ver Issues

🏆 Hall of Fame

Todos los contribuidores son reconocidos y valorados. Tu nombre aparecerá en:

📝

README.md

🎉

Release Notes

👥

Contributors Page

📖 Guía Completa

Sobre el Autor

Pablo Martínez
😎

Pablo Martínez

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

💖 Apóyame con una donación

Tu apoyo me ayuda a seguir desarrollando herramientas útiles y gratuitas para la comunidad