Guide
How to use Spark Trail
Spark Trail is an electric spark web that follows the cursor. This page covers setup, what each preset actually does, and what every control changes. Move your mouse over any card below. They are all live.
Getting started
01
Drag Spark Trail onto any page. You will find it in the Assets panel under Code.
02
Size it to fill its section. It works at any size, and a full bleed frame at 100vh makes the best background.
03
Pick a preset in the properties panel. Each one is a different behavior, not a recolor.
04
Set the spark, arc and background colors to match your brand, or leave them to the preset.
05
Tune anything you like. Presets set starting values and never lock a control.
The eight presets
Every preset changes the geometry and motion of the web, not just its colors. Hover each card to feel the difference.
Electric
Curved crackle arcs in a loose web. The default.
Lightning
Long segmented bolts strobing between far apart sparks.
Constellation
Bright star dots joined by calm straight lines.
Plasma
Sparks orbit the cursor in a soft glowing swirl.
Embers
Warm sparks that rise, float and rarely link.
Comet
Fast streaks stretched along their motion with a long afterglow.
Silk
Hanging threads that sag and slowly settle, like gauze.
Vortex
A tight spiral winding around the pointer.
Every control
Everything in the visitor panel maps to a property control, so whatever a visitor can change on the demo, you can set permanently in the editor.
Behavior
Preset
Eight behaviors. Custom follows the Electric values until you change something.
Spread
Scatter radius around the pointer. Low is a tight thread, high is a wide field.
Link Range
Sparks closer than this arc together. The web knob.
Arc Style
Curved, Bolt, Straight or Thread geometry for every link.
Jitter
Kink in each arc. Zero is clean, high is chaotic.
Emission
Sparks per frame while the pointer is over the component.
Lifetime
Seconds each spark survives.
Drift
Starting velocity scatter.
Gravity
Positive settles sparks down, negative floats them up.
Swirl
Orbital pull around the pointer.
Streak
Stretches sparks along their motion.
Sparks
Population cap.
Style
Colors
Spark, arc and background. Unset values follow the preset.
Size
Dot radius. Also scales arc thickness.
Glow
Soft halo behind every spark.
Trail
Afterglow persistence. Higher lingers longer.
Overlay
Overlay
Shows the in-canvas panel to visitors.
Box Position
Pins the panel to any corner.
Menus
Four switches take rows off the panel per instance.
Intro Burst
Fires a burst on load so the effect shows before the first hover.