---
title: "TrailMotion — Free Framer component · Best of Framer"
description: "Free Framer component · by Grace Ge · Cursors. Stunning Mouse Trail Effects"
canonical: "https://framer.elliotli.dev/component/trailmotion"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/TrailMotion

# TrailMotion

Stunning Mouse Trail Effects

[View on Framer](https://framer.com/marketplace/components/trailmotion/?via=elliot-li)

![TrailMotion preview image 1](https://framer.elliotli.dev/og/component/trailmotion/212a839abaf6bc94/1600x1200.jpg)

## Summary

Stunning Mouse Trail Effects

## Description

### Details

**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:**

1.  Drag the component onto your canvas.
    
2.  **For Global Effect:** Leave it anywhere on the page.
    
3.  **For Local Effect:** Place it inside a Frame/Section, set Position to **Absolute**, Size to **100%**, and change "Trigger Area" to **Component Only**.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-17tycs51-yey8QDI8fGd4gKSdzYpdeQVGOpFi7l)-   Upload your images or type your emojis in the properties panel.
    
-   Turn on **Idle Effect** to show a special element when the mouse pauses!
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5512

## Details

- **Author**: Grace Ge
- **Published**: 2026-02-02
- **Updated**: 2026-01-31
- **Added**: 2026-01-22
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…