FRAME
SKETCH

Extract frames from video · Draw with Apple Pencil · Animate your rotoscoped creation

🎞️
Tap to select a video
or drop a clip here
CONFIGURE
RANGE
FRAMES
Columns4
Rows3
GRID PREVIEW
EXTRACTING
Preparing…
CONTACT SHEET
1/1
100%
ANIMATE
FPS
12fps
Tap frame to set hold (×1 → ×2 → ×4 → ×1)
v2.0 · User Manual
THE WORKFLOW
📂 Load video
⚙️ Configure
🎞 Extract frames
✏️ Draw
▶ Animate
① LOAD
📂
Open a videoTap the drop zone or drag any video file — MP4, MOV, WebM. Works with clips from any camera or screen recording.
② CONFIGURE
🎬
Whole Movie vs SegmentChoose to extract from the full clip or drag the two orange handles on the timeline to select a start and end point. The waveform shows audio so you can snap to beats.
Grid modeSet Columns and Rows independently. Total frames = cols × rows. Good for a classic contact sheet you want to print.
Animation Duration modeSet a target duration (e.g. 3 seconds) and a FPS preset — 6 (dreamy), 8 (hand-drawn), 12 (standard), 24 (smooth). FrameSketch calculates the exact frame count and grid layout automatically.
Tip: For rotoscoping, 8–12 fps gives the most satisfying hand-drawn feel. 6 fps works beautifully for minimal, gestural animation.
③ CONTACT SHEET
🟠
Color stripThe thin bar above the grid shows the average color of every frame. Dots mark frames that have drawings. Tap any color chip to jump to that frame in draw mode.
Bento layoutToggle between uniform grid and bento layout where key frames get larger cells (wide or tall), making the sheet more visually dynamic. Great for printing.
🕐
TimecodesToggle timecode labels on/off on each frame cell.
💾
Save PNGExports the full contact sheet including drawings and the color strip as a high-resolution PNG. Includes film perforations and metadata header.
④ DRAW
✏️
Apple Pencil drawingPressure-sensitive strokes — press harder for thicker lines. The brush size slider sets the base weight.
🎞
Augment vs RotoscopeToggle the 🎞 button to switch modes per frame. Augment = film frame fully visible, drawing on top — both appear in the animation. Rotoscope = film frame dimmed to 20%, only your drawing plays back.
🧅
Onion skinningShows the previous frame's drawing (and image if in rotoscope mode) as a ghost behind your current canvas. Essential for smooth movement between frames.
Undo / RedoUp to 20 steps per frame. Also triggered by a two-finger tap anywhere on the drawing area.
🔍
Pinch to zoomUse two fingers to zoom in up to 8× for fine detail work. Drag with two fingers to pan. Pen/Pencil always draws — only fingers zoom. Tap ⊙ to reset to 100%.
‹ ›
Frame navigationThe ‹ › arrows step through frames without leaving draw mode. Your drawing on the current frame is committed automatically before moving.
Pro tip: Use onion skin in rotoscope mode to trace movement while hiding the cluttered original frame beneath.
⑤ ANIMATE
PlaybackTap play to start the animation. Drag the FPS slider (1–30fps) to speed up or slow down in real time.
→↔←
Loop modes→ Forward loops normally. ↔ Ping-pong plays forward then backward — perfect for breathing, bouncing, or cyclic motion. ← Reverse plays backward.
🎞+✏️
Film + Draw vs Draw OnlySwitch between composited playback and drawing-only (rotoscope) playback globally. Overrides per-frame draw mode settings for previewing.
×2
Per-frame holdsTap any thumbnail in the filmstrip to cycle that frame's hold time: ×1 → ×2 → ×4. Held frames show a badge. Use this for freeze frames, emphasis, or syncing to a beat.
Export WebMRecords the animation to a .webm video file at the current FPS and mode settings. Hold values and loop direction are baked in. Open in any video editor or share directly.
TIPS & IDEAS
💡
Short segments work best for animationA 3-second clip at 12fps = 36 frames — enough for a complete gesture or expression. Use the Animation Duration mode so the frame count is calculated for you.
🖨
Print and draw on paperSave the contact sheet PNG, print it, draw on the paper with pen, then photograph it back in — the original idea behind FrameSketch's physical-to-digital loop.
🎨
Mix modes per frameSome frames can be Augment (film shows through) and others Rotoscope (pure drawing). This creates interesting contrast between documentary and animated moments.
🎵
Sync to audioThe waveform on the timeline helps you select a segment that starts or ends on a beat. Use per-frame holds in the animate view to fine-tune timing.
FrameSketch · Self-contained HTML · No server needed · Works offline on iPad