---
title: "Mouse Trail Block — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Sang Do · Cursors. About MouseTrail Component MouseTrail adds a playful, kinetic motion effect to your Framer project by generating a chain of animated…"
canonical: "https://framer.elliotli.dev/component/mouse-trail-block"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/Mouse Trail Block

# Mouse Trail Block

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

![Mouse Trail Block preview image 1](https://framer.elliotli.dev/og/component/mouse-trail-block/4e922b224c2de700/1600x1200.jpg)

## Summary

About MouseTrail Component MouseTrail adds a playful, kinetic motion effect to your Framer project by generating a chain of animated blocks that smoothly follow the user’s cursor.

## Description

## About MouseTrail Component

MouseTrail adds a playful, kinetic motion effect to your Framer project by generating a chain of animated blocks that smoothly follow the user’s cursor. Each block inherits delay, speed, and styling settings — creating a dynamic trail that feels fluid, expressive, and perfectly responsive.All hover, click, and scroll interactions on underlying elements remain fully usable.**Preview:** [**https://mouse-trail-snake.framer.website**](https://mouse-trail-snake.framer.website/)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-pokeyt7g-22ziYJQF3RrKNeAb9IbSMpRYxnzPKP)

## Features & Controls

### Block System

-   Set the number of blocks in the trail
    
-   Customize **Block Width** and **Block Height**
    
-   Adjust **Block Radius** for sharp or fully rounded shapes
    
-   Assign **multi-color sequences** using **Block Colors**
    

### Visual Styling

-   Add **Stroke** and **Stroke Width** for defined edges
    
-   Enable or disable **Shadow** for depth
    
-   Modify **Offset X & Offset Y** to shift trail position relative to the cursor
    

### Motion Behavior

-   Control **Follow Speed** to define how quickly blocks catch up
    
-   Adjust **Delay** for a more elastic or snappy motion feel
    

### Lead Block Text

-   Add optional **Lead Text** that stays attached to the first block
    
-   Customize **Text Font** and **Text Color**
    
-   Perfect for callouts like “Move your cursor,” tooltips, or playful micro-interactions
    

## Uses

-   Add dynamic motion to hero sections and landing pages
    
-   Create playful, interactive backgrounds for portfolio or studio websites
    
-   Add cursor-reactive effects to enhance storytelling
    
-   Guide user attention using the optional lead text
    
-   Build unique interactive experiences without blocking normal UI behavior
    

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

-   All · #9900

## Details

- **Author**: Sang Do
- **Price**: $10.00
- **Published**: 2025-12-09
- **Updated**: 2025-12-09
- **Added**: 2025-11-20
- **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…