Cursor Fluid Trail
A smooth trailing cursor that follows your mouse with fluid motion and fading color. Perfect for adding interactivity and polish to your Framer projects.
Make it with Workshop
Build your own component with AI
A smooth trailing cursor that follows your mouse with fluid motion and fading color. Perfect for adding interactivity and polish to your Framer projects.
Make it with Workshop
Build your own component with AI
Framer’s preview may not accurately display the trail’s smoothness or damping. For the true, fluid motion, publish your site or open the live preview — that’s where the real effect shines.
Cursor Trail adds a sleek, dynamic trail that follows your mouse with smooth motion and subtle fading. It gives your site an interactive, high-end feel — ideal for portfolios, product sites, or any layout where motion design enhances storytelling.
You can customize trail color, length, width, smoothness, and damping to perfectly match your style. It reacts instantly to cursor movement, softens naturally when leaving the screen, and runs on performant canvas rendering for ultra-smooth animation.
Fluid motion: The trail glides naturally with velocity damping and easing.
Fully customizable: Adjust color, width, and length to create anything from subtle glow lines to energetic motion streaks.
Performance optimized: Canvas-based rendering ensures 60fps animation even on large screens.
Responsive: Automatically resizes with the viewport.
Fade-on-leave option: Softly fades when the cursor exits the window.
trailColor — The color of the trail (supports hex and rgba).
trailLength — Number of trail points (default 30).
trailWidth — Maximum width of the trail (default 6).
smoothness — How tightly the trail follows your cursor (lower = smoother).
damping — How much momentum the trail keeps (higher = more inertia).
fadeOnLeave — Whether the trail fades when leaving the window.
Drag and drop the component anywhere on your Framer canvas.
Place it at the very top of your Layers panel so it appears above all content.
Set Width: 100% and Height: 100vh for full-screen coverage.
Lock the layer to prevent accidental movement while editing.
Customize the color, smoothness, and length to match your site’s visual energy.
Preview your site — the trail should automatically follow your mouse smoothly.
Combine with dark backgrounds for maximum glow effect.
Use slightly transparent colors (rgba(…, 0.8)) for softer blending.
Keep trailLength moderate (20–40) for best performance and visual clarity.
Try contrasting trail colors on hoverable areas for subtle interactivity cues.
Need help or want to request a tweak? daniyalhundred@gmail.com
