Skip to content

component

Image Trail Cursor

By Soyeb

Details

Summary

Images that follow your cursor ✦

Description

You know that moment - you're scrolling an award-winning site and suddenly images start trailing your cursor like magic. It feels alive, tactile, and impossibly cool. That effect lives on Awwwards-winning sites. Now you can add it to yours in minutes. Instructions Drop the Image Cursor Trail component into the section where you want the effect Set the component's position to Absolute in the right-hand panel Pin all four edges - Top, Bottom, Left, Right to 0 so it expands to fill the full section Add your own images from the Images panel on the right. Adjust the controls to match your vibe and you're done How It Works The panel has two layers of controls — core settings visible by default, and advanced settings unlocked via the Advanced toggle: Images : Add your own photos; demo images are used automatically until you do Background : Optional background color for the trail container Image Size : Set width and height of each trail image independently Corner Radius : Round the image corners from sharp to fully circular Image Fit : Choose Cover, Contain, or Fill for how images crop Max Tilt : Controls how much each image randomly rotates as it appears Trail Length : How many images can be visible on screen at once Lifespan : How long each image stays before it exits Animate In / Animate Out : Full Framer transition control - use tween, spring, or custom easing Advanced → Spawn Distance : How far the cursor must travel before a new image appears Advanced → Scroll Rate : Spawn rate while the user is scrolling Advanced → Idle Rate : How often images spawn when the cursor is stationary Advanced → Removal Delay : Stagger timing between consecutive image removals Features Zero-config out of the box: 26 demo images built in, works immediately Bring your own images: swap demo images with your own from the panel Full Framer transition support: spring, tween, custom cubic-bezier on both enter and exit Overflow-aware: trail renders outside the component boundary, nothing gets clipped Scroll-reactive: images spawn while scrolling, not just on mouse move Idle spawning: keeps the trail alive even when the cursor is still Canvas-safe: shows a clean placeholder in the Framer editor, animates only in Preview and live Responsive: works at any frame size, just pin to fill your section Lightweight: no external dependencies beyond Framer Motion (already in Framer) Advanced controls hidden by default: clean panel for most users, full power for tinkerers Use Cases Hero sections on agency and portfolio sites Full-page image galleries with interactive browsing Creative studios and photographer websites Product landing pages with visual storytelling "About" or team sections that make people linger Any section where you want to reward exploration with delight Made with ❤️ by Soyeb Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned, exchanged or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear. Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com

Introduction

Images that follow your cursor ✦

Rank history

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

12014015098/148/228/309/79/15
  • All · #509