ScribleSketch AI canvas for non-linear thinking.
Canvas is an infinite surface for the messy middle of thinking. The AI composes four to eight clusters of sticky notes, callouts, and small diagrams — you pan, zoom, and drag them into the shape of your own argument. Drag positions persist per block, so the spatial arrangement is real, not a preview.
Sequence is a decision you don't always want to make yet.
Every other shape — notebook, slides, brief, journal, conversation — picks an order for you and asks you to commit. Canvas lets you hold the ideas next to each other until you know which one comes first.
Linear notes lose the relationship between two ideas — the reader sees them as a list, not a network.
A canvas is for thinking, not for finishing — sequence is a decision you make later.
Spatial > sequence when ideas don't yet have an order. The page imposes one regardless.
- — Should ranking come before retrieval?
- — Are sticky notes a UI or a thinking tool?
- — Where does AI fit on this surface?
One reading order. The page chooses for you.
Every order is available. You choose.
Same blocks. Same composition. Switching shape doesn't rewrite your content — it changes the question the page is asking.
Every H1 becomes a thinking cluster.
The canvas reader splits your blocks on H1. Each H1 becomes a cluster — a region of the canvas that anchors its body blocks. Sub-headings, sticky notes, callouts, diagrams beneath that H1 shelf-pack into the region beneath the title.
Clusters position themselves on a golden-angle spiral (137.5°) so the layout feels organic, not gridded. The first cluster sits at the origin; subsequent clusters drift outward at r · √i.
Four primitives. No menus.
The canvas's interaction model is deliberately small. Pan, zoom, drag, reset. Every gesture maps to a single primitive — no modes, no toolbars, no shape pickers. The plane is a hand; the blocks are cards.
Click empty dotted space and drag. The plane moves; nothing inside it does. Trackpad two-finger scroll pans without modifier keys.
Hold Cmd (or Ctrl) and scroll to zoom toward the cursor — not the center. Floating + / − buttons zoom around the viewport midpoint. Range 8% – 300%.
In edit mode, every node — heading, sticky note, callout, diagram — is grabbable. Click and drag converts to plane coordinates via 1 / zoom, so the feel is 1:1 at any zoom level.
fit frames every cluster with padding. 1:1 returns to the default 70 % view centered on origin. auto wipes every manual override and falls back to the deterministic spiral.
All four primitives use the same transform refs internally — the plane mutates its style.transform via translate3d + scale on every pointer move, so 70 nodes don't re-render while you drag.
Same model. Different vocabulary.
When you compose with shape=canvas, the prompt swaps in a directive that tells composition AI what reads at a glance on an infinite surface — and what doesn't. The block catalog is the same; the menu the AI orders from is not.
Short, opinionated, colored. The PRIMARY canvas block.
One-line emphasis, key insights, warnings.
Labelled illustration for structural relationships.
3–6 nodes with ordered relationships.
Graphs, state machines, decision trees.
A single quotable line as an anchor.
Pinned 'remember this' idea.
When the cluster teaches a term.
Anything over ~40 words. Rewrite as sticky notes.
Reads as a vertical list, not spatial nodes.
Too data-dense for a glanceable node.
Only if the source is genuinely about code.
That's its own shape. Don't mix.
Directional structure — better as a notebook.
Don't nest a canvas block inside a canvas.
Planner-style, not thinking-style.
// TARGET SHAPE: CANVAS — infinite spatial surface
- Emit 4–8 level-1 headings. Each H1 is a cluster anchor — a
region on the canvas. Headings should be CONCEPTS or
thinking-zones, not document sections.
- Each H1 has 4–10 body blocks. Each body block becomes its
OWN spatially-placed node — pick blocks that READ AT A GLANCE.
- Mix 2–4 different block types per cluster — never 8
sticky_notes in a row. Variety scans well at low zoom.
- Tone: punchy, opinionated, fragmentary. Like scribbling on
a wall, not finishing an essay.Drag once. Stays put forever.
Manual positions are first-class data. Every drag writes tocomposition.canvasPositionskeyed by block id — so positions survive reload, shape switching, and even a full recompose (when the AI re-uses the same ids).
Drag
While dragging, style.left and style.top mutate directly on the node — no React re-renders. Screen-pixel delta divides by zoom for 1:1 plane motion.
Dispatch
On pointer-up, if the cursor moved past the 3 px deadzone, the runtime dispatches a typed op with { blockId, x, y } onto the resume reducer.
Persist
The reducer writes { [blockId]: { x, y } } onto the composition. The autosave layer flushes to storage; the next render reads it back and the deterministic layout yields.
// On ResumeComposition:
canvasPositions?: Record<string, { x: number; y: number }>;
// On ResumeOp:
| { type: 'set_canvas_block_position';
blockId: string; x: number; y: number }
| { type: 'clear_canvas_positions' }When the AI returns a fresh composition, blocks that come back with the same id keep their dragged coordinates. New blocks join via the deterministic spiral so the layout never breaks.
The auto button (only visible after the first drag) dispatches clear_canvas_positions — the map empties, the deterministic golden-angle spiral reasserts itself across every block.
Stop ordering ideas. Arrange them.
Compose a notebook. Flip the shape to Canvas. Watch the AI fan your blocks into thinking clusters. Drag them into the shape of your own argument. Reload — they're still there.