EzMouseTrail: Interacciones de Partículas de Alto Rendimiento

EzMouseTrail es un web component ligero y de alto rendimiento diseñado para dar vida a las interacciones del usuario. Construido con un sistema de modificadores personalizado, permite simulaciones físicas complejas —desde succión de vórtice hasta gravedad direccional— todo configurable mediante una única cadena de atributos.

Características Clave

• Motor de Modificadores Personalizado: Encadena efectos como lorenz, vortex, glitch, y perspective.
• Generación Basada en Física: Controla speed (velocidad), angle (ángulo), spread (dispersión) y friction (fricción).
• Integración con Material Icons: Utiliza cualquier nombre de icono o carácter unicode como partícula.
• Inicializadores de un Solo Uso: Aleatoriza la rotación y la posición solo en el momento del “nacimiento” de la partícula.

Demos en Vivo

A continuación se presentan conjuntos de comportamientos preconfigurados. Cada demo destaca una combinación diferente de lógica y modificadores.

Autumn (Otoño)

Un efecto tranquilo y errante que utiliza atractores de lorenz y bounds_wrap. Estas hojas pulsan y se balancean con un ajuste alto de friction y sticky_trail para un flote tipo zen.

<ez-mouse-trail
  max-items="30"
  trail-behaviour="area"
  spawn-behavior="timer"
  spawn-variable="5"
  life-single="4000"
  icon-string="eco"
  color-string="#f5dfc3,#e7ba9b,#FFD3B6"
  modifier-string="init_scale/0,init_rotation_r/50,lorenz/10/2,gravity/1/50,sticky_trail/15/80,rotate/1,friction/10/50,pulse/5/1"
></ez-mouse-trail>

Circle Chain (Cadena de Círculos)

Una simulación de “cuerda” física. Utiliza chain, chain_scale, y chain_fade para vincular 20 partículas en una sola cola cohesiva que sigue al cursor.

<ez-mouse-trail
  max-items="20"
  trail-behaviour="hover"
  spawn-behavior="timer"
  spawn-variable="20"
  icon-string="circle"
  life-single="5000"
  color-string="#ffffff,#e5e5e5,#cbcbcb,#b1b1b1,#a4a4a4,#979797,#8b8b8b,#808080,#797979,#696969,#616161,#5a5a5a,#525252,#4a4a4a,#444444"
  modifier-string="alive_mouseover/0,chain/30/15,chain_rotate/0,chain_scale/80,chain_fade/30"
></ez-mouse-trail>

Black Hole (Agujero Negro)

Utiliza lógica de vortex (vórtice) y jitter (temblor) de alta velocidad. Estrellas y círculos Unicode son atraídos hacia un punto gravitatorio central con una escala inicial aleatoria.

<ez-mouse-trail
  max-items="30"
  trail-behaviour="hover"
  spawn-behavior="chance"
  spawn-variable="40"
  icon-string="✦,●,·,✧"
  life-single="2000"
  icon-size="18"
  color-string="#6a0dad,#5c0ba7,#4b0082"
  modifier-string="vortex/20/20,jitter/15,friction/15,init_scale_random/20/120"
></ez-mouse-trail>

Love Burst (Explosión de Amor)

Una explosión de alta velocidad activada al hacer click. Incluye un modificador launch a -90° (hacia arriba) seguido de una atracción de gravity (hacia abajo) y varianza de velocidad aleatoria.

<ez-mouse-trail
  max-items="40"
  trail-behaviour="click"
  spawn-behavior="timer"
  spawn-variable="100"
  click-duration="100"
  life-single="1200"
  icon-string="favorite"
  color-string="#FF0000,#FF69B4,#FFA07A"
  modifier-string="launch/40/-90,init_rotation_r/10/10,init_velocity_random/10/10,init_random/20/20,gravity/15/90,friction/8,rotate/1/50"
></ez-mouse-trail>

Starry Night (Noche Estrellada)

Un comportamiento ambiental de tipo area donde las partículas orbitan (orbit) alrededor de sus puntos de origen. Incluye hue_cycle e init_scale_random para un cielo vibrante y brillante.

<ez-mouse-trail
  max-items="60"
  trail-behaviour="area"
  spawn-behavior="chance"
  spawn-variable="10"
  icon-string="flare,star"
  icon-size="12"
  color-string="#fbff00,#ffbb00f1"
  modifier-string="init_rotation_r/50,init_scale_random/100/150,orbit/60/40,friction/3,hue_cycle/-10/10,rotate/1"
></ez-mouse-trail>

Playground (Zona de Juegos)

La prueba de estrés definitiva. Formas geométricas usan bounds_bounce para rebotar en los bordes, lógica de orbit y solo permanecen activas mientras mousedown está presionado.

<ez-mouse-trail
  max-items="15"
  trail-behaviour="click_and_hover"
  spawn-behavior="timer"
  spawn-variable="10"
  life-single="1000"
  icon-string="■,◆,▲"
  color-string="#FF0000,#00FF00,#0000FF,#FFFF00"
  modifier-string="alive_mousedown/0,launch/10/45,init_velocity_random/-360/360,friction/-10,orbit/800/90,chain_fade/50,chain_rotate/50,bounds_bounce/100/5"
></ez-mouse-trail>

¿Ya te has convencido?

Puedes obtener el componente o revisar su documentación haciendo clic en los botones de abajo.