Cursor trail draw
ProA whiteboard where ink is smoothed and shaped by pressure, a laser pointer leaves a fading trail, and rough circles, boxes, triangles and lines snap to clean shapes on a small spring when the pen lifts.
Live · keyboard ready
Onboarding flow sketch
Draw with a pointer, or with the keyboard: arrow keys move the cursor, Shift moves slowly, Space or Enter puts the pen down and lifts it, Escape cancels a stroke. P picks the pen, L the laser pointer, S turns shape snapping on or off, and Control or Command Z undoes.
The board is empty.
- A design review, planning or teaching tool where people sketch boxes, flows and circles quickly and want them tidy.
- A live walkthrough or demo where a presenter points with a laser that cleans up after itself.
- A landing page that lets visitors try a sketching feature directly.
- Use signature-pad to capture a signature to sign a document.
- Use annotation-board to pin comments on a screenshot or design.
- Use a full canvas editor when people need selection, text, layers or infinite zoom.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { CursorTrailDraw } from "@/components/arc/cursor-trail-draw/cursor-trail-draw"; export function ReviewBoard() { return ( <CursorTrailDraw label="Checkout review" intro={false} colors={[ { id: "ink", label: "Ink", value: "var(--foreground)" }, { id: "accent", label: "Accent", value: "var(--accent)" }, ]} onChange={items => saveSketch(items)} /> );}CursorTrailDraw
A whiteboard for quick sketches and live walkthroughs. Ink is smoothed and shaped by pressure (real pen pressure, or speed for a mouse or finger), a laser pointer leaves a trail that fades away, and a rough circle, ellipse, box, triangle or line snaps to a clean shape on a small spring the moment you lift. Keep as drawn undoes a snap in place.
PropTypeDefaultDescription
labelstring"Whiteboard"Heading and accessible name of the board.colorsWhiteboardColor[]Ink, Accent, RedInk colors in the toolbar, each with an id, a label and any CSS color. The first one is selected first.defaultTool"pen" | "laser""pen"Tool selected first. People switch in the toolbar or with P and L.defaultSnapbooleantrueWhether rough shapes snap clean. People switch it in the toolbar or with S.sizenumber4Pen size in CSS pixels at half pressure. Strokes thin with speed and taper at both ends.smoothingnumber0.5How much the ink trails the pointer, from 0 (raw) to 1 (very smooth).laserFadenumber700How long the laser trail takes to fade, in milliseconds.introbooleantruePlays a short sketch once, the first time the board is in view: a rough circle and box snap clean and get connected, then the laser points at them. Any pointer or key takes over at once.speednumber1Multiplies the speed of the snap spring, the laser fade and the intro.pausedbooleanfalseStops all animation. Shapes land at once, the laser shows only its dot, and drawing still works.accentstring–Any CSS color for the accent ink, the laser and the selected tool. Defaults to the theme accent.hintstring"Draw a rough circle, box or line. It snaps clean."Line shown on the empty board. Pass an empty string to hide it.onChange(items: WhiteboardItem[]) => void–Called after a stroke lands, snaps, is kept as drawn, undone or cleared. Each item has an id, a shape, a color id, a width and its centerline points in board units (the board is 1000 units wide).classNamestring–Class on the root element.styleCSSProperties–Inline styles on the root element.- The root is a labelled section. The drawing surface is a focusable application region with a whiteboard role description, linked to its key help and to a written summary of what is on the board.
- Full keyboard drawing: arrow keys move the cursor (diagonals by holding two, Shift for slow), Space or Enter puts the pen down and lifts it, Escape cancels a stroke. P and L pick the pen and the laser, S toggles snapping, and Control or Command Z undoes.
- The toolbar is a labelled toolbar; arrow keys, Home and End move between its buttons. Tools, colors and snapping are toggle buttons with aria-pressed and specific names.
- Snaps, kept strokes, undo, clear, tool changes and pen down or up are announced in a polite live region. The snap confirmation has a real Keep as drawn button.
- The drawing itself is hidden from assistive technology; the summary lists every item by shape.
- One requestAnimationFrame loop eases the pen tip toward the pointer in substeps and writes each stroke outline straight to its path; React renders only when a stroke lands, is undone or the tool changes.
- Width follows real pen pressure, or speed for a mouse and finger, and every stroke tapers in and lifts off with a taper.
- On release, the stroke is resampled and each point travels to the matching point of the clean shape on a lightly underdamped spring, so it lands with a small physical settle, then swaps to an exact vector path. Keep as drawn runs the same spring back.
- The laser trail thins from head to tail and fades out on its own; lifting leaves it to shrink away.
- The loop runs only while something moves, and stops offscreen and in background tabs.
- With reduced motion or paused, the finished sketch is shown at once, snaps land immediately and the laser shows only its dot.
- The board is one SVG that is always 1000 units wide; its viewBox height follows the measured stage, so ink scales with the board and never distorts.
- Container queries switch the stage from 16:10 to 4:5 below 560px and lay the intro sketch out vertically.
- Touch drawing uses touch-action none on the surface only, so the page still scrolls around it. Toolbar buttons stay 34 to 40px on a 48px pill.
- Stroke outlines are built from the smoothed centerline each frame only for the stroke that changes; settled shapes are static paths.
- Pointer math reads the stage rectangle once per event and no layout is read in the loop.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Recognition covers lines (snapped to 0, 45 and 90 degrees when close), circles, ellipses, rectangles and squares (level when close), triangles and four sided shapes. Anything else stays freehand.
- Coordinates in onChange are in board units: x runs from 0 to 1000 at any width, so saved sketches scale with the board.
- Turn intro off where the board holds real work, such as a saved review.
- Everything is local; wire onChange to persist or share strokes.
The full library index for assistants is at /llms.txt.