Magic Mouse Trail Bring your cursor to life with dynamic trails and engaging idle effects. Designed for performance and ease of use, this component adds a layer of interactivity to any Framer site without affecting your layout.
Key Features:
Dual Modes: Choose between Image trails (upload your own assets) or Text/Emoji trails with full font control.
Smart Idle Effect: Automatically displays a static "linger" image or emoji when the user stops moving their mouse, keeping the screen alive.
Trigger Areas: set the effect to Global (entire screen) or Local (only within a specific section or card).
Zero Layout Shift: Uses fixed or absolute positioning to float above your content, ensuring it never breaks your existing layout.
Performance First: Built with framer-motion and optimized logic (distance thresholding) to ensure buttery smooth 60fps animations.
Full Customization: Fine-tune everything—spacing, fade duration, scale range, rotation randomness, and Z-index.
How to Use:
Drag the component onto your canvas.
For Global Effect: Leave it anywhere on the page.
For Local Effect: Place it inside a Frame/Section, set Position to Absolute, Size to 100%, and change "Trigger Area" to Component Only.
Upload your images or type your emojis in the properties panel.
Turn on Idle Effect to show a special element when the mouse pauses!
Magic Mouse Trail Bring your cursor to life with dynamic trails and engaging idle effects. Designed for performance and ease of use, this component adds a layer of interactivity to any Framer site without affecting your layout.
Key Features:
Dual Modes: Choose between Image trails (upload your own assets) or Text/Emoji trails with full font control.
Smart Idle Effect: Automatically displays a static "linger" image or emoji when the user stops moving their mouse, keeping the screen alive.
Trigger Areas: set the effect to Global (entire screen) or Local (only within a specific section or card).
Zero Layout Shift: Uses fixed or absolute positioning to float above your content, ensuring it never breaks your existing layout.
Performance First: Built with framer-motion and optimized logic (distance thresholding) to ensure buttery smooth 60fps animations.
Full Customization: Fine-tune everything—spacing, fade duration, scale range, rotation randomness, and Z-index.
How to Use:
Drag the component onto your canvas.
For Global Effect: Leave it anywhere on the page.
For Local Effect: Place it inside a Frame/Section, set Position to Absolute, Size to 100%, and change "Trigger Area" to Component Only.
Upload your images or type your emojis in the properties panel.
Turn on Idle Effect to show a special element when the mouse pauses!
Grace Ge
