Inspire from anywhere

Compose a message, watch it on a photoreal Vestaboard, and share it — the board below is the embeddable engine (index-webpage.html) dropped in with a single <iframe>: real flap footage on the photographic board render, transparent, responsive, and cycling its messages on its own.

Center on board Preview transparent background

One line per board row · press Enter for a new row · color chips like {G} and {H} work too.

Color chips & heart:

click to drop into your message

✏ Paint bits (click the board) Turn this on, then click any single flap on the board to select it — type a letter, hit a colour chip, or press Space/Backspace to clear. Arrow keys move the selection. Everything you paint is written straight back into the message box above, so typing and painting stay in sync.

Model Finish Frame Light Transition Shadow

Flap speed Hold each message Pause at each end Flap speed sets how long each individual flap takes, so a message whose letters have further to travel takes longer — same as the real board. The times shown are for a typical message; short ones land quicker. The pause adds a still moment to each end of an export so there's something to trim into.

Wide Tall Array flip Note + Frameless only — boards stack flush, no gap, up to 8 wide x 6 tall. The physical array always flips Classic (every Note at once, in sync); Concept previews the proposed whole-array sweep.

Background Nudge board in scene

Real width

Frame photo (move the background) Zoom

Upload a photo (stays in your browser — never uploaded anywhere), then click Draw board area and drag a box where the board goes. It aspect-fits centered in your box; turn on Nudge board (done automatically after drawing) to fine-tune. Re-drawable anytime. With Note + Frameless selected, drawing suggests a whole board array — a live ghost grid shows the fit ("4 wide × 2 tall") while you drag, the Wide/Tall steppers adjust it afterward (the array re-fits inside your drawn area), and entering the photo's real width first makes the suggestion physically accurate instead of an estimate. Placement and chosen array are remembered per photo — re-upload the same image to get them back. Custom photos are local to this browser session and aren't included in share links.
Want to reposition the photo itself (not the board)? Turn on Frame photo and drag the background to pan it, or use the Zoom slider to scale it — the framing is saved per photo and included in the export. ("Nudge board" and "Frame photo" are separate — only one is active at a time.)

The 5 real-world scenes are placeholder graphics until real photos are supplied. The board is sized to fill most of the frame in every output size so it stays legible (and easy to paint on) — scale it down with Nudge board if you want it to sit more modestly in the scene. Nudge lets you drag the board (or its corner handle) directly on the preview above — saved per scene and per output size.

Save & Send also updates this page’s URL (bookmark it to keep the message) and builds an index-webpage.html#… link you can paste into another site’s <iframe src>.

What travels in a link: the message, model, finish, frame, lighting, transition, scene, array size, shadow and output size. What doesn’t: an uploaded photo (its bytes only ever exist in your browser), and the fine-tuning you do on top of it — nudged board position, photo framing and hero calibration are saved per browser, so the person opening your link sees the scene’s default placement, not yours. Send a rendered video if the exact composition matters.

Output size The preview above reshapes to match, so what you compose is exactly what exports — board placement, photo framing and shadow all land where you put them.

MP4 renders offline (no need to keep the tab in front) as a crisp, frame-exact clip at the chosen output size — smooth and complete every time, even for large stacked board arrays. Export all sizes renders 16:9, 9:16 and 1:1 back-to-back and saves three separate files (each name ends in its size), reshaping the composition for each. ProRes 4444 also renders offline at the chosen size and has a real alpha channel — just the board, background removed, ready to drop over anything in After Effects/Premiere. First use downloads the ProRes encoder (~25 MB, cached after).

Drop it in with one tag

Point an iframe at the board and pass your message + style in the URL hash.

<iframe
  src="index-webpage.html#view=hero&model=flagship&theme=black&msg=INSPIRE%20FROM%20ANYWHERE~COMMUNICATE%20WHAT%20MATTERS&transition=wave"
  style="width:100%; aspect-ratio:16/7; border:0; background:transparent"
  title="Vestaboard" loading="lazy"></iframe>

