CursorPixelTrail

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.