Gravity Mousee Trail

GSAP gravity simulations

Gravity Mouse Trail is an interactive React code component for Framer that spawns dynamic image sequences along the user's cursor movement. Powered by GSAP physics timelines, images appear with an elastic bounce, drift horizontally, fall to the bottom of the container under simulated gravity, and rebound outward before clean memory disposal.

What it does

• GSAP Physics & Gravity Timelines: Renders smooth, multi-stage particle physics (spawn bounce, gravity fall, horizontal drift, and floor rebound) without performance drops.

• Smart Device Detection: Automatically bypasses execution on touch/coarse pointer devices (mobile/tablets) to preserve optimal touch interactions.

• Automatic Performance Cap: Features a configurable active instance threshold (Max Trails) and DOM cleanup on timeline completion to maintain high FPS.

• Canvas-Safe Static Preview: Built with Framer's useIsStaticRenderer check to prevent unwanted canvas triggers during layout design.

Great for

• Interactive Hero Sections: Add playful, high-engagement cursor interactions on agency landing pages or brand showcases.

• Creative Portfolios: Display project thumbnails, photography previews, or visual highlights dynamically as users move their mouse.

• Event & Festival Banners: Spawn branded assets, sponsor logos, or promotional imagery in real time.

• E-Commerce Showcases: Highlight product variants, collection previews, or lookbook shots on cursor movement.

What you can customize

Full control right from the Framer canvas property panel — no code editing required:

• Images — Upload custom image arrays triggered sequentially along the cursor path

• Sensitivity — Adjust Distance Threshold Ratio to control cursor movement distance required between image spawns

• Elasticity & Rotation — Fine-tune spawn bounce intensity, toggle rotation, and set custom rotation degree ranges (0°–90°)

Need help?

Have questions or feature suggestions? Reach out anytime at [email protected] or on X @karimsaif0.