Dither Cursor Trail in Vue.
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.
Install Dither Cursor Trail in your Vue project
Dither Cursor Trail ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.
Where it goes in your Vue app
Dither Cursor Trail is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.
In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.
The component uses the <script setup> composition API and TypeScript-friendly defineProps.
Vue-specific gotchas
GSAP cleanup in onUnmounted, not onBeforeUnmount
onUnmounted to kill tweens and ScrollTriggers. onBeforeUnmount fires while the DOM is still mounted, but onUnmounted is the more idiomatic place for animation cleanup in Vue 3.Template refs are .value, not .current
const el = ref(null); access as el.value (not el.current like React). Pass el.value into gsap.to / gsap.from targets.Register plugins once, outside setup
gsap.registerPlugin(ScrollTrigger, ...)) can run at module top level in Vue 3 + Vite because the build is client-first. In Nuxt with SSR, wrap in if (process.client) or place inside onMounted.Common questions
- Does Dither Cursor Trail work in Nuxt 3?
- Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in
- Does Dither Cursor Trail work with Vue 2?
- No - the component uses the Vue 3 Composition API and