Three good interactive explainers – Unsung
Interactive explainers are one of my favourite things about the web: people passionate about things introduce them to others, for free, with care, and often using some interesting interactive or educational approaches in the process.
I picked a few I particularly liked for this post. These aren’t just explaining things useful to know as a designer, but also themselves contain inspiring/unique interactive moments worth knowing about:
1.
Curves and Surfaces, Bartosz Ciechanowski
Every example has draggable points, but it also pops up an undo button once you start messing around, so you can feel safe experimenting:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/1.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/1.1600w.mp4" type="video/mp4">
Specific ideas and definitions are color coded between text and the interactive pieces:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/2.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/2.1600w.mp4" type="video/mp4">
For complex three-dimensional shapes, you can simply rotate them around to orient yourself better:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/3.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/3.1600w.mp4" type="video/mp4">
I liked this trick of claiming something is impossible, but leaving a door open to try it anyway – I bet it will get some people more engaged, in the “but I’m sure I can lick my elbow” sense:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/4.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/4.1600w.mp4" type="video/mp4">
2.
ASCII Characters Are Not Pixels, Alex Harri
I think the traditional “drag a divider to swap between two representations” interaction is actually kind of bad, but this essay subverts it by allowing you to toggle between representation A, representation B, or both side by side:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/5.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/5.1600w.mp4" type="video/mp4">
A button to copy code to clipboard is always appreciated:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/6.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/6.1600w.mp4" type="video/mp4">
I don’t know, I liked these minimalistic sliders:
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/7.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/7.1600w.mp4" type="video/mp4">
3.
Tab Roving, Niklas Gadermann
It’s hard to know what to do with complex interactivity, for example a specific sequence of keystrokes… let alone the fact that mobile phones don’t have easily accessible arrow or Tab keys. Here, a brilliant solution: not just on-screen soft keys, but also automatic playback!
= 2x) and (width >= 700px)" src="_media/three-good-interactive-explainers/8.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/three-good-interactive-explainers/8.1600w.mp4" type="video/mp4">
Also, kudos to all three creators for their explainers working equally well on phones as they do on desktop computers.
Jun 2, 2026above and beyond 15 interface design 79 web 17
Subscribe via<br>RSS feed or
© Marcin Wichary / Mastodon / Bluesky / Email