SnapCursor Flow

SnapCursor Flow
SnapCursor Flow

About SnapCursor Flow

Add tactile, high-energy interaction to your website with dynamic cursor-following image trails. Snap Cursor Flow spawns responsive media cards as visitors move across the viewport or hover over specific containers, featuring 3D velocity tilt, cinematic reveal animations, and click explosion bursts.

Key Features

  • 6 Reveal Styles: Animate cards into view with Pop, Circle Reveal, Wipe, 3D Flip, Directional Slide, or Glitch transitions.

  • Physics & 3D Tilt: Cards dynamically lean with momentum, turn toward movement direction, and tilt in 3D based on pointer speed.

  • Click Bursts: Explode a radial ring of staggered images on click or tap.

  • Visual FX Suite: Add speed-driven motion blur, RGB chromatic aberration, expanding spawn ripples, and a spring-physics glowing cursor orb.

  • Global or Local Trigger: Run across the entire viewport using body portals, or constrain trails cleanly inside container bounds.

  • High Performance: Built-in image preloading prevents first-hover flashes, with memoized rendering for smooth 60fps interaction.

Property Controls

  • Images: Upload up to 24 images with Sequential, Random, or non-repeating Shuffle playback.

  • Context: Choose trigger mode (Global Viewport vs. Component Bounds), overflow clipping, touch support, and z-index.

  • Spawning: Adjust spawn travel distance (density), interval cooldown, maximum active images, random scatter, and click burst counts.

  • Appearance: Control card width, aspect ratio, image fit (Cover/Contain), corner radius, shadow, opacity, and blend modes.

  • Animation & Effects: Lifespan, reveal style, drift direction/distance, 3D tilt intensity, motion blur, and glowing cursor orb.

Quick Start Guide

  1. Drop the component onto your Framer canvas.

  2. Add your media to the Images array.

  3. Choose your trigger area (Global for full-page trails or Component Bounds for a specific section).

  4. Select your preferred reveal style (e.g. Pop, Flip, or Glitch) and preview!