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