From 598e60be7e803c9787db427c971a23c9ff0f0063 Mon Sep 17 00:00:00 2001
From: Daniel Woelfel <dwwoelfel@gmail.com>
Date: Tue, 10 Mar 2026 15:14:19 -0700
Subject: [PATCH 1/4] Fix login modal

---
 src/app/components.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/components.tsx b/src/app/components.tsx
index 39d7ca9..0fd007f 100644
--- a/src/app/components.tsx
+++ b/src/app/components.tsx
@@ -2,6 +2,7 @@
 
 import { db } from '@/lib/db';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import Link from 'next/link';
 import { useTheme } from './ThemeProvider';
 import { useRouter } from 'next/navigation';
@@ -2543,7 +2544,11 @@ export function UpvoteButton({
   if (compact) {
     return (
       <>
-        {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
+        {showLogin &&
+          createPortal(
+            <LoginModal onClose={() => setShowLogin(false)} />,
+            document.body,
+          )}
         <button
           onClick={
             isOwnSketch
@@ -2564,7 +2569,11 @@ export function UpvoteButton({
 
   return (
     <>
-      {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
+      {showLogin &&
+        createPortal(
+          <LoginModal onClose={() => setShowLogin(false)} />,
+          document.body,
+        )}
       <button
         onClick={
           isOwnSketch

From 160929eaeed81938dbbe9e4d9f97952e2ea6af12 Mon Sep 17 00:00:00 2001
From: Daniel Woelfel <dwwoelfel@gmail.com>
Date: Tue, 10 Mar 2026 15:15:46 -0700
Subject: [PATCH 2/4] bump instant version

---
 package.json   |  4 ++--
 pnpm-lock.yaml | 54 +++++++++++++++++++++++++-------------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index cc74716..f3c3c7e 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
     "pull:dev": "instant-cli pull --env .env.development"
   },
   "dependencies": {
-    "@instantdb/admin": "branch-suspense-debug",
-    "@instantdb/react": "branch-suspense-debug",
+    "@instantdb/admin": "latest",
+    "@instantdb/react": "latest",
     "next": "16.1.6",
     "react": "19.2.4",
     "react-dom": "19.2.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13e171f..c9a269f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,11 +13,11 @@ importers:
   .:
     dependencies:
       '@instantdb/admin':
-        specifier: branch-suspense-debug
-        version: 0.22.155-branch-suspense-debug.22922116303.1
+        specifier: latest
+        version: 0.22.156
       '@instantdb/react':
-        specifier: branch-suspense-debug
-        version: 0.22.155-branch-suspense-debug.22922116303.1(react@19.2.4)
+        specifier: latest
+        version: 0.22.156(react@19.2.4)
       next:
         specifier: 16.1.6
         version: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -658,33 +658,33 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@instantdb/admin@0.22.155-branch-suspense-debug.22922116303.1':
-    resolution: {integrity: sha512-WAko3ySExG4Mnz9hUUeYbW7CuNLTV+308jIsoPMAiFNx0sliwrUuWnDQtQZkHTcehS2gvve3sKomlQ1+Oh7Gnw==}
+  '@instantdb/admin@0.22.156':
+    resolution: {integrity: sha512-hZtK2mZBZ9emY3ICIBmgVMeOssS+CIBLmcorPtWQTqELYYogIyX5TsAOKtCEThQXG0DrnQ/tjuBdGjAaeBXZmA==}
 
   '@instantdb/core@0.22.155':
     resolution: {integrity: sha512-YpP6t6nK7dSKr23So78pEXq28aNDygXe7StihtxzxJDVT8sDA+tRGLo77QGIUgdyG62VHP1iuIWG1xnaBPPdMQ==}
 
-  '@instantdb/core@0.22.155-branch-suspense-debug.22922116303.1':
-    resolution: {integrity: sha512-6z3aebqFYXrGzllZ6rvE+cU6+oVQcqG4n0uL6fN/MFbIda7A6WcXf1DgR+U6gS8i9cwfDRC9/DoZ4scauHBaAg==}
+  '@instantdb/core@0.22.156':
+    resolution: {integrity: sha512-mAUG5+fsfHo+0ih1UoEggcSLR3PNJeg9pf2YBhVVHLx8uvP/p9q5SCTGE10/L1blImJ2x9V2DHRLoqnbMAFYBw==}
 
   '@instantdb/platform@0.22.155':
     resolution: {integrity: sha512-0UsSE+cqvhXGeJD1NsP+sFlLD9ZOX4pvvZyf+FnP9e2p6L7mCRXPblu+SPn9dGX0Hq6sjlPH3kEcSM3ZnzNWuQ==}
 
-  '@instantdb/react-common@0.22.155-branch-suspense-debug.22922116303.1':
-    resolution: {integrity: sha512-WrO6vREKnolh7mC7LatKcBWJt2NWKXDJDC8iRrXtnp1GbNKvmtXbLYU1StTv1AAvbCruL2tH+iepxGtM37O3lQ==}
+  '@instantdb/react-common@0.22.156':
+    resolution: {integrity: sha512-8QAQ9FReJ0SPzjiVZJzv1a8KtbaZsHNgDCESQ6EanU0jLng3pxmOY7mV7SGh1m1e9a5Bu0yaSyOlYj4V0j4HzA==}
     peerDependencies:
       react: '>=16'
 
-  '@instantdb/react@0.22.155-branch-suspense-debug.22922116303.1':
-    resolution: {integrity: sha512-ug6wavKsf5i3uRSt4D/LdZRnXldS1cAYfv/LolmkTY6X6iaDmoGnYduwZJ771edXrbZH9+O0CdEY4lU0k2bPEw==}
+  '@instantdb/react@0.22.156':
+    resolution: {integrity: sha512-EgH86+KxlwCc1v4vjNZqVJUYJtOIAbceqZIQrAJRENlJIcnZqoj0fbdKluS8CDZkvVsrG6MJsx5T62Z2UvfD9w==}
     peerDependencies:
       react: '>=16'
 
   '@instantdb/version@0.22.155':
     resolution: {integrity: sha512-S4kF3Cj5NKWMnHdhDnhe5jSBIWtMi7AEQeaqgQW59gm1XXk80/R0M9OZ0p1L9RWbgV/o4U/LHdSYtoWdw+MZPQ==}
 
-  '@instantdb/version@0.22.155-branch-suspense-debug.22922116303.1':
-    resolution: {integrity: sha512-tr1b8dmRbYqEdzO0skAttwial83UUxEsRklh7W4f0avwFiF0kbhhDbPnyxPW7+eF3Mh7DBtXIpskC1UVA6XqiQ==}
+  '@instantdb/version@0.22.156':
+    resolution: {integrity: sha512-DIKte2HMBUbnTXWlTGIES+b0mzibMGhjOx//PAh2CFztJZXUzdiQvKQ6joxUz6dS+dRYfwaMrUEIZksRMHMxXw==}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -3062,10 +3062,10 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@instantdb/admin@0.22.155-branch-suspense-debug.22922116303.1':
+  '@instantdb/admin@0.22.156':
     dependencies:
-      '@instantdb/core': 0.22.155-branch-suspense-debug.22922116303.1
-      '@instantdb/version': 0.22.155-branch-suspense-debug.22922116303.1
+      '@instantdb/core': 0.22.156
+      '@instantdb/version': 0.22.156
       cookie: 1.1.1
       eventsource: 4.1.0
       uuid: 11.1.0
@@ -3076,9 +3076,9 @@ snapshots:
       mutative: 1.3.0
       uuid: 11.1.0
 
-  '@instantdb/core@0.22.155-branch-suspense-debug.22922116303.1':
+  '@instantdb/core@0.22.156':
     dependencies:
-      '@instantdb/version': 0.22.155-branch-suspense-debug.22922116303.1
+      '@instantdb/version': 0.22.156
       mutative: 1.3.0
       uuid: 11.1.0
 
@@ -3089,23 +3089,23 @@ snapshots:
       '@instantdb/core': 0.22.155
       '@instantdb/version': 0.22.155
 
-  '@instantdb/react-common@0.22.155-branch-suspense-debug.22922116303.1(react@19.2.4)':
+  '@instantdb/react-common@0.22.156(react@19.2.4)':
     dependencies:
-      '@instantdb/core': 0.22.155-branch-suspense-debug.22922116303.1
-      '@instantdb/version': 0.22.155-branch-suspense-debug.22922116303.1
+      '@instantdb/core': 0.22.156
+      '@instantdb/version': 0.22.156
       react: 19.2.4
 
-  '@instantdb/react@0.22.155-branch-suspense-debug.22922116303.1(react@19.2.4)':
+  '@instantdb/react@0.22.156(react@19.2.4)':
     dependencies:
-      '@instantdb/core': 0.22.155-branch-suspense-debug.22922116303.1
-      '@instantdb/react-common': 0.22.155-branch-suspense-debug.22922116303.1(react@19.2.4)
-      '@instantdb/version': 0.22.155-branch-suspense-debug.22922116303.1
+      '@instantdb/core': 0.22.156
+      '@instantdb/react-common': 0.22.156(react@19.2.4)
+      '@instantdb/version': 0.22.156
       eventsource: 4.1.0
       react: 19.2.4
 
   '@instantdb/version@0.22.155': {}
 
-  '@instantdb/version@0.22.155-branch-suspense-debug.22922116303.1': {}
+  '@instantdb/version@0.22.156': {}
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:

From 7904df5ba8a45b484b0196be7b91ee812bb39cb6 Mon Sep 17 00:00:00 2001
From: Daniel Woelfel <dwwoelfel@gmail.com>
Date: Tue, 10 Mar 2026 17:01:14 -0700
Subject: [PATCH 3/4] Show correct modal for upvote

---
 src/app/components.tsx | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/components.tsx b/src/app/components.tsx
index 0fd007f..4dca10b 100644
--- a/src/app/components.tsx
+++ b/src/app/components.tsx
@@ -876,7 +876,13 @@ function CodeInput({ onComplete }: { onComplete: (code: string) => void }) {
 
 // -- Upgrade Modal --
 
-export function UpgradeModal({ onClose }: { onClose: () => void }) {
+export function UpgradeModal({
+  onClose,
+  reason,
+}: {
+  onClose: () => void;
+  reason?: string;
+}) {
   const [sentEmail, setSentEmail] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -909,7 +915,7 @@ export function UpgradeModal({ onClose }: { onClose: () => void }) {
           Save your account
         </h2>
         <p className="text-text-secondary mb-5 text-center text-sm">
-          Link an email to keep your sketches.
+          {reason || 'Link an email to keep your sketches.'}
         </p>
         {!sentEmail ? (
           <form
@@ -2409,6 +2415,7 @@ export function UpvoteButton({
     score: number;
   } | null>(null);
   const [showLogin, setShowLogin] = useState(false);
+  const [showUpgrade, setShowUpgrade] = useState(false);
   const [pending, setPending] = useState(false);
 
   const displayVoted = optimistic ? optimistic.voted : voted;
@@ -2428,10 +2435,14 @@ export function UpvoteButton({
 
     if (isOwnSketch) return;
 
-    if (!user || !user.email) {
+    if (!user) {
       setShowLogin(true);
       return;
     }
+    if (!user.email) {
+      setShowUpgrade(true);
+      return;
+    }
 
     if (pending) return;
     setPending(true);
@@ -2549,6 +2560,14 @@ export function UpvoteButton({
             <LoginModal onClose={() => setShowLogin(false)} />,
             document.body,
           )}
+        {showUpgrade &&
+          createPortal(
+            <UpgradeModal
+              onClose={() => setShowUpgrade(false)}
+              reason="Link an email to vote on sketches."
+            />,
+            document.body,
+          )}
         <button
           onClick={
             isOwnSketch
@@ -2574,6 +2593,11 @@ export function UpvoteButton({
           <LoginModal onClose={() => setShowLogin(false)} />,
           document.body,
         )}
+      {showUpgrade &&
+        createPortal(
+          <UpgradeModal onClose={() => setShowUpgrade(false)} />,
+          document.body,
+        )}
       <button
         onClick={
           isOwnSketch

From d136c1ad605c24282a00ccc3a51b25244892a6a9 Mon Sep 17 00:00:00 2001
From: Daniel Woelfel <dwwoelfel@gmail.com>
Date: Wed, 11 Mar 2026 09:17:37 -0700
Subject: [PATCH 4/4] add a new ink budget mechanic

---
 src/app/components.tsx | 122 +++++++++++++++++++++++++
 src/app/drawing.tsx    | 201 +++++++++++++++++++++++++++++++++++++----
 src/app/new/page.tsx   | 137 ++++++++++++++++++++++------
 src/instant.schema.ts  |   1 +
 4 files changed, 416 insertions(+), 45 deletions(-)

diff --git a/src/app/components.tsx b/src/app/components.tsx
index 4dca10b..5aef487 100644
--- a/src/app/components.tsx
+++ b/src/app/components.tsx
@@ -1726,6 +1726,128 @@ export function TimerDisplay({
   );
 }
 
+// -- Ink Display --
+
+export function InkDisplay({
+  inkRemaining,
+  inkBudget,
+}: {
+  inkRemaining: number;
+  inkBudget: number;
+}) {
+  const r = 18;
+  const c = 2 * Math.PI * r;
+  const progress = Math.max(0, inkRemaining / inkBudget);
+  const offset = c * (1 - progress);
+  const pct = progress * 100;
+
+  const color = pct <= 10 ? '#ef4444' : pct <= 25 ? '#eab308' : '#f43f5e';
+  const textColor =
+    pct <= 10
+      ? 'text-red-500'
+      : pct <= 25
+        ? 'text-yellow-500'
+        : 'text-text-secondary';
+
+  const label =
+    inkRemaining >= 1000
+      ? `${(inkRemaining / 1000).toFixed(1)}k`
+      : Math.round(inkRemaining).toString();
+
+  return (
+    <div className="relative flex h-11 w-11 shrink-0 items-center justify-center">
+      <svg width="44" height="44" className="-rotate-90">
+        <circle
+          cx="22"
+          cy="22"
+          r={r}
+          fill="none"
+          stroke="#f1f5f9"
+          strokeWidth="3"
+        />
+        <circle
+          cx="22"
+          cy="22"
+          r={r}
+          fill="none"
+          stroke={color}
+          strokeWidth="3"
+          strokeDasharray={c}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          className="transition-all duration-150 ease-linear"
+        />
+      </svg>
+      <span className={`absolute text-[10px] font-bold ${textColor}`}>
+        {label}
+      </span>
+    </div>
+  );
+}
+
+export function InkBudgetPreview({ budget }: { budget: number }) {
+  const passes = budget / CANVAS_W;
+  const svgW = 80;
+  const svgH = 60;
+  const pad = 6;
+  const innerW = svgW - pad * 2;
+  const innerH = svgH - pad * 2;
+  // 15 passes (12k) fills the mini canvas
+  const spacing = innerH / 15;
+
+  let d = '';
+  let y = pad;
+  let goingRight = true;
+  let left = passes;
+
+  for (let i = 0; i < Math.ceil(passes) && y <= svgH - pad; i++) {
+    const frac = Math.min(left, 1);
+    const len = innerW * frac;
+
+    if (i === 0) d += `M ${pad} ${y}`;
+
+    const endX = goingRight ? pad + len : pad + innerW - len;
+    d += ` L ${endX} ${y}`;
+    left -= frac;
+
+    if (left > 0) {
+      const nextY = y + spacing;
+      d += ` L ${endX} ${nextY}`;
+      y = nextY;
+    }
+    goingRight = !goingRight;
+  }
+
+  return (
+    <svg
+      width={svgW}
+      height={svgH}
+      className="text-text-secondary shrink-0"
+      aria-label={`Ink preview: ~${Math.round(passes)} lines across the canvas`}
+    >
+      <rect
+        x={1}
+        y={1}
+        width={svgW - 2}
+        height={svgH - 2}
+        rx={3}
+        fill="none"
+        stroke="currentColor"
+        opacity={0.15}
+      />
+      <path
+        d={d}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        opacity={0.45}
+      />
+    </svg>
+  );
+}
+
 // -- Drawing Helpers --
 
 export let lastX = 0;
diff --git a/src/app/drawing.tsx b/src/app/drawing.tsx
index 36c86cd..db4103f 100644
--- a/src/app/drawing.tsx
+++ b/src/app/drawing.tsx
@@ -51,6 +51,10 @@ export type UseDrawingCanvasOptions = {
   writeCursorEvents?: boolean;
   /** Whether to draw trace image on canvas vs HTML overlay. Default: false */
   drawTraceOnCanvas?: boolean;
+  /** Total ink budget in canvas-px units. undefined = no limit (time mode). */
+  inkBudget?: number;
+  /** Called after each ink deduction with cumulative ink used so far. */
+  onInkUsed?: (used: number) => void;
 };
 
 // --- Hook ---
@@ -65,6 +69,8 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
     beforePointerDown: beforePointerDownProp,
     writeCursorEvents: writeCursorEventsProp = false,
     drawTraceOnCanvas: drawTraceOnCanvasProp = false,
+    inkBudget: inkBudgetProp,
+    onInkUsed: onInkUsedProp,
   } = opts;
 
   // --- Derived settings ---
@@ -97,6 +103,87 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
     [settingsId, userSettings, userId],
   );
 
+  // --- Ink budget refs ---
+  const inkUsedRef = useRef(0);
+  const inkDepletedRef = useRef(false);
+  const inkPreviewCostRef = useRef(0);
+  const lastPenPosRef = useRef<{ x: number; y: number } | null>(null);
+  const inkBudgetRef = useRef(inkBudgetProp);
+  inkBudgetRef.current = inkBudgetProp;
+  const onInkUsedRef = useRef(onInkUsedProp);
+  onInkUsedRef.current = onInkUsedProp;
+
+  const reportInkUsed = useCallback(() => {
+    const budget = inkBudgetRef.current;
+    if (budget === undefined) return;
+    const used = Math.min(
+      budget,
+      inkUsedRef.current + inkPreviewCostRef.current,
+    );
+    onInkUsedRef.current?.(used);
+  }, []);
+
+  const clearInkPreview = useCallback(() => {
+    if (inkPreviewCostRef.current === 0) return;
+    inkPreviewCostRef.current = 0;
+    reportInkUsed();
+  }, [reportInkUsed]);
+
+  const setInkPreview = useCallback(
+    (cost: number) => {
+      const budget = inkBudgetRef.current;
+      if (budget === undefined) return;
+      inkPreviewCostRef.current = Math.min(
+        Math.max(0, budget - inkUsedRef.current),
+        Math.max(0, cost),
+      );
+      reportInkUsed();
+    },
+    [reportInkUsed],
+  );
+
+  const deductInk = useCallback(
+    (cost: number): boolean => {
+      const budget = inkBudgetRef.current;
+      if (budget === undefined) return true; // no limit
+      if (inkDepletedRef.current) return false;
+      inkPreviewCostRef.current = 0;
+      inkUsedRef.current += cost;
+      if (inkUsedRef.current >= budget) {
+        inkUsedRef.current = budget;
+        inkDepletedRef.current = true;
+      }
+      reportInkUsed();
+      return !inkDepletedRef.current;
+    },
+    [reportInkUsed],
+  );
+
+  const getShapeInkCost = useCallback(
+    (
+      shape: 'rect' | 'circle' | 'line',
+      start: { x: number; y: number },
+      end: { x: number; y: number },
+      isFilled: boolean,
+    ) => {
+      if (isFilled) return 75;
+      const w = Math.abs(end.x - start.x);
+      const h = Math.abs(end.y - start.y);
+      if (shape === 'line') {
+        return Math.sqrt(w * w + h * h);
+      }
+      if (shape === 'rect') {
+        return 2 * (w + h);
+      }
+      const rx = w / 2;
+      const ry = h / 2;
+      return (
+        Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)))
+      );
+    },
+    [],
+  );
+
   // --- Canvas refs ---
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const isDrawingRef = useRef(false);
@@ -494,7 +581,9 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
 
   const changeBgColor = useCallback(
     (newBg: string) => {
+      if (inkDepletedRef.current) return;
       saveSettings({ lastBgColor: newBg });
+      deductInk(75);
       const bgEvt: StrokeEvent = {
         t: getTimestampRef.current(),
         x: 0,
@@ -507,7 +596,7 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
       redrawCanvas(DEFAULT_BG);
       onEventRef.current?.(bgEvt);
     },
-    [redrawCanvas, saveSettings],
+    [redrawCanvas, saveSettings, deductInk],
   );
 
   // --- Canvas operations ---
@@ -518,29 +607,34 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
     deletedShapesRef.current = new Set();
     canvasCacheDirtyRef.current = true;
     canvasCacheRef.current = null;
+    clearInkPreview();
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
     ctx.fillStyle = bgColorRef.current;
     ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
-  }, []);
+  }, [clearInkPreview]);
 
-  const loadEvents = useCallback((events: StrokeEvent[]) => {
-    localEventsRef.current = [...events];
-    shapeOffsetsRef.current = buildOffsets(events);
-    deletedShapesRef.current = buildDeletedSet(events);
+  const loadEvents = useCallback(
+    (events: StrokeEvent[]) => {
+      localEventsRef.current = [...events];
+      shapeOffsetsRef.current = buildOffsets(events);
+      deletedShapesRef.current = buildDeletedSet(events);
+      clearInkPreview();
 
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
 
-    renderEventsToCanvas(ctx, events);
+      renderEventsToCanvas(ctx, events);
 
-    canvasCacheRef.current = ctx.getImageData(0, 0, CANVAS_W, CANVAS_H);
-    canvasCacheDirtyRef.current = false;
-  }, []);
+      canvasCacheRef.current = ctx.getImageData(0, 0, CANVAS_W, CANVAS_H);
+      canvasCacheDirtyRef.current = false;
+    },
+    [clearInkPreview],
+  );
 
   // --- Pointer handlers ---
 
@@ -560,10 +654,12 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
 
   const handlePointerDown = useCallback(
     async (e: React.PointerEvent<HTMLCanvasElement>) => {
+      if (inkDepletedRef.current) return;
       if (beforePointerDownRef.current) {
         await beforePointerDownRef.current();
       }
       startedRef.current = true;
+      clearInkPreview();
 
       const pos = getCanvasPos(e);
       const t = getTimestampRef.current();
@@ -605,6 +701,7 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
         if (!canvas) return;
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
+        deductInk(75);
         const sid = crypto.randomUUID();
         const fillEvt: StrokeEvent = {
           t,
@@ -649,6 +746,7 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
       const sid = crypto.randomUUID();
       currentShapeIdRef.current = sid;
       isDrawingRef.current = true;
+      lastPenPosRef.current = pos;
       const evt: StrokeEvent = {
         t,
         ...pos,
@@ -662,7 +760,15 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
       if (ctx) drawEvent(ctx, evt, 1, shapeOffsetsRef.current);
       writeEvent(evt);
     },
-    [getCanvasPos, writeEvent, findShapeAt, drawHighlight, redrawCanvas],
+    [
+      getCanvasPos,
+      writeEvent,
+      findShapeAt,
+      drawHighlight,
+      redrawCanvas,
+      deductInk,
+      clearInkPreview,
+    ],
   );
 
   const handlePointerMove = useCallback(
@@ -744,6 +850,8 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
           const ctx = canvas.getContext('2d');
           if (!ctx) return;
           const start = shapeStartRef.current;
+          const isFilled = shapeFilledRef.current && currentTool !== 'line';
+          setInkPreview(getShapeInkCost(currentTool, start, pos, isFilled));
           drawShapeOnCanvas(
             ctx,
             currentTool,
@@ -754,13 +862,37 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
             penColorRef.current,
             brushSizeRef.current,
             1,
-            shapeFilledRef.current && currentTool !== 'line',
+            isFilled,
           );
           if (shouldWriteCursor) writeEvent({ t, ...pos, type: 'cursor' });
           return;
         }
 
         // Pen stroke
+        if (inkDepletedRef.current) return;
+        const lastPen = lastPenPosRef.current;
+        if (lastPen) {
+          const dx = pos.x - lastPen.x;
+          const dy = pos.y - lastPen.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist > 0) {
+            const canContinue = deductInk(dist);
+            if (!canContinue) {
+              // Force end stroke
+              writeEvent({
+                t,
+                ...pos,
+                type: 'end',
+                shapeId: currentShapeIdRef.current || undefined,
+              });
+              isDrawingRef.current = false;
+              currentShapeIdRef.current = null;
+              lastPenPosRef.current = null;
+              return;
+            }
+          }
+        }
+        lastPenPosRef.current = pos;
         const evt: StrokeEvent = {
           t,
           ...pos,
@@ -777,7 +909,16 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
         writeEvent({ t, ...pos, type: 'cursor' });
       }
     },
-    [getCanvasPos, writeEvent, redrawCanvas, findShapeAt, drawHighlight],
+    [
+      getCanvasPos,
+      writeEvent,
+      redrawCanvas,
+      findShapeAt,
+      drawHighlight,
+      deductInk,
+      getShapeInkCost,
+      setInkPreview,
+    ],
   );
 
   const handlePointerUp = useCallback(
@@ -835,6 +976,8 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
         const start = shapeStartRef.current;
         shapeStartRef.current = null;
         const isFilled = shapeFilledRef.current && currentTool !== 'line';
+        deductInk(getShapeInkCost(currentTool, start, pos, isFilled));
+
         const shapeEvt: StrokeEvent = {
           t,
           x: start.x,
@@ -870,6 +1013,7 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
       }
 
       // Pen end
+      lastPenPosRef.current = null;
       writeEvent({
         t,
         ...pos,
@@ -878,7 +1022,15 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
       });
       currentShapeIdRef.current = null;
     },
-    [getCanvasPos, writeEvent, redrawCanvas, findShapeAt, drawHighlight],
+    [
+      getCanvasPos,
+      writeEvent,
+      redrawCanvas,
+      findShapeAt,
+      drawHighlight,
+      deductInk,
+      getShapeInkCost,
+    ],
   );
 
   // --- Trace file upload handler ---
@@ -954,6 +1106,7 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
             isDrawingRef.current = false;
             shapeStartRef.current = null;
             currentShapeIdRef.current = null;
+            clearInkPreview();
             redrawCanvas(bgColorRef.current);
           }
           break;
@@ -1008,7 +1161,14 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
     };
     window.addEventListener('keydown', handleKey);
     return () => window.removeEventListener('keydown', handleKey);
-  }, [changeTool, changeBrushSize, changePenColor, changeBgColor]);
+  }, [
+    changeTool,
+    changeBrushSize,
+    changePenColor,
+    changeBgColor,
+    clearInkPreview,
+    redrawCanvas,
+  ]);
 
   return {
     // Canvas
@@ -1057,6 +1217,9 @@ export function useDrawingCanvas(opts: UseDrawingCanvasOptions) {
 
     // Refs for external access
     localEventsRef,
+
+    // Ink budget
+    inkDepletedRef,
   };
 }
 
diff --git a/src/app/new/page.tsx b/src/app/new/page.tsx
index ec1db46..5fd9c55 100644
--- a/src/app/new/page.tsx
+++ b/src/app/new/page.tsx
@@ -12,6 +12,8 @@ import {
   CursorOverlay,
   LoginModal,
   TimerDisplay,
+  InkDisplay,
+  InkBudgetPreview,
   ToolBar,
   ColorPickers,
   DEFAULT_BG,
@@ -113,14 +115,22 @@ function DrawCanvas({
       }
     : undefined;
 
+  const [budgetMode, setBudgetMode] = useState<'time' | 'ink'>('time');
   const [duration, setDuration] = useState(15);
   const [timeLeft, setTimeLeft] = useState(15);
+  const [inkBudget, setInkBudget] = useState(6000);
+  const [inkRemaining, setInkRemaining] = useState(6000);
   const [started, setStarted] = useState(false);
   const [finished, setFinished] = useState(false);
   const [recordingDurationMs, setRecordingDurationMs] = useState(0);
 
   const finishedRef = useRef(false);
   const streamActiveRef = useRef(false);
+  const finishRecordingRef = useRef(() => {});
+  const budgetModeRef = useRef(budgetMode);
+  budgetModeRef.current = budgetMode;
+  const inkBudgetRef = useRef(inkBudget);
+  inkBudgetRef.current = inkBudget;
 
   // Drawing hook
   const drawing = useDrawingCanvas({
@@ -147,6 +157,14 @@ function DrawCanvas({
     }, []),
     writeCursorEvents: true,
     drawTraceOnCanvas: false,
+    inkBudget: budgetMode === 'ink' ? inkBudget : undefined,
+    onInkUsed: useCallback((used: number) => {
+      const remaining = Math.max(0, inkBudgetRef.current - used);
+      setInkRemaining(remaining);
+      if (remaining <= 0) {
+        finishRecordingRef.current();
+      }
+    }, []),
   });
 
   // ensureStarted needs access to drawing values, so use a ref to avoid circular deps
@@ -155,12 +173,16 @@ function DrawCanvas({
     if (started) return;
     setStarted(true);
     streamActiveRef.current = true;
-    setTimeLeft(duration);
+    if (budgetMode === 'time') {
+      setTimeLeft(duration);
+    }
 
+    const sketchData =
+      budgetMode === 'ink'
+        ? { createdAt: Date.now(), inkBudget }
+        : { createdAt: Date.now(), duration };
     const txOps = [
-      db.tx.sketches[sketchId]
-        .update({ createdAt: Date.now(), duration })
-        .link({ author: userId }),
+      db.tx.sketches[sketchId].update(sketchData).link({ author: userId }),
     ];
     if (remixId) {
       txOps.push(db.tx.sketches[sketchId].link({ remixOf: remixId }));
@@ -456,9 +478,10 @@ function DrawCanvas({
     setRecordingDurationMs(elapsed);
     setFinished(true);
   }, [sketchId, uploadThumbnail]);
+  finishRecordingRef.current = finishRecording;
 
   useEffect(() => {
-    if (!started) return;
+    if (!started || budgetModeRef.current === 'ink') return;
     const interval = setInterval(() => {
       setTimeLeft((prev) => {
         if (prev <= 1) {
@@ -496,7 +519,14 @@ function DrawCanvas({
     router.push('/');
   }, [sketchId, router]);
 
-  const progress = started ? (duration - timeLeft) / duration : 0;
+  const progress =
+    budgetMode === 'ink'
+      ? started
+        ? (inkBudget - inkRemaining) / inkBudget
+        : 0
+      : started
+        ? (duration - timeLeft) / duration
+        : 0;
 
   const topBtnClass =
     'rounded-lg border border-border px-2.5 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:border-border-strong hover:text-text-primary';
@@ -562,28 +592,69 @@ function DrawCanvas({
               >
                 {drawing.traceUrl ? 'Easy mode ✓' : 'Easy mode'}
               </button>
+              {/* Mode toggle */}
               <div className="flex">
-                {[15, 30, 60].map((d, i) => (
+                {(['time', 'ink'] as const).map((mode, i) => (
                   <button
-                    key={d}
-                    onClick={() => {
-                      setDuration(d);
-                      setTimeLeft(d);
-                    }}
+                    key={mode}
+                    onClick={() => setBudgetMode(mode)}
                     className={`border px-2.5 py-1.5 text-xs font-medium transition-colors ${
-                      i === 0 ? 'rounded-l-lg' : ''
-                    } ${i === 2 ? 'rounded-r-lg' : ''} ${
-                      i > 0 ? 'border-l-0' : ''
+                      i === 0 ? 'rounded-l-lg' : 'rounded-r-lg border-l-0'
                     } ${
-                      duration === d
-                        ? 'border-accent bg-accent text-accent-text'
-                        : 'border-border bg-surface text-text-secondary hover:text-text-primary'
+                      budgetMode === mode
+                        ? 'border-border-strong bg-surface-secondary text-text-primary'
+                        : 'border-border bg-surface text-text-tertiary hover:text-text-secondary'
                     }`}
                   >
-                    {d}s
+                    {mode === 'time' ? 'Time' : 'Ink'}
                   </button>
                 ))}
               </div>
+              {/* Budget picker */}
+              <div className="flex">
+                {budgetMode === 'time'
+                  ? [15, 30, 60].map((d, i) => (
+                      <button
+                        key={d}
+                        onClick={() => {
+                          setDuration(d);
+                          setTimeLeft(d);
+                        }}
+                        className={`border px-2.5 py-1.5 text-xs font-medium transition-colors ${
+                          i === 0 ? 'rounded-l-lg' : ''
+                        } ${i === 2 ? 'rounded-r-lg' : ''} ${
+                          i > 0 ? 'border-l-0' : ''
+                        } ${
+                          duration === d
+                            ? 'border-accent bg-accent text-accent-text'
+                            : 'border-border bg-surface text-text-secondary hover:text-text-primary'
+                        }`}
+                      >
+                        {d}s
+                      </button>
+                    ))
+                  : [3000, 6000, 12000].map((b, i) => (
+                      <button
+                        key={b}
+                        onClick={() => {
+                          setInkBudget(b);
+                          setInkRemaining(b);
+                        }}
+                        className={`border px-2.5 py-1.5 text-xs font-medium transition-colors ${
+                          i === 0 ? 'rounded-l-lg' : ''
+                        } ${i === 2 ? 'rounded-r-lg' : ''} ${
+                          i > 0 ? 'border-l-0' : ''
+                        } ${
+                          inkBudget === b
+                            ? 'border-accent bg-accent text-accent-text'
+                            : 'border-border bg-surface text-text-secondary hover:text-text-primary'
+                        }`}
+                      >
+                        {b / 1000}k
+                      </button>
+                    ))}
+              </div>
+              {budgetMode === 'ink' && <InkBudgetPreview budget={inkBudget} />}
               <span className="text-text-tertiary hidden animate-pulse text-sm sm:inline">
                 {remixLoading ? 'Loading remix...' : 'Draw to start!'}
               </span>
@@ -610,11 +681,15 @@ function DrawCanvas({
               </button>
             </>
           )}
-          <TimerDisplay
-            timeLeft={timeLeft}
-            duration={duration}
-            progress={progress}
-          />
+          {budgetMode === 'ink' ? (
+            <InkDisplay inkRemaining={inkRemaining} inkBudget={inkBudget} />
+          ) : (
+            <TimerDisplay
+              timeLeft={timeLeft}
+              duration={duration}
+              progress={progress}
+            />
+          )}
         </div>
       </div>
 
@@ -659,8 +734,18 @@ function DrawCanvas({
         )}
         <div className="bg-surface-secondary absolute right-0 bottom-0 left-0 h-1.5">
           <div
-            className="bg-accent h-full transition-all duration-1000 ease-linear"
-            style={{ width: `${progress * 100}%` }}
+            className={`bg-accent h-full transition-all ${budgetMode === 'ink' ? 'duration-150' : 'duration-1000'} ease-linear`}
+            style={{
+              width: `${progress * 100}%`,
+              backgroundColor:
+                budgetMode === 'ink'
+                  ? inkRemaining / inkBudget <= 0.1
+                    ? '#ef4444'
+                    : inkRemaining / inkBudget <= 0.25
+                      ? '#eab308'
+                      : undefined
+                  : undefined,
+            }}
           />
         </div>
       </div>
diff --git a/src/instant.schema.ts b/src/instant.schema.ts
index 7c8f961..cec97cc 100644
--- a/src/instant.schema.ts
+++ b/src/instant.schema.ts
@@ -28,6 +28,7 @@ const _schema = i.schema({
       trimEnd: i.number().optional(),
       flagged: i.boolean().optional(),
       score: i.number().indexed().optional(),
+      inkBudget: i.number().optional(),
     }),
     votes: i.entity({
       createdAt: i.number().indexed(),