DEV Community: Deeraf

Explain Your Tech Like a Stickman: Short Explainer Videos for Devs and DevRel

Deeraf — Sat, 07 Nov 2026 16:04:13 +0000

Some of the best explanations of technical ideas aren't in docs. They're in a two-minute video where a stick figure mails a letter to explain how packets travel, or two characters fight over the last slice of pizza to explain a race condition.

If you write docs, do developer relations, teach, or just want to share what you know, short explainer videos are worth adding to your toolkit. And the stickman style is one of the easiest ways to make them.

Real frames from AI-generated stickman Shorts. Notice how little detail each scene needs. Source: sticktale.com

Why stick figures work for technical topics

Analogies need characters. Most good technical explanations are analogies: a waiter for an API, a librarian for an index, a bouncer for a firewall. A stick figure can play any of those roles.
Less visual noise. Detailed animation competes with the concept. Simple drawings leave the viewer's brain free for the idea.
Fast to update. Tech changes. A simple style is cheap to remake when your API or best practice changes.
Works without a face. Not every developer wants to be on camera.

Topics that work well

Concepts that involve actors doing things translate best:

How DNS resolution works (someone asking for directions)
Race conditions and locks (two people, one bathroom key)
Caching (keeping snacks on your desk instead of walking to the kitchen)
OAuth (a valet key for your car)
Load balancing (a host seating guests across waiters)
Public-key cryptography (a padlock anyone can close but only you can open)
Git branches (parallel timelines)

Concepts that are mostly syntax (how to write a for loop) are better served by screen recordings.

A script template for technical explainers

This structure works for 45-second Shorts and five-minute videos alike:

Hook with the pain. Start with the problem, not the definition. "Your site loads in 50 ms for you and 8 seconds for users in Sydney. Here's why."
Introduce the analogy. "Imagine the internet is a postal system."
Walk through the steps with the character. One step per scene. Each scene should change the picture.
The twist or gotcha. The thing beginners get wrong. "But the letter doesn't go straight there. It hops through a dozen post offices."
Map the analogy back to the real thing. Briefly name the actual technical terms (resolver, TTL, CDN) now that the viewer has a mental model.
Payoff. Return to the opening pain and resolve it. "That's why a CDN puts a copy of your site in Sydney."

Accuracy still matters

Developers love correcting videos in the comments. Before you publish:

Have someone who knows the topic review the script.
Watch out for analogies that break in important ways, and say where they break if it matters.
Link to real docs in the description for people who want depth.

Where to use them

README and docs: embed a short explainer at the top of a concept page.
Release notes: explain a new feature's why in 60 seconds.
Onboarding: give new team members a series of short videos on your architecture.
YouTube Shorts and LinkedIn: short concept videos are great for developer audiences scrolling between meetings.

Making them quickly

You can draw scenes yourself in Excalidraw and record a voiceover, which works well but takes time per video. For faster production, AI tools now handle most of the pipeline. I use StickTale, an AI stickman video generator: give it a question like "How does DNS work?" and it researches the topic, writes a script with this hook-to-payoff shape, draws each scene with a consistent character, and adds narration and captions.

You can then rewrite any line or redraw any scene before exporting, which is where your technical review comes in.

Try one

Pick the concept you've explained most often in code reviews or Slack threads. Write the hook as the pain it causes, pick an analogy, and make a 60-second version. It'll probably get more views than the doc page it summarizes.

From GPX File to Animated Route Video: A Practical Guide

Deeraf — Sat, 07 Nov 2026 15:59:31 +0000

If you've ever recorded a run, a bike ride, or a road trip, you have a GPX file somewhere. And if you've tried to turn it into a nice animated map for a video, a talk, or a blog post, you've probably found that raw GPS data is messier than it looks.

This guide covers the data side: getting a clean, light, privacy-safe track that animates smoothly. It's useful whether you animate with code (MapLibre, deck.gl) or a dedicated tool.

