How Inkplainer Works

1

Core Concepts

Inkplainer takes your images and text and turns them into videos that look like someone is drawing them by hand in real time — the kind of effect you see in explainer videos, educational content, and social media animations. You upload your content, choose how it should be drawn, hit Generate, and the app animates it frame by frame on a canvas. When you're happy with the result, you export it as a video file.

There are no subscriptions or required accounts. The editor runs directly in your browser and saves projects locally on your device.

The Mental Model

Before touching any setting, it helps to understand how the app thinks about your project:

1. Layers are the raw material. Every image or piece of text you add becomes its own layer. Layers stack on top of each other on the canvas, just like in any image editor.
2. Settings tell the app how to draw each layer. You select a layer, then configure its animation style, drawing look, speed, and hand. Every setting you change applies to that specific layer — not to the whole project. Each layer in your animation can look completely different from the others.
3. Generate is the moment the app reads all your layers and their settings and plays the animation. You can watch it in real time, pause it, restart it, and tweak settings between runs.
4. Export records the animation as a video file that you can use anywhere.

How the Canvas Works

The canvas is the white (or colored) area in the center of the screen. It is where your animation plays. What you see on the canvas during playback is exactly what will be recorded when you export — no hidden cropping, no re-rendering.

The canvas has a fixed resolution you choose (720p, 1080p, or 1440p) and a fixed aspect ratio (16:9, 9:16, or 1:1). When you upload an image, it is automatically scaled and centered to fit within that canvas. You can then reposition and resize it however you like.

How Layers Animate in Sequence

When you press Generate, layers animate one after another, in the order you define. As each layer finishes being drawn, it gets permanently "baked" into the background — it stays visible while the next layer animates on top of it.

• Earlier layers are always visible behind later ones
• Two layers with the same order number animate at the same time, in parallel

The Two Sidebar Tabs: Animation and Drawing

Animation tab is designed for speed. It gives you a set of styles that work well out of the box — similar to what you find in other whiteboard animation apps. Pick a style, adjust a couple of sliders, and get a good-looking result in under a minute.

Drawing tab is designed for control. It gives you detailed options for how outlines are detected, how strokes look, how fills are applied, and how the image is revealed.

The two tabs are mutually exclusive per layer — you pick one approach for each layer, not both. If you want the Animation tab's look on one layer and the Drawing tab's look on another, that is completely valid. But a single layer uses either the Animation tab or the Drawing tab, not both at the same time.

2

Projects and the Interface

Creating a Project

When you first open the app, a new project is created automatically with a randomly generated name like "Bold Sketch" or "Vivid Canvas." To manage your projects, click the Projects button in the top bar.

• Create a new project — click "New Project." The current project is saved automatically before switching.
• Switch to an existing project — click its name in the list.
• Delete a project — hover over it and click the delete button. This is permanent and cannot be undone.

Auto-Save

The app saves your project automatically every time you make a meaningful change. You do not need to press a save button. A small save indicator appears briefly in the top bar each time a save completes.

What gets saved per project:

• All layers, including their images, positions, sizes, and every per-layer setting
• Canvas dimensions and background
• Global animation settings (hand style, speed, etc.)
• Layer groups and animation order

The Top Bar

Keyboard Shortcuts

3

Layers

Adding Images

To add an image, use the drop zone in the top section of the right panel. You can drag and drop one or more image files directly, or click the drop zone to open a file browser.

Supported formats: PNG, JPG, GIF, SVG. You can upload multiple files at once — each file becomes its own layer. The app accepts images of any size and will scale them to fit the canvas automatically.

Adding Text

Switch to the Text tab in the right panel to add a text layer. Configure your text first, then click "Click canvas to place text" and click anywhere on the canvas to drop it.

• Font — choose from the font picker list
• Size — 10–400px
• Style — Bold (B) and Italic (I) toggles
• Alignment — Left, Center, or Right
• Line height — 0.80–2.50
• Letter spacing — −5 to 30
• Color — 8 preset swatches or a custom color picker

To edit text after placing it, double-click it directly on the canvas. Press Ctrl + Enter to confirm, or Escape to cancel.

The Layer List

Every layer you add appears in the layer list at the bottom of the right panel, from top to bottom in visual stacking order. Each layer row shows:

• ⠿ Drag handle — drag to reorder layers in the visual stack
• Eye icon — toggle visibility. Hidden layers are excluded from the animation
• Thumbnail — a preview of the image or text
• Layer name — click once to select; click again to rename inline
• Order field — controls when this layer animates
• ✕ Delete — removes the layer (use Undo to recover)

Click any layer to select it and expand its individual controls: Resize (10–300%), Opacity (0–100%), Group assignment, and Position & Size (X, Y, W, H coordinates).

Animation Order

The Order field on each layer controls when it animates relative to the others.

• Layers animate from the lowest order number to the highest
• Layers with no order number animate after all numbered layers, in visual stack order
• Layers with the same order number animate simultaneously — in parallel

The Slicer

The Slicer cuts one layer into multiple new layers, each with its own independent animation. Select a layer and click the Slice button above the layer list to open it.

Canvas Background

The canvas background sits behind all layers and is included in the exported video. Choose from solid colors (White, Black, None, Custom) or ten preset textures:

4

Animation Tab — Fast and Familiar

The Animation tab is the starting point for most projects. Pick a style, optionally adjust the Chunks slider, and press Generate. The styles here are designed to be intuitive and fast — similar to what you find in other whiteboard animation apps.

Settings Presets

The Presets card sits above both tabs. Presets save and restore your entire settings configuration in one click.

To save a custom preset, click "+ Save current settings" at the bottom of the Presets card. Up to 6 custom presets can be saved.

