Hand-Drawn Whiteboard Explainer

About this style

Whiteboard animation, where a hand draws an argument live while a voice explains it, became widely popular around 2010 with the RSA Animate series, in which illustrators from the agency Cognitive Media drew over recorded lectures. Software such as VideoScribe later made the style cheap to produce, and it spread through explainer videos for startups and internal training. It holds attention because the viewer reads the idea at the speed it is drawn, and the drawing order is the argument. Companies use it to explain a problem and its fix without showing much interface. Good examples keep a clear left-to-right story, give each marker color one meaning, write with a real handwriting rhythm and keep drawings simple and confident rather than detailed.

Make a 10-second whiteboard explainer: a marker draws a three-part story across a white board in quick, confident line work, the problem in red, the product in blue and the result in green, with handwritten notes, arrows between the parts and the math written and circled at the end.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Ledgerkite, which reads incoming bills and pays them on the right day (fictional). Mark: a kite (a diamond with a cross spar) with a tail of three bows.
- Title: "Bills shouldn't eat your week."
- The problem: "40 invoices a week" · "typed in by hand" · "$1,260 lost to late fees"
- The fix: "reads every invoice" · "pays it on the right day". The invoice card on the laptop: "Vendor: Hollow Creek Supply ✓" · "Amount: $482.50 ✓" · "Due: Oct 28 ✓" · "Pays on: Oct 27"
- The result: "paid on time: 40 of 40" · "6 hours back every week"
- The math, written after the hero frame: "40 invoices × 9 min = 6 hours a week"
- Sign-off: "Ledgerkite · bills that pay themselves"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a real whiteboard drawn on by a quick, sure hand in sped-up time, the way the best whiteboard explainers are: bullet-tip marker lines with wobble and ink pooling, a handful of drawings that are simple but well observed, handwritten notes, and a drawing order that tells the story from left to right. A clean board, nothing drawn twice, nothing filled flat.
- Board and inks: the board #FAFAF6 with a barely visible cool sheen (a soft diagonal band of #E8ECEF at 30% from the top-left corner) and the seeded ghosts of old erased writing (six faint smudged scribbles of #1E1F24 at 4%, blurred 3px). Four markers, each with one meaning: black #1E1F24 for people, things and the title; red #D3352A for the problem; blue #2353C6 for the product and the arrows; green #2C9A57 for the result. Nothing else is colored.
- Line quality: every line is a polyline drawn progressively along its length, 5px wide (7px for arrows and underlines), round caps and joins, its ink at 92% alpha composited with multiply so crossings and restarts darken like real marker. Each line wobbles by seeded 1D noise perpendicular to its direction (amplitude 1.1px, wavelength about 90px) and its width breathes ±0.6px along its length. Every stroke starts with a small ink pool (a 3.4px dot at 35%) and tapers over its last 6px. Shading is never a fill: it's hatching, a zigzag stroke at 40° with 9px spacing, inside the shape.
- Handwriting: Kalam 700 for the title at 64px and for the panel headings at 34px in caps with 0.06em tracking; Kalam 400 for the notes at 34px and the invoice card at 20px; the sign-off in Kalam 700 at 44px. Text appears glyph by glyph behind a clip that advances by each glyph's measured width (measureText of each prefix), never by fading, filled in its marker color at 92% with the same multiply.
- The marker: an original bullet-tip marker drawn in 2D, 30px wide and 210px long: a light grey barrel #E6E6E2 with a #C9C9C4 edge, a band in the current ink color near the tip and an end cap in the same color, tilted 26° clockwise from vertical so it leans right, its tip exactly on the drawing point; a soft shadow (#1E1F24 at 10%, blurred 10px) offset (14, 18). While drawing, the tip follows the line; between strokes it lifts (shadow offset to (22, 30), scale 1.02) and travels straight on easeInOutQuad at no more than 2,400px/s. Color changes happen during a lift: it rises a little higher and its band and cap take the new color. While writing, the tip rides each glyph's baseline with a small up-and-down motion (±10px at the glyph rate).
- Speeds: lines draw at about 2,600px/s, handwriting at about 34 characters per second, with 0.05 s lifts between strokes. Build one script listing every stroke and word in order with its color; compute each start from the cumulative length, then scale the speeds slightly per section so each section ends on its time in the structure.
- Layout, in pixels: the title at x 120, baseline y 150, black. Three panels centered at x 360, 960 and 1560, each about 500px wide, their content between y 230 and y 820. Panel headings at baseline y 262, each with a quick underline: "THE PROBLEM" in red at x 150, "THE FIX" in blue at x 760, "THE RESULT" in green at x 1340.
- Panel 1, the problem, drawn in black then annotated in red: a desk line from (150, 640) to (560, 640) with two legs down to y 760; a person seated behind it, head a 66px circle at (300, 474) tipped forward with scribbled hair, shoulders slumped, one forearm on the desk, the other hand on the forehead; a tall leaning pile of seven paper sheets on the desk at x 390–520, y 470–640, each a slightly skewed rectangle, hatched along their left edges; three envelopes (rectangles with a V flap) flying in from the upper right at (560, 330), (500, 380) and (590, 420), each with two speed lines; a wall clock at (180, 340), radius 40, reading 11:50. Red notes at x 150 on baselines 712, 757 and 802: "40 invoices a week", "typed in by hand", "$1,260 lost to late fees", with a jagged red underline under "$1,260".
- Panel 2, the fix, in black then blue: a laptop whose screen is a rounded rectangle 340 × 220 at x 790–1130, y 380–600 and whose base is a thin trapezoid from y 604 to 640, 400px wide at the bottom; on the screen, in blue, the kite mark at (822, 412), 24px tall, and "Ledgerkite" (Kalam 700, 22px) beside it; an invoice card on the screen at x 820–1100, y 440–586 with the four lines in black Kalam 400, 20px, each followed by a blue check drawn as a marker stroke (the last line has none). Draw ✓ and × as short marker strokes wherever they appear rather than relying on font glyphs. Blue notes at x 760 on baselines 712 and 757: "reads every invoice", "pays it on the right day".
- Panel 3, the result, in black then green: the same person (same head and hair) leaning back in a chair with feet up on a desk running from (1340, 640) to (1760, 640), a mug in one hand with two steam squiggles, a small smile; a wall calendar at x 1610–1790, y 330–470, a 5 × 4 grid, with a green check drawn in every box (20 checks, 0.03 s each). Green notes at x 1340 on baselines 712 and 757: "paid on time: 40 of 40", "6 hours back every week".
- Arrows: blue, 7px, curved shafts arcing 30px upward, each with a two-stroke head: from (590, 470) to (740, 470), and from (1190, 470) to (1330, 470).
- Closing: the math centered at baseline y 892 in black Kalam 400, 38px; two green loops drawn around "6 hours back every week"; a 7px black underline under the title; the sign-off centered at baseline y 980 in blue, with the kite mark drawn just before it and a 7px blue underline.
- Camera: locked off; the board fills the frame.
- Premium: fast, confident strokes with real marker texture, darker crossings, a believable marker that leans and lifts, handwriting that writes rather than fades, drawings simple enough to read in a glance, colors that each mean one thing. Cheap: perfect vector lines, a cartoon hand sprite, text that fades in, clip-art drawings, flat color fills, a camera that zooms and shakes, everything appearing at once.
- Banned: flat fills, gradients, a drawn hand, typed fonts other than Kalam, fades on text or drawings, more than four ink colors, camera moves, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.00–0.25s: the blank board; the marker slides in from the bottom-right.
- 0.25–1.10s: the title writes in black.
- 1.10–2.75s: panel 1: the red heading, then the black drawing (desk, person, pile, envelopes, clock), then the red notes and the jagged underline.
- 2.75–2.95s: the first blue arrow.
- 2.95–4.45s: panel 2: the blue heading, the black laptop, the blue mark and name, the invoice lines with their checks, the blue notes.
- 4.45–4.65s: the second blue arrow.
- 4.65–5.85s: panel 3: the green heading, the black person, chair, desk and mug, the calendar and its 20 green checks, the green notes.
- 5.85–6.3s: the marker lifts away and comes to rest at the bottom-right corner (tip near (1800, 1000)), clear of every drawing. The 6.0 s frame is the hero: the title, three complete panels with their notes and both arrows.
- 6.30–7.10s: the math writes in black and the green loops go round "6 hours back every week".
- 7.10–7.40s: the black underline under the title.
- 7.40–8.40s: the kite mark, the sign-off and its blue underline.
- 8.40–8.80s: the marker slides out of frame at the bottom-right.
- 8.80–10.0s: hold on the full board.
For other lengths, change the drawing speeds per section, never the order; keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- At load, build the whole stroke script: every polyline resampled every 2px with its wobble and width profile baked in, its cumulative length, color, start and end times. seek(t) draws each finished stroke whole, the active one up to its current length, and the marker at the active point (or on its lift path). The board, its sheen and its ghost marks are painted once into an offscreen canvas at load and blitted each frame.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that lines look like marker (wobble, darker crossings, ink pools) and not like vector strokes; text appears glyph by glyph and never fades; the marker's tip is always exactly on the drawing point and it never covers the line being drawn at the moment it's drawn; each panel uses only its colors; nothing overlaps between panels; the numbers add up (40 × 9 min = 360 min = 6 hours); the 6.0 s frame shows the title and all three finished panels with the marker at rest out of the way; and the final frame shows the whole board with the math, the loops, both underlines and the sign-off, with no marker. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…