"use client" import type React from "react" import { useEffect, useRef, useState, useCallback } from "react" interface Pixel { id: number x: number y: number opacity: number age: number } const COLORS = ["#ffffff", "#e0e0e0", "#c0c0c0", "#909090", "#707070"] const PIXEL_SIZE = 12 const TRAIL_LENGTH = 40 const FADE_SPEED = 0.04 export function PixelCursorTrail() { const containerRef = useRef(null) const [pixels, setPixels] = useState([]) const pixelIdRef = useRef(0) const lastPositionRef = useRef({ x: 0, y: 0 }) const animationRef = useRef() const createPixel = useCallback((x: number, y: number) => { return { id: pixelIdRef.current++, x, y, opacity: 1, age: 0, } }, []) const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const dx = x - lastPositionRef.current.x const dy = y - lastPositionRef.current.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance > PIXEL_SIZE) { const newPixel = createPixel(x, y) setPixels((prev) => [...prev.slice(-TRAIL_LENGTH), newPixel]) lastPositionRef.current = { x, y } } }, [createPixel], ) useEffect(() => { const animate = () => { setPixels((prev) => prev .map((pixel) => ({ ...pixel, opacity: pixel.opacity - FADE_SPEED, age: pixel.age + 1, })) .filter((pixel) => pixel.opacity > 0), ) animationRef.current = requestAnimationFrame(animate) } animationRef.current = requestAnimationFrame(animate) return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, []) return (

{pixels.map((pixel, index) => { // Calculate size based on age - older pixels are smaller const sizeMultiplier = Math.max(0.3, 1 - pixel.age / 100) const currentSize = PIXEL_SIZE * sizeMultiplier return (

) })}

Move cursor

) }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Pixel Trail

Created by

Installation

How to use