Skip to main content

Drawing Tools

Every element you add is rendered with a hand-drawn sketch style using RoughJS, so shapes and lines look drawn by hand rather than computer-perfect. Here is what each tool does.

Pen / freehand​

Draw freehand strokes. The pen is the core "hand drawing" element — strokes are reproduced during playback as if a hand were drawing them in real time.

Shapes​

Add structured shapes that still keep the sketch aesthetic:

  • Rectangle
  • Circle / ellipse
  • Polygon
  • Arrow (to point at and connect ideas)

Shapes snap to a grid and to alignment guides as you place them, so layouts stay tidy without fighting pixel positions.

Text​

Add text elements with reveal effects:

  • Typewriter — characters appear one by one.
  • Fade — the text fades in.

Choose a font from the bundled set (Inter, Poppins, Montserrat, Open Sans, Roboto) via the font picker, and set size, color, and alignment in the properties panel.

Images​

Import a PNG, JPG, or SVG and place it on the board. Images are positioned, scaled, and animated like any other element, and can be revealed on the timeline alongside your drawings.

Properties panel​

Selecting any element opens the properties panel, where you set:

  • Position, size, rotation
  • Stroke color and width, fill
  • Sketch roughness and reveal style
  • Per-element timing and keyframes

Advanced​

  • Shape morphing — interpolate one shape into another over time.
  • Path editor — define and edit custom draw/motion paths.
  • Color filters — apply color adjustments across elements.
  • Particles — add particle bursts for emphasis.