---
title: "SnapCursor Flow — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Evixel Studio · Cursors. Snap Cursor Flow turns mouse movement into a living visual experience."
canonical: "https://framer.elliotli.dev/component/snapcursor-flow"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/SnapCursor Flow

# SnapCursor Flow

Interactive cursor image trails

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

![SnapCursor Flow preview image 1](https://framer.elliotli.dev/og/component/snapcursor-flow/9bf44cee5d70a084/1600x1200.jpg)

## Summary

Snap Cursor Flow turns mouse movement into a living visual experience.

## Description

Snap Cursor Flow turns mouse movement into a living visual experience. Images spawn as you move, animate in with cinematic reveal effects, and fade out smoothly — driven by cursor velocity, optional motion blur, and a set of panel controls. It can run globally across the viewport or be scoped to a single component region (**Component Bounds**).

Built with **Framer Motion**. No external dependencies beyond what Framer already ships.

## Reveal Modes (5)

Each reveal style can be switched instantly from the panel:

-   **Pop** — snappy scale-up entrance (clean default)
    
-   **Circle Reveal** — iris wipe from center outward
    
-   **Wipe** — horizontal curtain pull (left to right)
    
-   **Glitch** — jitter + color corruption on entry
    
-   **Flip** — 3D card flip influenced by movement direction
    

## Effects (Toggleable)

Each effect can be enabled independently:

-   **Cursor Orb** — soft glowing blob with spring-lag follow. Adjustable **color**, **size**, and **blur**.
    
-   **Chromatic Aberration** — RGB split on spawn, intensity scales with cursor speed.
    
-   **3D Depth Tilt** — images lean into movement direction in 3D space, with a dedicated **Tilt Intensity** slider.
    
-   **Organic Sizing** — random size variation so each spawn feels less uniform.
    
-   **Motion Blur** — blur proportional to cursor speed, with **Blur Intensity** control.
    
-   **Spawn Ripple** — expanding ring pulse at each spawn point, customizable **Ripple Color**.
    

## Property Controls

### Context

-   **Trigger Area**
    
    -   **Global (Viewport)** — trail can spawn anywhere in the viewport.
        
    -   **Component Bounds** — trail only spawns while the pointer is inside the component (with optional padding).
        
-   **Z-Index** — control stacking order of spawned items.
    

**Component Bounds only:**

-   **Overflow**
    
    -   **Clipped** — images are clipped to the component bounds.
        
    -   **Visible** — images can extend beyond the component bounds (no clipping).
        
-   **Trigger Padding** _(only shown when Overflow = Visible)_ — expands the hover/trigger area beyond the component edges.
    

### Behaviour

-   **Spawn Rate** (distance threshold) — lower = denser trail.
    
-   **Max Images** — performance cap for active images.
    
-   **Sequence** — sequential or random image selection.
    
-   **Velocity Tilt** — rotates images toward the movement direction.
    

-   **Appearance** — Adjust **Width**, **Aspect Ratio**, **Radius**, **Shadow**, and **Blend Mode** to control the look of each spawned image.
    
-   **Animation** — Tune **Lifespan**, **Initial Scale** _(Pop mode)_, **Scatter Tilt**, and **Vertical Drift** to shape how the trail enters and moves.
    

## Quick Start

1.  Drag the component onto the canvas.
    
2.  Add images via the **Content** array (up to 20).
    
3.  Set **Trigger Area**:
    
    -   **Global** for full-page behavior
        
    -   **Component Bounds** to limit spawning to a region
        
4.  If using **Component Bounds**:
    
    -   Set **Overflow** to **Visible** if you want images to escape the frame edges
        
    -   Optionally increase **Trigger Padding** _(only available in Visible mode)_
        
5.  Choose a **Reveal Mode** and hit **Preview**.
    

No code edits needed — everything is controlled from the panel.

## Good to Know

-   Falls back to **3 built-in placeholder images** if none are provided.
    
-   Canvas/export uses a **static preview** for performance and reliability.
    

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

-   All · #9155

## Details

- **Author**: Evixel Studio
- **Price**: $7.00
- **Published**: 2026-04-24
- **Updated**: 2026-09-19
- **Added**: 2026-04-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…