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