The goal: clean routes and regions that animate smoothly. Examples from the Mapimator showcase.

1. Get the GPX

Most apps let you export a GPX file:

Strava: open an activity, use the "..." menu, then "Export GPX".
Garmin Connect: activity, gear icon, "Export to GPX".
Komoot: open a tour and download it as GPX.
Google My Maps: export a layer as KML/KMZ (you can convert it to GeoJSON, see below).

GPX is just XML: tracks (trk) made of segments (trkseg) made of points (trkpt) with latitude, longitude, elevation, and time.

2. Convert to GeoJSON

Most web mapping libraries prefer GeoJSON. Two easy options:

Command line with GDAL:

ogr2ogr -f GeoJSON route.geojson ride.gpx tracks

The last argument is the layer name. GPX files expose tracks, track_points, routes, and waypoints layers. You usually want tracks.

In JavaScript with @tmcw/togeojson:

import { gpx } from '@tmcw/togeojson';

const xml = new DOMParser().parseFromString(gpxText, 'text/xml');
const geojson = gpx(xml);

3. Simplify the line

A one-hour ride recorded every second is 3,600 points. Animating every one of them is wasteful, and GPS jitter makes the line look shaky when you zoom in.

Simplification removes points that don't change the shape much:

npx mapshaper route.geojson -simplify 10% -o route-simple.geojson

Or with Turf.js:

import simplify from '@turf/simplify';

const simple = simplify(geojson, { tolerance: 0.0001, highQuality: true });

Tolerance is in degrees, so 0.0001 is roughly 10 m. Start there and adjust visually. For a continent-scale flight path you can go much higher; for a hiking trail at street level, keep it low.

4. Remove GPS noise

Common problems in raw tracks:

Spikes: a single point that jumps hundreds of meters away. Filter points whose implied speed between neighbors is unrealistic for the activity.
Stationary clusters: a cloud of points where you stopped for coffee. Simplification usually cleans these up, or you can drop consecutive points closer than a few meters apart.
Multiple segments: pausing the recording creates separate trkseg elements, which become a MultiLineString. Merge them if you want one continuous animated line.

5. Trim the start and end for privacy

This step is easy to forget. Most tracks begin and end at home. Before publishing a route anywhere, cut the first and last few hundred meters:

import length from '@turf/length';
import lineSliceAlong from '@turf/line-slice-along';

const km = length(line, { units: 'kilometers' });
const trimmed = lineSliceAlong(line, 0.5, km - 0.5, { units: 'kilometers' });

That removes 500 m from each end. Viewers still see the journey, without your front door.

6. Animate it

Now the line is ready. Your options:

Code it yourself. In MapLibre GL JS, the common approach is to add the line as a GeoJSON source and grow it over time by slicing it with lineSliceAlong on each animation frame, while moving the camera with map.easeTo or map.flyTo. Recording the output as a video file is the hard part: you'll need to capture frames at a fixed time step rather than in real time, or the result will stutter.

Use a tool. If you just need the video, a dedicated map animation tool saves a lot of work. I use Mapimator, which runs in the browser, imports GPX, KML, and GeoJSON directly, handles camera moves and route drawing, and exports MP4 for YouTube or vertical formats for Shorts and TikTok.

Either way, the cleaning steps above matter: a simplified, trimmed track animates more smoothly and looks more deliberate on screen.

Quick checklist

[ ] Exported GPX from your app
[ ] Converted to GeoJSON (tracks layer)
[ ] Simplified to a sensible tolerance
[ ] Removed spikes and merged segments
[ ] Trimmed start and end for privacy
[ ] Previewed at the zoom level you'll actually use

Clean data in, nice map out.

How to Make a Text Message Story Video That People Watch to the End

Deeraf — Sat, 07 Nov 2026 15:58:31 +0000

