Image Trail Cursor

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

1. Drop the Image Cursor Trail component into the section where you want the effect

2. Set the component's position to Absolute in the right-hand panel

3. Pin all four edges - Top, Bottom, Left, Right to 0 so it expands to fill the full section

4. Add your own images from the Images panel on the right.

5. 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