User Guide · Version 7

Turn social media screenshots into animated videos.

Rebuild X (Twitter) and Truth Social posts as typewriter animations or highlighter sweeps. Drop a screenshot — the tool handles the rest. This walkthrough covers everything.

Open the tool Read the guide
Chapter 1

Getting started


PostCast Video Tool runs entirely in your browser — no installation, no uploads to our servers. Everything happens client-side: OCR, video encoding, watermarking, all of it. Your screenshots never leave your device.

The interface has two halves: a control panel on the left (where you configure the rebuilt post — text, header, footer, typography, positioning) and a preview stage on the right (where the rebuilt post renders in real time). Whatever you see in the preview is what gets recorded, pixel for pixel.

The tool supports two animation modes: Typewriter (text types in character by character, with optional keyboard sound) and Highlighter (text appears immediately, then specific passages get a marker-pen sweep). Pick your mode first — all other settings follow from that choice.

Chapter 2

The 9-step workflow


From dropping a screenshot to exporting a polished video. Every step you'll actually need, in the order you'll actually do them.

1

Pick platform and animation mode

Top of the control panel: choose X (Twitter) or Truth Social — affects the default color scheme and footer layout. Then pick Typewriter or Highlighter mode.

2

Drop the screenshot — text, header, and footer all extracted at once

Drop any social media screenshot onto the OCR box. Three things happen in parallel: Tesseract.js extracts the body text, the tool crops the top strip (avatar + name + handle) into the header slot, and the bottom strip (engagement stats + timestamp) gets cropped into the footer slot. One drop. No manual cropping.

Both auto-extractions are opt-in. Just below the OCR box you'll see two checkboxes — Auto-extract header on drop and Auto-extract footer on drop — both on by default. Uncheck either to skip that extraction when you want to compose that part of the frame yourself.

Import
Drop screenshot to scan
OCR text + auto-extract header & footer
Paste from clipboard
Copy post text, then paste
my code works and i have no idea why
my code doesn't work and i have no idea why
these are the two states of software engineering
3

Fine-tune the auto-extracted strips

The default strip heights are 18% for the header and 15% for the footer of the screenshot height. These capture the right zones on X, Truth Social, Instagram, and most other platforms. If either auto-crop cuts too tight or wide, adjust its strip % slider and click Re-extract. The tool re-crops the last-dropped file at the new percentage without re-running OCR.

4

Pick your header and footer source

In the Footer & header section you'll find two picker rows — one for the header, one for the footer — listing the candidate sources available.

Header source — two options:

  • Auto-extracted — the strip cropped from the screenshot. Preserves the platform's original styling.
  • Custom / rebuilt — an image you dropped into the Drop header image zone.

Footer source — three options:

  • Auto-extracted image — the bottom strip as cropped. Most faithful to the original.
  • Rebuilt text · auto-fill from OCR — OCRs the strip, parses the number patterns, populates the Reposts / Likes / Date fields. Renders with your typography.
  • Rebuilt text · manual — displays whatever you type in the fields, no OCR.
Footer & header
Auto-extracted Custom / rebuilt
Auto-extracted image Rebuilt · OCR Rebuilt · manual
1,284
23.8K
Apr 20, 2026
5

Choose the post frame shape

Under Post frame shape, pick one of four options:

  • Automatic (fit content) — width derived from the text. Short posts → squat frames. Long posts → tall portrait frames. Recommended default.
  • Landscape — classic 16:9-ish width (up to 1080px desktop).
  • Portrait — narrower width for vertical social posts.
  • Square — balanced width for Instagram-style layouts.
6

Tune typography, highlights, and positioning

Every positioning slider has a live numeric readout next to its label and [−]/[+] stepper buttons flanking the slider for 1-unit precision. This turns drag-and-approximate into click-and-nudge.

In the Animation section, adjust:

  • Type speed and Key volume for typewriter mode
  • Keyboard sound — Classic, Mechanical, Soft laptop, or Typebar
  • Text size (10–44 px)
  • Line spacing (1.2–3.0× the font size)
  • Highlight height — band thickness as % of the line box (20–95%)
  • Highlight position — vertical center of the band within each line (25–85%)
7

Toggle Grid on for precise alignment

Tap the Grid off / Grid on button in the stage toolbar. A pink grid overlays the post frame with 40-px fine lines and 200-px major lines, plus a teal vertical center line. The grid is design-only — it's stripped from the capture clone and never appears in recordings.

8

Press Fit before arming the recorder

This is the most important step. The recorder captures the post frame at its native pixel dimensions. If you've zoomed in or out, the output dimensions change with it. Tap the Fit button next to the Frame zoom slider — it fits both width and height to your viewport so the whole post is visible and the recording matches what you see.

