// In your page or parent component file
import DrawingCursorEffect from "@/components/ui/draw-with-cursor";
export function AutoImageEffectPage() {
const imageUrl =
"https://cdn.21st.dev/assets/localized/c1be920a389fc6ea706483c9efb7e52a002a4b93d0241c0140dd7bfa65447dad.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>
);
}
export default AutoImageEffectPage;
