Dither Cursor Trail
A soft trail follows the pointer and breaks into chunky ordered-dither dots as it fades - wide and solid near the cursor, thinning into scattered specks toward the tail. Good for a hero backdrop or an editorial section that wants an interactive layer without any imagery. Different from our Dithering component: that one is a Bayer filter laid over a photo or video with a cursor lens, this one uses the dither pattern as the renderer for a live decaying field, with no image involved. On touch devices, dragging a finger splats the trail; a single tap does not.
One of 85 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The obvious way to build this is to stamp a blob where the cursor is and fade the picture down every frame. You get a trail, but the tail is only old stuff dying, so its shape is a side effect - mine went thin too fast and then stopped instead of fading, and no amount of tweaking helped.
So I rebuilt it as a chain. A line of points sits behind the cursor, each chasing the one in front, and every point knows where it sits in that line. Once you know that, the tail is something you decide - how wide it is at each step, how many dots survive - instead of something that just happens. The dots come from the old newsprint trick, so as the trail thins they drop out one at a time and it breaks apart instead of going see-through.
After that it's yours. Set the colours, size the dots, and pick how long the tail runs - measured in blob widths, so a bigger blob gets a longer tail to match. You can draw it out to a point or keep it even, and set how loosely it swings behind the cursor. It only draws while you're moving.
What you'll need.
Install
- GSAP
- three
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Dither Cursor Trail work with React and Vue?
- Dither Cursor Trail ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Dither Cursor Trail?
- Yes. Dither Cursor Trail is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Dither Cursor Trail without editing code?
- Dither Cursor Trail exposes 9 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Dither Cursor Trail free?
- Dither Cursor Trail is part of the Annnimate Library, a paid subscription (from EUR 20/month billed quarterly, or EUR 199/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Dither Cursor Trail is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Dither Cursor Trail or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Dither Cursor Trail in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Dither Cursor Trail on as many projects as you build, with no attribution required.
- Does Dither Cursor Trail respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
