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.
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.
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.
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°)
Have questions or feature suggestions? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
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.
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.
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.
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°)
Have questions or feature suggestions? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
