Whiteboard / RecordingSelected

Excalicord

A whiteboard explainer workspace with teleprompter and recording built in

A desktop-first explainer workspace that combines an Excalidraw-style canvas with scenes, teleprompter, reference media, camera bubble, recording frame, and GitHub sync.

  • Whiteboard
  • Recording
  • Teleprompter
  • Explainers
SelectedWeb AppLiveWebUpdated 2026-05-20
Excalicord cover

Overview

What shaped the work

Outcome

Results and impact

  • Turned sketching, explaining, recording, and saving into one continuous workflow.
  • Made the product feel closer to real walkthrough production than either a plain whiteboard or a plain recorder.

Decision

Key decisions and tradeoffs

  • Extended a familiar whiteboard core instead of rebuilding the canvas from scratch.
  • Made scenes, teleprompter, reference media, camera bubble, and sync part of one coherent workspace.

Evidence

Evidence and proof

  • Live prototype exposes scenes, teleprompter, reference source, camera bubble, preview frame, and sync panels.
  • Current deployed title still references 20260331-excalicord-base, showing an evolving standalone build rather than a one-off mockup.

Case study

Narrative, decisions, and proof

01

Outcome

Results and impact

  • Turned sketching, explaining, recording, and saving into one continuous workflow.
  • Made the product feel closer to real walkthrough production than either a plain whiteboard or a plain recorder.

02

Decision

Key decisions and tradeoffs

  • Extended a familiar whiteboard core instead of rebuilding the canvas from scratch.
  • Made scenes, teleprompter, reference media, camera bubble, and sync part of one coherent workspace.

03

Evidence

Evidence and proof

  • Live prototype exposes scenes, teleprompter, reference source, camera bubble, preview frame, and sync panels.
  • Current deployed title still references 20260331-excalicord-base, showing an evolving standalone build rather than a one-off mockup.

04

Role

Role and contribution

  • Owner / Product Engineer: defined the explain-workflow product boundary and integrated canvas, recording, and sync capabilities.

05

Problem

Problem to solve

  • Whiteboards are good at drawing and recorders are good at capture, but explanation workflows need script, reference, camera, and framing together.

06

Constraints

Constraints and boundaries

  • Support tools had to stay present without overwhelming the canvas.
  • Recording permissions, camera state, and draft sync all introduce fragile UI states.

07

Background

Why this exists

This was not about making another whiteboard. The trigger was the real explain workflow: whiteboard, script, reference media, camera, and screen recording usually live in separate windows.

08

Scenario

Use scenarios

  • Record whiteboard explainers with a presenter camera and script.
  • Walk through product ideas while referencing a live browser tab or local video.
  • Keep asynchronous explanation projects editable, not just exported.

09

Delivery

What I shipped

  • Scene list for segmenting an explanation into reusable beats.
  • Teleprompter, reference panel, camera bubble, and preview frame in one workspace.
  • GitHub sync for saving and continuing project state over time.

10

Design

Design decisions

  • The product behaves like a presenter workspace, not a generic canvas clone.
  • Assistive layers stay hideable so the canvas remains the center of attention.
  • Desktop-first constraints are intentional because recording and multi-surface control matter.

11

Tech

Implementation

  • Built around an Excalidraw canvas with custom rails, teleprompter, media panels, and recording overlays.
  • Uses browser media APIs for camera, screen-sharing, recording, and export workflows.
  • Adds repo/branch/path-based GitHub sync to turn recordings into maintainable project files.

12

Access

Current access

  • Live prototype: https://excalicord.zondev.top.
  • The current experience is explicitly desktop-oriented.

Flow

The path from entry to completion

This version is best understood as a living product: entry points, feedback loops, and completion states matter as much as the surface design.

Frame / Explain / Record / Sync

Excalicord flowFrameExplainRecordSync

Explore

Open the product in context

Excalicord cover

Live preview

Some sites may block iframe embeds because of their security policy. If the frame stays blank, use the Open live link above.

Access

This entry is still part of a living practice. The public surface may be a live URL, a guided preview, or a curated set of interface states depending on the current release shape.