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.
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
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.
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.
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.
Drag the component onto the canvas.
Add images via the Content array (up to 20).
Set Trigger Area:
Global for full-page behavior
Component Bounds to limit spawning to a region
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)
Choose a Reveal Mode and hit Preview.
No code edits needed — everything is controlled from the panel.
Falls back to 3 built-in placeholder images if none are provided.
Canvas/export uses a static preview for performance and reliability.