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.
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)
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.
Flowit Supply
