Motion Trail

Interactive Image Trails That Follow Your Cursor

Demo: 8 Styles

Add cinematic cursor effects to your Framer projects. Eight ready-to-use animation styles that make your designs feel alive and interactive.

Perfect for agencies creating memorable portfolio pieces and designers who want to add premium interactive effects.

Features

Eight Animation Styles Classic, Innerscape, Exiting, Flow Follow, Spintrail, Velocity, Persistence, and Perspective—each with unique motion behavior and visual flair.

Smooth Cursor Tracking Images trail your cursor with buttery-smooth motion and customizable smoothness levels for the perfect feel.

Full Customization Control trail length, animation speed, threshold distance, image dimensions, opacity, and border radius—all from Framer's properties panel.

Advanced Styling Add shadows with custom colors and blur, choose from five object-fit options, and fine-tune every visual detail.

Performance Optimized Smooth 60fps animation that works flawlessly across all devices and screen sizes.

Use Cases

Portfolio Sites — Stand out with interactive cursor effects that showcase your design skills

Agency Homepages — Create unforgettable first impressions with dynamic image trails

Product Showcases — Highlight products with engaging cursor-following visuals

Creative Landing Pages — Add playful interactions that keep visitors engaged

Brand Experiences — Build memorable micro-interactions that reinforce your brand identity

How to Use

Installation

After purchasing from FramerHub:

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Motion Trail in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

Everything you need is in Framer's properties panel:

Animation Style

• Choose from 8 unique styles: Classic, Innerscape, Exiting, Flow Follow, Spintrail, Velocity, Persistence, Perspective
• Each style has distinct motion behavior and visual effects

Images

• Upload your own images or use the default
• Supports multiple images for variety

Trail Settings

• Adjust trail length (3-30 images)
• Set threshold distance for new image spawns
• Control animation duration and smoothness

Image Appearance

• Customize width and height
• Choose object-fit behavior
• Set border radius and opacity
• Add optional shadows with custom colors

Quick Tips

Best Performance — Keep trail length between 10-15 for optimal performance across all devices

Image Selection — Use high-contrast images for maximum visual impact. Portraits and products work especially well

Layering — Place the component as a background layer and add content above it. Works great as a full-screen hero effect

Style Experimentation — Try different animation styles to match your design aesthetic. Persistence and Velocity styles create more dramatic effects

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Why Designers Love This

Eight professionally crafted animation styles mean you get instant variety without starting from scratch. Simply copy, paste, choose your style, and customize through Framer's familiar properties panel. No coding, no complexity.

Perfect for agencies delivering interactive experiences fast and designers who want portfolio-worthy cursor effects without the technical overhead.