Already purchased EzMouseTrail: High-Performance Particle Interactions? Awesome! Everything you need to get this running in your own project—including detailed API references, advanced modifier logic, and integration guides—is available in our dedicated docs.

→ View Technical Documentation

EzMouseTrail: High-Performance Particle Interactions

EzMouseTrail is a lightweight, high-performance web component designed to bring life to user interactions. Built with a custom modifier system, it allows for complex physics simulations—from vortex suction to directional gravity—all configurable via a single attribute string.

Key Features

  • Custom Modifier Engine: Chain effects like lorenz, vortex, glitch, and perspective.
  • Physics-Based Spawning: Control speed, angle, spread, and friction.
  • Material Icon Integration: Use any icon name or unicode character as a particle.
  • One-Shot Initializers: Randomize rotation and position only at the moment of birth.

Live Demos

Below are the pre-configured behavior sets. Each demo highlights a different combination of the logic and modifiers.

Autumn

A tranquil, drifting effect using lorenz attractors and bounds_wrap. These leaves pulse and sway with a high friction and sticky_trail setting for a zen-like float.

<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

A physical “string” simulation. Uses chain, chain_scale, and chain_fade to link 20 particles into a single cohesive, fading tail that follows the 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

Utilizes high-speed vortex and jitter logic. Unicode stars and circles are pulled into a central gravitational point with random initial scaling.

<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

A high-velocity explosion triggered on click. Features a launch modifier at -90° (upward) followed by a gravity pull (downward) and random velocity variance.

<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

An ambient area behavior where particles orbit around their spawn points. Features hue_cycle and init_scale_random for a shimmering, living sky.

<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

The ultimate stress test. Geometric shapes use bounds_bounce to ricochet off the edges, orbit logic, and only stay alive while mousedown is active.

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

Already Convinced?

You can get the component, or check it’s documentations by clicking on the buttons below

EzComponents

Providing unique experiences for the web


A versatile web component for dynamic, interactive mouse trails using custom physics and Material Icons.


On this page: