Boards that think out loud
FigJam / Miro-style collaborative whiteboard primitives — infinite canvas with dot grid, drawing tool palette, sticky notes, shape picker, connectors with end caps, hand-drawn arrows, frames, colour swatch picker, live presence cursors, multi-handle selection box, pressure-sensitive pen strokes, floating-toolbar text box, vote dots, and mind-map nodes. Tuned for Oak Flats Mufflermen brainstorm boards — Q3 marketing, workshop bay layout, customer pain points retro.
Boards that think out loud is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Boards that think out loud: FigJam / Miro-style collaborative whiteboard primitives — infinite canvas with dot grid, drawing tool palette, sticky notes, shape picker, connectors with end caps, hand-drawn arrows, frames, colour swatch picker, live presence cursors, multi-handle selection box, pressure-sensitive pen strokes, floating-toolbar text box, vote dots, and mind-map nodes. Tuned for Oak Flats Mufflermen brainstorm boards — Q3 marketing, workshop bay layout, customer pain points retro.
Pick a primitive
Every primitive renders at full scale in its own sub-route with realistic Oak Flats content — stickies like “Add ADR cheatsheet”, “Photo evidence flow needs SMS link”, brainstorm frames for the Q3 marketing campaign, mind-mapped customer pain points. Composition lives under /full-board.
Whiteboard canvas
Infinite-pan canvas surface — dotted background pattern, zoom-level indicator (125%) and live position chip. Visual only, no actual pan/zoom drag logic.
Inspect primitive statesDrawing tool palette
Vertical tool palette — pen / highlighter / eraser / shape / sticky / text / connector / hand. Keyboard hint chip on each, active tool highlighted brand red.
Inspect primitive statesWB sticky note
Whiteboard sticky note (distinct from comments/sticky-note) — rotated paper visual, 6 colour variants, author chip, +/- vote indicator, lo-fi tape strip.
Inspect primitive statesShape tool card
Inline shape picker — rectangle / ellipse / triangle / hexagon / arrow / star with size, fill, and stroke swatch chips.
Inspect primitive statesConnector line tool
Visual connector — straight / orthogonal / curved with arrow / dot / diamond endpoint caps and an optional inline label-on-line slot.
Inspect primitive statesHand-drawn arrow
Hand-drawn looking SVG arrow with three wobble variants — loose / scratchy / marker — and tone variants (ink, red, amber, teal, green).
Inspect primitive statesFrame outline
Frame group — large dashed-outline area with title chip top-left, dimension badge top-right, and tone-driven id (F-04, F-05).
Inspect primitive statesWB colour swatch picker
Tool colour picker (distinct from branding palette extractor) — 12-swatch grid, recent-used row, and inline hex input with invalid state.
Inspect primitive statesCursor presence marker
Live cursor presence — pointing arrow + collaborator label chip + tone per user. Idle state fades opacity in a slow pulse.
Inspect primitive statesWB selection box
Selection box around chosen objects — dashed teal border with 8 resize handles, top rotation handle, and a group-objects chip when count > 1.
Inspect primitive statesPen stroke layer
Pen stroke SVG primitive — bezier path generated from a points array with optional per-point pressure that drives stroke-width variation.
Inspect primitive statesText box tool
Auto-grow text box with a floating mini-toolbar — font, size, bold, italic, and colour swatches — that appears on focus.
Inspect primitive statesVote dot
Small numbered vote dot stamp collaborators stack on items during dot-voting. Three sizes, six tones, optional new-vote pulse halo.
Inspect primitive statesMind map node
Mind map node card — text label, child-count chip, collapse toggle, and depth-driven tone (root / branch / accent / leaf).
Inspect primitive statesFull board composition
Every primitive assembled into a single working board — WhiteboardCanvas with DrawingToolPalette on the left, six WbStickyNotes scattered, two FrameOutlines grouping them, HandDrawnArrows between, a mind-map cluster, multiple CursorPresenceMarkers, VoteDots stacked on stickies, TextBoxTool open mid-canvas.
Review full composition