Gravity Cursor scatters a trail of little shapes behind the pointer. Each one pops into place, spins a full turn, and falls away under gravity — a playful, physical layer of motion that makes a page feel alive the moment someone moves the mouse.
Choose from seven built-in shapes with your own color palette, or drop in your own images for a fully branded trail. Run it across a full page, or scope it to a single frame when only one section should come to life.
You have full control over size, spacing, pool count, spin, fall distance, and duration — everything from a slow, sparse drift to a dense, energetic burst.
See it live below:
Features
Physics-based trail: elastic pop-in, full-turn spin, gravity fall
Seven built-in shapes — circle, square, triangle, diamond, star, plus, heart — or mix them all
Use your own images for a branded trail
Custom color palette that cycles automatically
Full-viewport, or scoped to a single frame
Keeps running over video, map, and 3D embeds that normally kill cursor effects
Respects reduced-motion preferences
Lightweight and performance friendly — no external libraries
Zero setup, no code required
How it works
Drop the component onto the page and it starts working. Pick Shapes or Images, set the Gap to control how far the pointer travels between drops, and tune the motion to taste. A fixed pool of elements is recycled as you go, so the cost stays flat no matter how long someone plays with it.
Modes
Area: Whole Page — the trail covers the full viewport on the page it's placed on. Add the component to each page you want it on.
Area: This Frame — the trail only appears inside the frame you place it in
Embeds: Bridge — keeps the trail alive across same-origin embeds, with no effect on how they behave
Embeds: Shield — keeps the trail alive over video, map, and 3D embeds that would otherwise swallow the pointer. The visitor clicks once to interact with the embed, then it behaves normally.
Requirements
A Framer plan that supports code components. Gravity Cursor runs on desktop pointers and is intentionally disabled on touch devices, and for visitors who prefer reduced motion.
Gravity Cursor scatters a trail of little shapes behind the pointer. Each one pops into place, spins a full turn, and falls away under gravity — a playful, physical layer of motion that makes a page feel alive the moment someone moves the mouse.
Choose from seven built-in shapes with your own color palette, or drop in your own images for a fully branded trail. Run it across a full page, or scope it to a single frame when only one section should come to life.
You have full control over size, spacing, pool count, spin, fall distance, and duration — everything from a slow, sparse drift to a dense, energetic burst.
See it live below:
Features
Physics-based trail: elastic pop-in, full-turn spin, gravity fall
Seven built-in shapes — circle, square, triangle, diamond, star, plus, heart — or mix them all
Use your own images for a branded trail
Custom color palette that cycles automatically
Full-viewport, or scoped to a single frame
Keeps running over video, map, and 3D embeds that normally kill cursor effects
Respects reduced-motion preferences
Lightweight and performance friendly — no external libraries
Zero setup, no code required
How it works
Drop the component onto the page and it starts working. Pick Shapes or Images, set the Gap to control how far the pointer travels between drops, and tune the motion to taste. A fixed pool of elements is recycled as you go, so the cost stays flat no matter how long someone plays with it.
Modes
Area: Whole Page — the trail covers the full viewport on the page it's placed on. Add the component to each page you want it on.
Area: This Frame — the trail only appears inside the frame you place it in
Embeds: Bridge — keeps the trail alive across same-origin embeds, with no effect on how they behave
Embeds: Shield — keeps the trail alive over video, map, and 3D embeds that would otherwise swallow the pointer. The visitor clicks once to interact with the embed, then it behaves normally.
Requirements
A Framer plan that supports code components. Gravity Cursor runs on desktop pointers and is intentionally disabled on touch devices, and for visitors who prefer reduced motion.