---
title: "Pixelate Hover Trail — Free Framer component · Best of Framer"
description: "Free Framer component · by Flowit Supply · Effects. Pixelated Trail Hover Component An interactive visual effect that creates an animated pixelated trail following your cursor as you move…"
canonical: "https://framer.elliotli.dev/component/pixelate-hover-trail"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Pixelate Hover Trail

# Pixelate Hover Trail

[View on Framer](https://framer.com/marketplace/components/pixelate-hover-trail/?via=elliot-li)

![Pixelate Hover Trail preview image 1](https://framer.elliotli.dev/og/component/pixelate-hover-trail/d4053d3bf9183166/1600x1200.jpg)

## Summary

Pixelated Trail Hover Component An interactive visual effect that creates an animated pixelated trail following your cursor as you move across images or videos.

## Description

### 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1205

## Details

- **Author**: Flowit Supply
- **Published**: 2025-12-11
- **Updated**: 2025-12-11
- **Added**: 2025-12-05
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows