Silky Mouse Trail

Silky Mouse Trail is a high-performance cursor trail effect that renders a fluid ribbon following the user’s pointer. It uses a canvas-based system with custom physics to simulate inertia, damping, and speed-based motion.

The trail dynamically adjusts width and color based on cursor velocity, creating a natural, silk-like flow. It runs outside the canvas in preview and publish mode, while staying invisible in the editor using a canvas guard.

Features

Silky Mouse Trail includes the following features out of the box:

• Physics-Based Motion — Smooth trailing effect with inertia, damping, and velocity influence• Speed Reactive Width — Trail expands and contracts based on cursor speed• Gradient Color Blending — Seamless transition between head and tail colors• High Performance Canvas Rendering — Efficient drawing loop using requestAnimationFrame• Stable Motion Handling — Prevents jitter and glitches with smart edge calculations• Pointer Tracking — Follows cursor with accurate and responsive updates• Auto Resize Support — Adjusts canvas resolution based on screen size and pixel ratio• Canvas Guard — Hidden in editor, active only in preview and live mode• Non-Interactive Layer — Pointer events are disabled so it never blocks UI

Property Controls

Length — Controls the number of segments in the trailHead Width — Sets the thickness of the trail at the frontTail Width — Sets the thickness at the end of the trailHead Color — Defines the color near the cursorTail Color — Defines the color at the end of the trailDamping — Adjusts how tightly the trail follows the cursorMax Speed — Sets the speed threshold for width scalingZ-Index — Controls stacking order above other layers

Ideal Use Cases

• Portfolio websites that need a unique cursor effect• Agency and studio sites with strong visual identity• Landing pages that benefit from subtle motion• Interactive experiences and creative projects

It adds a polished, modern feel without interfering with layout or interactions.