Components
Loading preview...
A React component that adds an interactive drawing effect following the user's mouse cursor within a specified area.
npx shadcn@latest add https://21st.dev/r/aghasisahakyan1/draw-with-cursor// In your page or parent component file
import DrawingCursorEffect from "@/components/ui/draw-with-cursor"
export function AutoImageEffectPage() {
const imageUrl = 'https://21st.dev/og-image.png'; // Replace with your image path
return (
<DrawingCursorEffect
type="drawAlways" // Draw always over the image (drawOnHold, drawAlways )
bgImageSrc={imageUrl} // Add background image
strokeColor="#FF0000" // Red lines for better visibility
strokeWidth={12} // Medium lines
followEffect={true} // Add follow effect
>
<div className="text-center text-white p-8">
<h1 className="text-4xl font-bold">Auto-Drawing Trail on Image</h1>
<p className="mt-2">Move cursor to see the effect.</p>
</div>
</DrawingCursorEffect>
);
}