Skip to main content

Quick Start

This is the five-minute happy path: from a blank board to an exported animation.

1. Open the editor​

Go to wbamai.aoneahsan.com/editor. You will see the canvas in the center, a tool/asset panel on one side, and a timeline along the bottom.

2. Pick a board style​

Choose whiteboard, blackboard, glassboard, or greenscreen from the board-style control. The greenscreen board is useful when you plan to key the background out later. See Board styles.

3. Add your first elements​

Use the drawing tools to add content:

  1. Text — click the text tool, type a title, and place it.
  2. Shape — drop a rectangle, circle, or arrow to point at things.
  3. Image — import a PNG/JPG/SVG and position it on the board.

Every stroke is rendered with a hand-drawn sketch style. See Drawing tools.

4. Sequence it on the timeline​

Each element gets a place on the timeline. Drag to set when an element appears and how long it draws. Reorder the draw order so the hand reveals elements in the sequence you want. For finer control, add keyframes to animate position, scale, opacity, or rotation. See Timeline & keyframes.

5. Add narration (optional)​

Open the audio panel to:

  • Generate a text-to-speech voiceover (Web Speech API), or
  • Record your own voice, or
  • Upload an audio track and mix it.

See Audio & narration.

6. Preview​

Use the preview to play the animation start-to-finish and check timing before exporting.

7. Export​

Open the export dialog, choose a resolution (480p / 720p / 1080p) and format:

  • WebM — a real video file with optional audio.
  • Animated GIF — silent, great for embedding and previews.

The render runs in your browser; when it finishes you get a downloadable file. See Export to WebM or GIF.

That's it​

You have made a whiteboard animation end-to-end. Next: