---
title: "CursorPixelTrail — Framer component · Best of Framer"
description: "$5.00 · Framer component · by MJ Jung · Cursors. Installation & Setup To add the CursorPixelTrail component to your Framer project Open your Framer project."
canonical: "https://framer.elliotli.dev/component/cursorpixeltrail"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/CursorPixelTrail

# CursorPixelTrail

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

![CursorPixelTrail preview image 1](https://framer.elliotli.dev/og/component/cursorpixeltrail/91dd54e2ff85e3f4/1600x1200.jpg)

## Summary

Installation & Setup To add the CursorPixelTrail component to your Framer project Open your Framer project.

## Description

## 1\. Introduction

Create dynamic, interactive pixel trails that respond to cursor movement, enhancing user engagement with glowing effects.

## 2\. Features

-   Interactive grid-based pixel trail effect.
    
-   Glowing pixels that fade over time.
    
-   Customizable parameters for color, size, and behavior.
    
-   Gooey effect for liquid-like blending between pixels.
    
-   Optional pulsing animation for active pixels.
    

## 3\. Installation & Setup

To add the CursorPixelTrail component to your Framer project

-   Open your Framer project.
    
-   Navigate to the Framer Marketplace.
    
-   Search for "CursorPixelTrail" and click on the component.
    
-   Click "Add to Project" to include it in your workspace.
    

## 4\. How to Use

-   Drag and drop the CursorPixelTrail component onto your canvas.
    
-   Customize the component properties in the properties panel.
    
-   Adjust settings such as glowColor, backgroundColor, and gridSize to fit your design.
    
-   Preview your project to see the pixel trail effect in action.
    

## 5\. Property Controls Reference

-   **glowColor** (Color, Default: #00ff88) - Color of the glowing pixels.
    
-   **backgroundColor** (Color, Default: #0a0a0a) - Canvas background color.
    
-   **gridSize** (Number, Default: 20) - Size of each pixel in the grid (px).
    
-   **pixelGap** (Number, Default: 4) - Space between pixels (px).
    
-   **pixelRoundness** (Number, Default: 4) - Corner radius of pixels. 0 = square.
    
-   **glowIntensity** (Number, Default: 0.9) - Maximum brightness of activated pixels.
    
-   **fadeSpeed** (Number, Default: 0.03) - Speed at which pixels fade out. Lower values result in longer trails.
    
-   **trailLength** (Number, Default: 80) - Radius of cursor activation area (px).
    
-   **gooeyEnabled** (Boolean, Default: true) - Enable liquid-like blending between pixels.
    
-   **gooeyStrength** (Number, Default: 8) - Influence of neighboring pixels when gooey effect is enabled.
    
-   **pulseEnabled** (Boolean, Default: false) - Enable subtle pulsing animation for active pixels.
    
-   **pulseSpeed** (Number, Default: 2) - Speed of the pulse animation.
    
-   **transparentBg** (Boolean, Default: false) - Set background transparent for overlay use.
    

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

-   All · #10680

## Details

- **Author**: MJ Jung
- **Price**: $5.00
- **Published**: 2025-12-23
- **Updated**: 2025-12-23
- **Added**: 2025-12-14
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…