Basic Animation Styles

The Chunks slider (6–80) appears for Chunk Jump and Outline Chunks. Low values (6–15) = large chunks that appear quickly. High values (50–80) = many small tiles building up gradually.

Specialized Animation Styles

The seven Specialized styles use the same reveal engine as Chunk Jump, but apply a subject-aware spatial priority map — each one draws in an order that feels natural for that type of subject.

5

Drawing Tab — Advanced Control

The Drawing tab controls how the drawing looks — the character of the strokes, the quality of outline detection, whether the original image is revealed at the end, and more.

Outline Animation Modes

An important distinction from the Animation tab: the Drawing tab never reveals the original image during the drawing process. Instead, it actively draws strokes, outlines, and fills from scratch — interpreting your image's edges and colors as drawing instructions. The result is a drawn version of your image, not the original. The exception is the "Reveal original image at the end" option in Fill Options, which places the actual original image on top of everything once drawing is complete — useful when the drawn result works as a process but you want the final frame to be clean.

Stroke Style

Coloring Style

Sparse — minimal uneven coverage, loose sketchy quality.
Filled (Default) — complete color coverage, solid and clean.
Watercolor — soft translucent color that bleeds slightly beyond outlines, painterly and organic.

Outline Detection

Detection Slider (0–100)

Detection Algorithm

Fill Options Card

Appears when Outline Fill or Illust Fill is selected. Controls what happens after the drawing phase.

Image Reveal Animations

The Outline Overlay controls whether drawn strokes remain visible on top of the revealed image — toggle visibility and set opacity (0–100%). Outline color and thickness (0.5–8px) control the appearance of the drawn strokes, with an auto-detect option to pull colors from the image itself.

Outline Only Options

These two options exist for users who specifically want to use the Drawing tab with real photographs, but it is worth being direct: the Drawing tab is not designed for photos, and results will vary significantly. If you are working with photographs, the Animation tab will almost always produce a better result with less effort.

Color Region Outlines — finds boundaries between solid-color regions rather than fine ink lines. Slightly more reliable on photos than standard edge detection, but still limited.

Real Image Edges — gradient-based detection tuned for photographic content, finding object boundaries and structural contours. Pair it with a strict detection slider value (20–40) to reduce clutter.

Text Draw Options

Start Direction — Left→Right (default), Right→Left, Top→Bottom, Bottom→Top. Controls which part of the text image animates first.

Fill Style — Reveal (text appears progressively), Outline (traces just the letterform borders), or Outline + Fill (traces then fills the interior — the most "drawn" result).

6

The Bottom Bar

Hand Style

The hand is the graphic that moves across the canvas during animation — the visual element that sells the "someone is drawing this" illusion. Five options are available: Ghost, Hand 1, Hand 2, Hand 3, and Pen. Ghost means no hand graphic is shown at all — the drawing happens invisibly, hence the name. The other four are different visual styles of a hand or writing instrument. Choose whichever looks right for your animation — there is no functional difference between them beyond appearance.

Speed Controls

Two sliders control different aspects of the animation timing independently.

Reveal Speed (1–100) — how many pixels of image content are revealed per animation tick. This is the primary speed control that determines how long the animation takes from start to finish.

Hand Speed (1–20) — how fast the hand graphic itself moves across the canvas, independently of reveal speed.

Reveal Speed is most effective in the Animation tab, where it directly controls how fast the original image is uncovered. In the Drawing tab, it controls the pace at which strokes are laid down — it still works, but the relationship is less direct since nothing is being revealed. Adjust both sliders to find the timing that feels right for your animation.

Canvas Size

Aspect Ratio — 16:9 (landscape, default), 9:16 (portrait/vertical), 1:1 (square)

720p is the right choice for most use cases — renders faster and produces smaller files. Use 1080p for large screens or high-resolution embeds. Use 1440p only when output quality genuinely demands it — render time increases significantly.

7

Generating and Exporting

The Generate Button

The Generate button is pinned at the bottom of the left sidebar. Clicking it reads all your layers and their settings, builds the animation from scratch, and begins playing it on the canvas.

Every time you change a setting, you need to click Generate again to see the updated result. The canvas does not update in real time while you adjust settings — Generate is always the step that applies your changes.

The Playbar

The playbar sits directly below the canvas once an animation has been generated.

• ⟳ Restart — stops and regenerates the animation from the beginning
• ▶ / ⏸ Play / Pause — toggles playback. Also triggered by Space
• Progress bar — click anywhere to seek to that point in the animation
• % display — current position as a percentage. 0% = blank canvas, 100% = final frame
• Done badge — green badge that appears at 100%, confirming the animation completed

Exporting Your Animation

Click the Export Video button in the top bar to open the export banner.

Format

WebM (Recommended) — modern open format with broad browser support. Best for YouTube, website embeds, and most editing workflows.

MP4 (H.264) — useful when you need wider compatibility outside the browser. Only available in Chrome and Edge — Firefox and Safari fall back to WebM automatically.

Quality

The Recording Flow

1. Click Start Recording in the export banner
2. The animation automatically restarts from the beginning
3. The canvas plays through the entire animation — do not interact with the app during recording
4. When the Done badge appears, recording stops automatically
5. Your browser downloads the video file immediately

Export Checklist

Before clicking Start Recording, run through this list:

• Canvas size and aspect ratio are set correctly for the destination platform
• All layers are visible (check the eye icon on each layer)
• Animation order is set the way you want
• You have clicked Generate and watched the full animation at least once
• The Done badge appeared, confirming the animation completed without errors
• Format is set to your preference (WebM for most uses, MP4 for compatibility)
• Quality is set appropriately for the destination
• "Export final frame as PNG" is checked if you need a still image