const canvasRef = useRef(null);

const [isDrawing, setIsDrawing] = useState(false);

const [lastPoint, setLastPoint] = useState(null);

const [brushColor, setBrushColor] = useState('#1a1a1a');

useEffect(() => {

const canvas = canvasRef.current;

const ctx = canvas.getContext('2d');

// Set canvas size

const resize = () => {

const tempImage = ctx.getImageData(0, 0, canvas.width, canvas.height);

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

ctx.putImageData(tempImage, 0, 0);

};

window.addEventListener('resize', resize);

resize();

return () => window.removeEventListener('resize', resize);

}, []);

const getDistance = (p1, p2) =>

Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));

const startDrawing = (e) => {

const rect = canvasRef.current.getBoundingClientRect();

const point = {

x: (e.clientX || e.touches[0].clientX) - rect.left,

y: (e.clientY || e.touches[0].clientY) - rect.top,

};

setIsDrawing(true);

setLastPoint(point);

};

const draw = (e) => {

if (!isDrawing) return;

const canvas = canvasRef.current;

const ctx = canvas.getContext('2d');

const rect = canvas.getBoundingClientRect();

const currentPoint = {

x: (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left,

y: (e.clientY || (e.touches && e.touches[0].clientY)) - rect.top,

};

if (lastPoint) {

const dist = getDistance(lastPoint, currentPoint);

const speed = Math.max(0.1, Math.min(dist / 10, 10));

// Dynamic thickness based on speed (Inverted for ink look: faster = thinner)

const thickness = Math.max(1, 15 - speed);

ctx.beginPath();

ctx.moveTo(lastPoint.x, lastPoint.y);

ctx.lineTo(currentPoint.x, currentPoint.y);

ctx.strokeStyle = brushColor;

ctx.lineWidth = thickness;

ctx.lineCap = 'round';

ctx.lineJoin = 'round';

// Add subtle "ink" blur

ctx.shadowBlur = thickness * 0.2;

ctx.shadowColor = brushColor;

ctx.stroke();

// Bleed effect (random small dots when moving slow)

if (speed < 2 && Math.random() > 0.8) {

ctx.beginPath();

ctx.arc(

currentPoint.x + (Math.random() - 0.5) * 5,

currentPoint.y + (Math.random() - 0.5) * 5,

Math.random() * 2,

0,

Math.PI * 2,

);

ctx.fillStyle = brushColor;

ctx.fill();

}

}

setLastPoint(currentPoint);

};

const stopDrawing = () => {

setIsDrawing(false);

setLastPoint(null);

};

const clearCanvas = () => {

const canvas = canvasRef.current;

const ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);

};

const downloadImage = () => {

const canvas = canvasRef.current;

const link = document.createElement('a');

link.download = 'ink-sketch.png';

link.href = canvas.toDataURL();

link.click();

};

return (

<div className="h-screen w-screen bg-[#f4f1ea] relative overflow-hidden cursor-crosshair select-none">

<Seo

title="Paper & Ink | Fezcodex"

description="A meditative ink drawing experience on digital rice paper."

keywords={['drawing', 'ink', 'calligraphy', 'zen', 'art', 'canvas']}

/>

{/* Rice Paper Texture Overlay */}

<div

className="absolute inset-0 pointer-events-none opacity-20 mix-blend-multiply"

style={{

backgroundImage: `url('https://www.transparenttextures.com/patterns/rice-paper.png')`,

}}

/>

{/* Canvas */}

<canvas

ref={canvasRef}

onMouseDown={startDrawing}

onMouseMove={draw}

onMouseUp={stopDrawing}

onMouseOut={stopDrawing}

onTouchStart={startDrawing}

onTouchMove={draw}

onTouchEnd={stopDrawing}

className="block w-full h-full"

/>

{/* UI Controls */}

<div className="absolute top-6 left-6 z-50 flex items-center gap-4">

<Link

to="/apps"

className="bg-white text-black px-6 py-3 font-mono border-2 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all flex items-center gap-2"

>

<ArrowLeftIcon weight="bold" />

<span>EXIT</span>

</Link>

<div className="bg-black px-4 py-2 border-2 border-black shadow-[4px_4px_0px_rgba(0,0,0,1)]">

<BreadcrumbTitle

title="Paper & Ink"

slug="pi"

variant="brutalist"

className="!text-black"

/>

</div>

</div>

<div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex gap-6 items-center bg-white/50 backdrop-blur-md p-4 rounded-full border border-black/5 shadow-2xl pointer-events-auto">

<button

onClick={clearCanvas}

className="p-3 text-gray-800 hover:text-red-600 transition-colors"

title="Clear Canvas"

>

<TrashIcon size={24} weight="bold" />

</button>

<div className="h-8 w-px bg-black/10 mx-2" />

<div className="flex gap-3">

{['#1a1a1a', '#2c3e50', '#c0392b', '#27ae60', '#2980b9'].map((c) => (

<button

key={c}

onClick={() => setBrushColor(c)}

className={`w-8 h-8 rounded-full border-2 transition-transform ${brushColor === c ? 'scale-125 border-black shadow-md' : 'border-transparent hover:scale-110'}`}

style={{ backgroundColor: c }}

/>

))}

</div>

<div className="h-8 w-px bg-black/10 mx-2" />

<button

onClick={downloadImage}

className="p-3 text-gray-800 hover:text-blue-600 transition-colors"

title="Download"

>

<DownloadSimpleIcon size={24} weight="bold" />

</button>

</div>

{/* Floating Instructions */}

<div className="absolute top-6 right-6 text-right pointer-events-none">

<h2 className="font-playfairDisplay text-3xl text-black/40 italic">

Paper & Ink

</h2>

<p className="font-arvo text-sm text-black/30 mt-2">

Swift strokes are narrow, slow ones are deep.

</p>

</div>

{/* Visual Indicator of current brush */}

<div className="absolute bottom-32 left-1/2 -translate-x-1/2 flex items-center gap-2 text-black/20 font-mono text-[10px] uppercase tracking-[0.3em]">

<PaintBrushIcon size={14} />

<span>Flow State Active</span>

<PaletteIcon size={14} />

</div>

</div>

);