Pixelate Hover Trail

Pixelated Trail Hover Component

An interactive visual effect that creates an animated pixelated trail following your cursor as you move across images or videos. The component uses HTML5 canvas to render real-time pixelation effects with smooth fade-out animations.

Key Features:

• Media Support: Works seamlessly with both static images and video files (MP4, WebM, OGG)

• Animated Trails: Creates a beautiful trailing effect that fades elegantly using customizable easing functions

• Cover Behavior: Maintains aspect ratio with CSS object-fit: cover functionality, preventing distortion during browser resizing

• Dynamic Resizing: Automatically adapts to component and browser size changes without flickering

• Customizable Controls:

  • Pixel Size: Adjust the blockiness of the pixelation (2-50px)

  • Effect Radius: Control the size of the pixelated circle around the cursor (20-200px)

  • Trail Duration: Set how long the trail persists (0.5-5 seconds)

  • Easing Types: Choose from 7 elegant animation curves (Linear, Ease Out, Ease In/Out, Ease Out Quart, Ease Out Expo, Ease Out Circ, Ease Out Back)

  • Trail Spacing: Adjust density of trail points for continuous or dotted effects (5-50px)

Technical Highlights:

• Real-time canvas pixel manipulation for smooth performance

• ResizeObserver for responsive canvas sizing

• RequestAnimationFrame for 60fps animations

• Circular fade gradient for polished visual quality

• Automatic video playback with loop and mute

Perfect for creative portfolios, interactive galleries, artistic presentations, or any project needing a unique, eye-catching hover effect.