4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tedc,"use client"; import { useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; interface FluidCursorTrailProps { className?: string; color?: string; particleCount?: number; particleSize?: number; velocity?: number; gravity?: number; fadeSpeed?: number; zIndex?: number; bound?: boolean; } export function FluidCursorTrail({ className, color = "#8b5cf6", particleCount = 3, particleSize = 4, velocity = 4, gravity = 0.2, fadeSpeed = 0.02, zIndex = 9999, bound = false, }: FluidCursorTrailProps) { const canvasRef = useRef(null); const containerRef = useRef(null); const particlesRef = useRef<{ x: number; y: number; vx: number; vy: number; life: number }[]>([]); useEffect(() => { const canvas = canvasRef.current; const container = bound ? containerRef.current : null; if (!canvas) { return; } const ctx = canvas.getContext("2d"); if (!ctx) { return; } const resize = () => { if (bound && container) { const rect = container.getBoundingClientRect(); canvas.width = rect.width; canvas.height = rect.height; } else { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } }; resize(); window.addEventListener("resize", resize); let resizeObs: ResizeObserver | undefined; if (bound && container) { resizeObs = new ResizeObserver(resize); resizeObs.observe(container); } const handleMouse = (e: MouseEvent) => { let x: number; let y: number; if (bound && container) { const rect = container.getBoundingClientRect(); if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) { return; } x = e.clientX - rect.left; y = e.clientY - rect.top; } else { x = e.clientX; y = e.clientY; } for (let i = 0; i < particleCount; i++) { particlesRef.current.push({ life: 1, vx: (Math.random() - 0.5) * velocity, vy: (Math.random() - 0.5) * velocity, x, y, }); } }; window.addEventListener("mousemove", handleMouse); let raf: number; const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); const next: typeof particlesRef.current = []; for (const p of particlesRef.current) { p.x += p.vx; p.y += p.vy; p.life -= fadeSpeed; p.vy += gravity; if (p.life > 0) { next.push(p); ctx.globalAlpha = p.life; ctx.fillStyle = color; ctx.beginPath(); ctx.arc(p.x, p.y, particleSize, 0, Math.PI * 2); ctx.fill(); } } particlesRef.current = next; ctx.globalAlpha = 1; raf = requestAnimationFrame(animate); }; raf = requestAnimationFrame(animate); return () => { resizeObs?.disconnect(); window.removeEventListener("resize", resize); window.removeEventListener("mousemove", handleMouse); cancelAnimationFrame(raf); }; }, [bound, color, particleCount, particleSize, velocity, gravity, fadeSpeed]); const canvas = (

); if (bound) { return (

{canvas}

); } return canvas; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://pulkit.page/components/fluid-cursor-trail.json","proxyUrl":"https://shadcnregistry.com/r/pulkitxm/fluid-cursor-trail","itemId":"@pulkitxm/fluid-cursor-trail"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/new-york/fluid-cursor-trail/fluid-cursor-trail.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

Fluid Cursor Trail

Installation

Files

components

Styles