Cursor trail effect for a website

<style>body { margin: 0; min-height: 100vh; background: #0e0f14 }</style>
<canvas id="trail" aria-hidden="true" style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10"></canvas>
<script>
const canvas = document.getElementById('trail')
const g = canvas.getContext('2d')
const LIFE = 0.6, STEP = 6, FOLLOW = 18 // seconds a point lives, px between points, spring rate
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
const touch = matchMedia('(pointer: coarse)').matches
let w, h, dpr
function size() {
  dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
}
size(); addEventListener('resize', size)
const pts = [] // { x, y, t, cut }: cut starts a new stroke
const target = { x: 0, y: 0 }, head = { x: 0, y: 0 }
let running = false, seen = false, last = 0
function wake() {
  if (running) return
  running = true; last = performance.now(); requestAnimationFrame(frame)
}
if (!still && !touch) addEventListener('pointermove', (e) => {
  target.x = e.clientX * dpr; target.y = e.clientY * dpr
  if (!seen) { head.x = target.x; head.y = target.y; seen = true }
  wake()
})
// Touch has no hover: a tap draws one small ring that fades instead.
if (!still && touch) addEventListener('pointerdown', (e) => {
  const now = performance.now()
  for (let i = 0; i <= 24; i++) {
    const a = (i / 24) * Math.PI * 2
    pts.push({ x: (e.clientX + Math.cos(a) * 18) * dpr,
      y: (e.clientY + Math.sin(a) * 18) * dpr, t: now, cut: i === 0 })
  }
  wake()
})
function frame(now) {
  const dt = Math.min(0.05, (now - last) / 1000); last = now
  if (seen) {
    const k = 1 - Math.exp(-FOLLOW * dt) // the head eases after the pointer
    head.x += (target.x - head.x) * k; head.y += (target.y - head.y) * k
    const p = pts[pts.length - 1]
    if (!p || Math.hypot(head.x - p.x, head.y - p.y) > STEP * dpr)
      pts.push({ x: head.x, y: head.y, t: now, cut: !p })
  }
  while (pts.length && now - pts[0].t > LIFE * 1000) pts.shift()
  g.clearRect(0, 0, w, h)
  g.lineCap = 'butt'; g.lineJoin = 'round'
  for (let i = 1; i < pts.length; i++) {
    const a = pts[i - 1], b = pts[i]
    if (b.cut) continue
    const age = 1 - (now - b.t) / (LIFE * 1000) // 1 new, 0 gone
    g.strokeStyle = 'hsla(' + (190 + 130 * (1 - age)) + ',90%,62%,' + age + ')'
    g.lineWidth = (1 + 9 * age) * dpr
    g.beginPath(); g.moveTo(a.x, a.y); g.lineTo(b.x, b.y); g.stroke()
  }
  const moving = Math.hypot(target.x - head.x, target.y - head.y) > 0.5
  if (pts.length || (seen && moving)) requestAnimationFrame(frame)
  else running = false // idle: no frames at all
}
</script>

A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.

1. 

   web

   Image TrailClaude CodeCodexCursor+3 more agents

   Motion Heroes · Pro

   Image Trail

   Image trail hero · page + embed · 1080p loop

   An image trail: moving the pointer deals prints onto a table. Each print falls, slides on in the direction of travel and settles at its own angle with a two-layer shadow, dries, fades the way photographs fade and is picked up, so the trail reads as a gradient of time. It deals by distance, so a slow drag lays an overlapping fan and a fast sweep spreads the prints out; a tap deals one, and on phones the hand runs a path that never rests a print on the headline.

   Worth knowing: The pictures are drawn in code (photographic prints, paint cards, fabric and plaster chips), not your own photos.

   Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video

   See what Image Trail makes
2. 

   web

   Dot Field HeroClaude CodeCodexCursor+3 more agents

   Motion Heroes · Pro

   Dot Field Hero

   Canvas 2D dot field · page + embed · 1080p loop

   A field of thousands of dots that act like iron filings near a magnet. Dots near the cursor are pushed aside, grow and light up in the accent color, then spring back past home and settle, and rings spread from the cursor’s trail and fade. With no pointer, on phones and in the video, a virtual cursor glides on a closed path.

   Worth knowing: The trail is ripples in a fixed grid of dots inside the hero, not a line or images.

   Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video

   See what Dot Field Hero makes
3. 

   web

   Blueprint Flashlight HeroClaude CodeCodexCursor+3 more agents

   Motion Heroes · Pro

   Blueprint Flashlight Hero

   Canvas 2D blueprint reveal · page + embed · 1080p loop

   A warm lamp follows the pointer on a spring over a technical drawing and leaves a short fading trail. Inside the light a product appears in fine lines with dimensions and numbered callouts, and each callout types in while the light rests on it. Without a pointer it tours the sheet on a closed path.

   Worth knowing: The five product drawings are generic and made in code, not your own product’s design.

   Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video

   See what Blueprint Flashlight Hero makes
4. 

   web

   Spotlight Type HeroClaude CodeCodexCursor+3 more agents

   Motion Heroes · Pro

   Spotlight Type Hero

   Canvas 2D spotlight on a type wall · page + embed · 1080p loop

   A dark wall of giant type where a soft spotlight follows the pointer and shows the words underneath in bright gradient fill, with a smaller second light trailing behind it. One row hides a line, such as a date, an offer or a launch, that appears only under the light. On touch screens the light follows a finger while it drags.

   Worth knowing: The hidden line holds 24 characters, and the dark wall feels heavy on bright, airy pages.

   Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video

   See what Spotlight Type Hero makes

• Parallax effect
• Confetti animation
• Fireflies animation
• Kinetic typography
• Best hero animations for Claude Code
• Animated website examples
• All effects