FluxJS

¡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 FluxJS 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 FluxJS. 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 FluxJS con nuestra demo interactiva que te dejará sin palabras

🎮 Experiencia Interactiva ✨

Interactivo

Tiempo Real

Inmersivo

Inteligencia Artificial Built-In 🧠

FluxJS piensa por ti con IA integrada que optimiza automáticamente cada detalle

🤖 Zero configuración: La IA de FluxJS 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: FluxJS 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 FluxJS al siguiente nivel

🎛️ Personalización avanzada: Estas configuraciones te permiten afinar cada detalle de FluxJS. ¡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

🧬

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 FluxJS

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

👥

Comunidad activa

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

💬 Comparte tu Historia 🤝 Colaborar con Nosotros

Únete a la Revolución 🤝

FluxJS 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 FluxJS? ¡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 FluxJS!

• 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 FluxJS 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

Partículas Increíbles Sin Esfuerzo

¡Empezar es Irresistiblemente Fácil! 🚀

🎯 Solo 3 Pasos Hacia la Gloria Digital

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

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

2 Crea un contenedor para las partículas:

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

Ejemplo Completo - ¡Listo para Enamorar!

Opción 2: Para Seductores Digitales

📦 Instalación con NPM:

🔧 Uso en tu código:

Configuración para Conquistar Corazones

¡Ya Está Listo!

Tres Formas de Usarlo 💡

Fondo de Página

Solo una Sección

Múltiples Efectos

Galería de Pura Genialidad ✨

🫧 Burbujas de Fondo

🔗 Red de Conexiones

🌌 Galaxia Rotante

🎨 Rastro Arcoíris

🚀 Demo que Te Volará la Cabeza

Inteligencia Artificial Built-In 🧠

Cuida tu Batería

Perfecto en Móviles

Pausa Inteligente

Inclusivo por Defecto

Velocidad Extrema

Diagnóstico por IA

IA que Trabaja por Ti

Guía Express de Personalización 📋

Configuración Personalizada

Comandos de Control

Laboratorio de Creación 🎨

Centro de Control 🎛️

Parámetros Básicos

Estilo Visual

Efectos Avanzados

Interactividad & Física

Tu Fórmula Mágica

Historias de Éxito 💬

Javier Fernández Gutiérrez

Julian Videla

Luis Chicaiza

Simeí Lavalle

Caled Flores

Juan Ramón Rodríguez

Denise Lara

Paul Uzcategui

Brayan Reyes Rodríguez

Andrés Medina

Axel Domingo Lara Parés

Reinaldo González

Únete a la Revolución 🤝

Reportar Problemas

Sugerir Ideas

Ayudar con Código

Mejorar Documentación

Crear Ejemplos

Probar en Dispositivos

🚀 Cómo Contribuir (Si Sabes Programar)

Copia el Proyecto

Crea una Nueva Rama

Haz tus Cambios

Envía tu Mejora

📝 Convenciones de Commits

⚡ Issues para Debutantes Ambiciosos

🏆 Hall of Fame

Sobre el Autor

Pablo Martínez

Partículas
Increíbles
Sin Esfuerzo

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

2
Crea un contenedor para las partículas: