Skip to content

component

Pixel Magnet Cursor

By Karim Saif

Details

Summary

Pixel Magnet Cursor is an interactive canvas-based cursor effect for Framer that turns simple square particles into a dynamic magnetic field.

Description

Pixel Magnet Cursor for Framer Pixel Magnet Cursor is an interactive canvas-based cursor effect for Framer that turns simple square particles into a dynamic magnetic field. As the cursor moves across the component, pixels smoothly react to its position—either being pulled toward the cursor like a magnetic force or pushed away with a repelling effect. ✨ Key Features Magnetic Cursor Physics — Create a dynamic attraction effect where pixels naturally move toward the cursor. Repel Mode — Reverse the physics and push particles away from the cursor for a more energetic interaction. Adjustable Magnetic Radius — Control how far the cursor's influence extends across the canvas. Custom Pull Strength — Fine-tune the intensity of the magnetic force. Three Falloff Modes — Choose between Smooth, Linear, and Wide force attenuation for different interaction feels. Smooth Cursor Tracking — Adjust cursor smoothing from subtle and fluid to fast and responsive. Dynamic Particle Density — Control the number of particles from a minimal effect to a dense particle field. Custom Pixel Sizes — Set minimum and maximum particle sizes to create different visual styles. Particle Lifetime System — Particles automatically fade, expire, and respawn to maintain a continuous effect. Spawn Radius Control — Define how widely particles appear around the cursor. Adjustable Drift Speed — Add subtle independent movement to the particles. 🛠 Support X: https://x.com/karimsaif0 Email: karimsaif010@gmail.com If you use this component in a project, I'd love to see what you create with it.

Introduction

Pixels smoothly react

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300133808/158/228/309/79/15
  • All · #3380