Skip to content

component

Cursor Image Follow

By NutsDev

Details

Summary

Smooth image-follow cursor effect

Description

How it works As the cursor moves, images are placed along its path. The distance and timing between images can be controlled, and each image animates on entry and exit using configurable motion settings. Images automatically disappear after a set lifetime, keeping the interaction lightweight and performant. You can run the effect globally across the entire screen or restrict it to a specific container area for controlled interactions and layouts. Key features Cursor-based image follow and trail effect Supports multiple images with sequential or randomized order Adjustable spacing and timing between images Entry and exit animations with scale and opacity control Global (window) or container-based interaction scope Visual styling controls including blend mode, blur, grayscale, brightness, radius, border, and shadow Designed for smooth performance and easy customization Customization & Styling The settings control how images appear and behave as the cursor moves. You can define the image source, interaction scope, size, aspect ratio, order, spacing, and lifetime, as well as add variation through scatter and rotation. Animation and visual options let you fine-tune how images enter and exit and how they look. Adjust animation curves, scale and opacity, and customize styling with fit modes, blend modes, filters, layering, radius, borders, and shadows to match your design. Notes Best used with a moderate number of images for optimal performance Works with mouse and trackpad input Fully configurable through Framer’s property panel No external dependencies required

Introduction

Smooth image-follow cursor effect

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600165978/148/228/309/79/15
  • All · #6597