Tip: separate rows with | and separate cycling messages with ~. Use the URL hash (#) rather than ? so parameters survive static-host "clean URL" redirects.

Or change it live from your code

No reload needed — post a message to the iframe and the board re-flips to the new content instantly. (That's exactly what the controls under the board above do.)

const board = document.getElementById('heroBoard').contentWindow;
board.postMessage({ type:'vestaboard',
  msg: 'NOW OPEN ~ COME ON IN',      // | = new row,  ~ = next message
  theme: 'white', transition: 'curtain'
}, '*');

Send any subset of msg, model, theme, frame, view, transition, speed, hold, colms, loop, breathe, autoplay, bg, pad, light, shadow, center, fromblank, scene, nudge, stackx, stacky, arrayflip, ratio. If the board is on the same page (not in an iframe), call Vestaboard.setMessage('HELLO') or Vestaboard.set({theme:'black'}) directly.

Full window.Vestaboard API: set(opts), setMessage(msg,extra), config (read-only getter), ready(), export(opts) / exportAlpha(opts) (MP4 / ProRes 4444 alpha, both return a Promise), and the scene-placement pair startPlace({realWidthIn}) (arms draw-to-place for the active custom photo, returns false if there's no successfully-decoded photo to draw on; with Note + Frameless active the drawn rectangle suggests a whole board array, and passing the photo's real-world width via realWidthIn makes that suggestion physically accurate) and impliedWidth(realWidthIn) (sanity-check readout only — never affects rendering; array-aware).

Also available: refitNow() — forces an immediate re-measure and re-fit of the board. Worth knowing if you host the engine yourself and change the frame's shape: the engine's own re-fit rides on resize/ResizeObserver, which browsers suspend in a background tab, so call this before measuring or exporting after a reshape. Photo framing: frameZoom(scale), frameReset(), frameState(). Paint: setPaint(on), paintSelection(), paintCell(drumIndex), paintKey(key) (forward a keystroke when focus sits outside the board), plus gridText() / cellText(drumIndex) to read the board back as message text.

Any model, finish, or motion

Note · white · frameless · curtain

Note · black · drift

URL parameters

Param	Values	Notes
`model`	flagship · note	Board size (6×22 / 3×15)
`theme`	black · white	Flap finish
`frame`	framed · frameless	Note variant
`view`	flat · hero	flat = instant; hero = photoreal (needs `/assets`)
`transition`	classic · wave · drift · curtain	Reveal style
`msg`	text	`\|` = new row · `~` = next message · `{G}` etc. = color chips, `{H}` = heart
`speed` / `hold`	ms	Per-flap speed / per-message hold
`loop` / `breathe`	1 · 0	Cycle the queue / pulse a single message
`bg`	CSS color	Stage background (default transparent)
`pad`	px	Gap between board and container edge
`light`	left · top · right	Lighting direction (default top)
`shadow`	0-100	Cast-shadow intensity onto the scene, direction keyed to `light` (default 55, 0 = off). Applies only on scene-photo and custom-photo backgrounds (transparent/studio scenes are shadow-free); MP4 export only — omitted from the ProRes alpha export by design
`center`	1 · 0	Center the message on the board
`fromblank`	1 · 0	Reveal from a blank board (default 1)
`scene`	transparent · studio-light · studio-dark · office-wall · kitchen-counter · living-shelf · retail · conference · custom	Background scene (default transparent). `custom` only works after an upload — see the composer's photo upload panel, since it isn't reproducible from a URL alone
`nudge`	1 · 0	Drag-to-move/resize the board within the active scene (real-world or custom scenes only)
`stackx` / `stacky`	1-8 / 1-6	Note + Frameless only — tile that many boards wide/tall, flush with no gap (default 1x1, an ordinary single board)
`ratio`	16x9 · 9x16 · 1x1	Output aspect ratio for exports (default 16x9). Note this sizes the exported file; it does not resize an embedded board — the composer pairs it with a matching preview frame, which is what makes preview == export. On scene backgrounds the export follows the host frame's shape
`arrayflip`	physical · concept	Array flip behavior (default `physical`, matching the real Note Array: every Note flips Classic, all starting in sync — wave/drift/curtain apply to single boards only). `concept` previews the proposed unified whole-array sweep