50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:Tb3b,

A smooth trailing cursor that follows your mouse with fluid motion and fading color. Perfect for adding interactivity and polish to your Framer projects.

Important

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

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.

Key Features

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.

Props Overview

Setup Instructions

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.

Pro Tips

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.

Support

Need help or want to request a tweak? mianzaimtahir@gmail.com

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-91024dec-de28-4cdf-bbfb-a4bc40c18823-all:/unified/creator/91024dec-de28-4cdf-bbfb-a4bc40c18823/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:91024dec-de28-4cdf-bbfb-a4bc40c18823:/unified/posts/?creator=91024dec-de28-4cdf-bbfb-a4bc40c18823&with=reposts":[{"data":[{"id":"019eda3a-202a-75b5-8297-5d5e4ddc4e4a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"91024dec-de28-4cdf-bbfb-a4bc40c18823","name":"Zaim Tahir","slug":"zaim-tahir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/272980/0Bnu-RJAw-W8eo7GDU16moI9pXDn9cml4I37NdLa","followed":false,"followsYou":false},"media":[],"resources":[{"id":"16J1ohOEGiUkYVtCb23U","resolved":true,"title":"Cursor Trail Effect","body":"$51","bodyJson":null,"introduction":"--","slug":"cursor-trail-effect","author":{"framerUserId":"91024dec-de28-4cdf-bbfb-a4bc40c18823","name":"Zaim Tahir","slug":"zaim-tahir","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/272980/0Bnu-RJAw-W8eo7GDU16moI9pXDn9cml4I37NdLa","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/16J1ohOEGiUkYVtCb23U/cursor-trail-effect-BGjyAM4u4yBxj4BJa1l1agTKdZvyXG","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-08T12:07:00.306Z","updatedAt":"2026-05-14T13:37:14.793Z","publishedAt":"2026-06-18T10:15:02.954Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/CursorTrail-skhM5r.js@ZzNbKIKv0rEJvZwIQhIU","previewUrl":"https://cursortrailcomponent.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"ZzNbKIKv0rEJvZwIQhIU","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T10:15:02.954Z","updatedAt":"2026-06-18T10:15:02.954Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]