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>
  );
}