Scroll TikTok, Reels, or YouTube Shorts for five minutes and you'll hit one: a phone screen, a chat thread, and messages popping in one by one while you wait to see how it ends. Text message story videos are one of the most reliable faceless formats on short-form video. They need no camera, no actors, and no editing skills, and the best ones keep viewers watching to the last second.

Making one that works, though, is mostly about writing and pacing. Here's the full process, from premise to export.

1. Start with a premise that fits in one sentence

The best chat stories can be pitched in a single line, and that line usually holds tension or a reveal:

"A guy texts his ex by accident, and her new boyfriend replies."
"A mom joins the family group chat and immediately exposes everyone."
"Someone gets a text from their own number."

If you can't say what's at stake in one sentence, the viewer won't feel it in the first three seconds either.

2. Write the hook as the very first message

There's no intro in a chat video. The opening bubble is the hook, so make it something no one could scroll past:

Unknown: don't open the door
Unknown: I'm serious. whoever's knocking isn't me

Skip greetings, "hey"s, and small talk. Start in the middle of the situation.

3. Keep messages short and the rhythm uneven

Real texting is bursty, and that rhythm is what makes these videos feel alive:

One thought per bubble. Split long messages into two or three quick ones.
Vary the pacing. Rapid-fire exchanges during arguments, a long pause before a big reveal.
Use the typing indicator. Three dots that appear, vanish, and come back create suspense better than any line of text.
Leave things unsaid. "…" or a read receipt with no reply often hits harder than a paragraph.

4. Build to a twist, then end fast

Most successful chat stories follow a simple arc: hook, escalation, twist, punchline. Once the twist lands, end the video within a message or two. Lingering after the payoff is where viewers swipe away, and an abrupt ending also encourages rewatches, which the algorithms reward.

5. Make it look like a real phone

Viewers stay immersed when the chat looks like the app they use every day. Pay attention to:

The right platform style: iMessage blue and grey bubbles, WhatsApp green with ticks, or Instagram DMs, in light or dark mode to match the mood.
Contact names and profile pictures that fit the characters.
Realistic details: read receipts, timestamps, emoji reactions, quoted replies, voice notes, and photo messages.
Group chats with named members for chaotic, multi-character stories.

Platform-faithful iMessage, WhatsApp and Instagram DM styles. Source: chatimator.com

6. Add sound and a typing keyboard

Sound does a lot of quiet work. Message send and receive pings give each bubble a beat, and a keyboard typing out outgoing messages, typos and all, makes the viewer feel like they're holding the phone. Add a low background track for mood, and keep it quiet enough that the pings stay crisp.

7. Export for each platform

TikTok, Reels, Shorts: 9:16 vertical at 1080p. Keep the chat in the center so platform buttons and captions don't cover it.
YouTube long-form compilations: 16:9 with a background behind the phone frame.
Length: 30 to 60 seconds is the sweet spot for most text stories. Longer only works if the tension keeps rising.

8. Tools to speed it up

You can build chat videos by screen-recording a real phone, but that's slow to edit and risky if a real notification pops up. Video editors like CapCut can fake it with templates, but timing every bubble by hand gets tedious. A dedicated tool is much faster. I use Chatimator, a fake text message video maker that runs in the browser. You write the conversation (or have AI draft a script from a one-line premise and edit it), choose iMessage, WhatsApp, or Instagram styling, add typing and sounds, and export an MP4 ready for upload.

Writing a chat script with a live preview in Chatimator

9. Label it as fiction

Text stories work best as clearly fictional entertainment. Say "story" or "fiction" in the caption or description, use invented names, and never use fake chats to impersonate real people, spread rumors, or mislead anyone. Platforms crack down on deceptive content, and audiences are happy to enjoy a good story without believing it happened.

Wrapping up

A great text story video comes down to a one-line premise, a hook in the first bubble, uneven pacing with plenty of suspense, a twist, and a fast ending. Get those right, make the phone look real, and you have a format you can publish daily without ever showing your face.