9

Arm the recorder, then press Play

Click Start recording only. The recorder arms but waits for you to press Play — the animation captures from frame zero. When the animation finishes, click Stop recording and your download link appears.

Pro tip: For WebM output in Firefox, the tool includes an optional WebM → MP4 transcode step using ffmpeg.wasm. It takes about real-time (a 30s animation → ~30s transcode on a modern laptop). The first transcode loads the ffmpeg library (~25 MB); subsequent transcodes are instant.
Chapter 3

Audio & format notes


The keyboard sound in Typewriter mode is baked into the video file — it's not a separate track. That means the audio you hear during preview is exactly what ends up in the exported file.

On Chromium browsers (Chrome, Edge, Opera, Brave), the tool can record directly to MP4 with H.264 video and AAC audio — the most compatible format for downstream editing tools, social media uploads, and messaging apps.

On Firefox, the browser's MediaRecorder doesn't support H.264 encoding natively. The tool records to WebM (VP9 video + Opus audio) instead. If you need MP4, pick the WebM → MP4 transcode format option and the tool will convert via ffmpeg.wasm. The resulting MP4 is identical quality and plays everywhere.

On Safari, MediaRecorder support is partial; WebM recording works but transcode reliability varies. For best results on Safari, export as WebM and convert separately if needed.

Chapter 4

Highlighter mode


Highlighter mode shows the full post text immediately, then draws a colored band sweeping across specific passages — like using a marker pen to underline a key phrase. It's ideal for commentary videos where you're responding to a specific claim or quote in a larger post.

To use highlighter mode:

The default highlight is a semi-transparent yellow (#fff08a at 85% opacity) which reads as classic "marker on paper." But you can pick any color — teal, pink, green — to match your brand.

Chapter 5

Mobile use


The tool is responsive and works on phones (iOS Safari and Android Chrome both verified). On mobile, the control panel starts collapsed so the post preview is immediately visible — tap the button to expand the controls.

On narrow screens, the [−]/[+] slider stepper buttons hide to give touch-sized slider tracks priority. The numeric readout stays visible so you always see your exact value. Every other control works the same as on desktop.

Mobile recording caveat: iOS Safari's MediaRecorder support is more limited than desktop. Recording works, but certain high-bitrate combinations can produce 0-byte files. If you hit this, drop to 1× or 2× capture quality and try again. The tool's auto-clamp detection will warn you in the console when this happens.

Chapter 6

Troubleshooting


Recording produces an empty or black video.

Tap Fit before starting the recording. If the post frame is scrolled out of view or zoomed to zero, the capture will be empty. Also ensure you tapped Play after Start recording — the recorder runs independently of playback and waits for you.

The recording has no sound.

The keyboard sound is included only in WebM and in WebM → MP4 transcode. If you chose native MP4 and your browser doesn't mux audio (Firefox especially), the video track is captured but audio is dropped. Switch to WebM or the transcode option.

Exported file is 0 bytes at high capture quality.

The MediaRecorder encoder has a hard limit around 4096 pixels per axis. Very large posts at 4× or higher can exceed this, producing an empty file. The tool auto-clamps the quality multiplier — you'll see a console message like "auto-clamped from 4× to 3× to stay within browser limits." If you want higher true resolution, reduce the text size or switch to Landscape mode.

OCR fails with a Worker error.

Tesseract.js requires Web Workers, which sandboxed iframes sometimes block. Download the HTML file and open it directly, or use the Paste from clipboard option and type the text manually.

Auto-extracted header includes extra chrome (browser tabs, status bar).

The default 18% strip is a compromise. For screenshots with extra chrome at the top, reduce the Auto-header strip % to 10–14 and click Re-extract. For tightly cropped screenshots, 14–16% works well.

The Footer source shows "Rebuilt · OCR" but the numbers are wrong.

The OCR auto-fill uses regex to find number+label patterns like "1,284 Reposts". It can miss unusual formats (millions like "2.3M"), localized labels, or low-resolution footers. When it misses, the fields stay unchanged — edit them manually. Or switch Footer source to Auto-extracted image to show the cropped strip as-is.

My rebuilt post frame doesn't have a header or footer at all.

Check the Header and Footer source pickers. If either is set to Auto-extracted but nothing was ever extracted (auto-extract was off when you dropped, or you haven't dropped a screenshot yet), that section renders empty. Either switch the picker to the manual source, drop a screenshot with auto-extract enabled, or upload a custom header image.

MP4 transcode takes forever.

ffmpeg.wasm loads ~25 MB on first use — that's a one-time cost. Subsequent transcodes are fast. The transcode itself runs at roughly real-time, so a 30-second animation transcodes in about 30 seconds.