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, andperspective. - Physics-Based Spawning: Control
speed,angle,spread, andfriction. - 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