Design
I drew the algorithm, not an icon
The easy way to cover a catalog of lessons is a stock icon per card. I drew a tiny diagram for each instead — the lesson squeezed into one monochrome 320×180 frame with a single label. The social card and the poster-size cover then come for free: the same drawing, rendered bigger.
Open the algorithms catalog and every lesson wears a little hand-drawn picture. The stack card is three cells with a TOP arrow. The hash-table card drops a key into a slot labeled h(k). The bubble-sort card is a row of bars with the two it's about to compare lit up. None of them is an icon. Each one is a drawing of the specific thing that lesson teaches — the lesson, shrunk to 320×180.
The easy version of this is a stock glyph per card: a generic "sorting" mark, a "graph" mark, the set picked off an icon font in an afternoon. Most of the web does exactly that, and for a while I nearly did too. The reason I didn't is the whole post. A thumbnail is the first frame of the lesson a stranger ever sees, and often the only one — on the catalog, in a Google result, pasted cold into a Slack channel. An icon tells them the shelf the lesson sits on. A drawing tells them the idea. Those are different jobs, and only one of them is teaching.
An icon names the shelf, a sketch is the first slide
The line between the two turns out to be small and concrete: real data.
An empty container is a logo. The same container with [5, 3, 8] sitting in its cells is a structure — you can see it's an array, see it holds three values, see which one's about to move. So every cover carries actual values: numbers in the cells, indices under them, a key in the slot. The rule I ended up writing down is that a cover with no data on it isn't finished, it's a placeholder.
On top of the data goes exactly one label. Not a caption explaining the algorithm — one mark pointing at its core idea. The TOP on the stack. The HEAD on the linked list. The h(k) arrow on the hash slot. The lit pair on the sort row that says "this is a comparison." One is the budget. Two crowds a 320×180 box; three turns it back into noise, which is the thing you were trying to escape by not using an icon.
That single label is also doing more work than it looks. Hash probing and hash chaining are nearly the same picture — slots, a key, a hash function — until you watch where the one marker goes. On the probing cover, h(k) points at a slot and the next slot over, because that's the whole story: collision, step forward, try again. On the chaining cover, a little chain hangs off the slot, because that's its whole story. The covers differ by one mark, and that one mark is the difference between the two lessons. The thumbnail isn't a label on the lesson. It's the smallest possible version of it.
One color, on purpose
Here's the part that looks like a mistake until you sit with it: the covers are monochrome, and the lessons they preview are not.
The full animation runs on a whole vocabulary of color — amber for the pair being compared, green for the answer, a faded gray for what's been ruled out, more. I wrote a whole post about getting those colors to mean something precise. And then the cover throws every one of them away. A sketch gets exactly two values: the lesson's accent, and a pale tint of it for fills. That's it. One color.
At 320×180, a second meaningful color isn't richer, it's confetti. The eye reads three or four bright hues in a thumbnail as decoration, not as a system — the very thing the legend post was fighting, except now the enemy is size instead of vagueness. The preview should be calmer than the thing it previews. Semantic color earns its keep at 1920×1080, where a frame has room for amber to mean comparing and green to mean done without them stepping on each other. Shrink that frame to the size of a postage stamp and the colors stop being a language and start being a smear. So the cover speaks in one color and lets the marker carry the meaning, and the rich palette stays where it can actually be read.
The discipline is what makes it free
I built all of this thinking it was a design chore — a little drawing to hand-place for every lesson, a tax on shipping. What I didn't see coming is that the constraints I'd imposed for legibility turned out to be the exact contract that let one drawing become three artifacts.
Each cover is a single React component. StackSketch draws in a logical 320×180 box; a one-line entry in a slug-to-sketch map wires it to the stack lesson. Miss that line and the card quietly falls back to the bare VizLearn logo, which says nothing — so registering the sketch is part of finishing a lesson, not a nicety after it.
Because every sketch obeys the same contract — one color, one marker, real data, and stay inside the safe box (x from 20 to 300, y from 16 to 164, clear of the corner where the card's bookmark and Pro badge sit) — I never designed the social-share image or the poster-size cover at all. They're the same component, told to render bigger.
// the catalog thumbnail
<CardSketch slug={slug} accentColor={c} accentBg={bg} />
// the 1200×630 card a link unfurls into — same sketch, drawn sharper
<CardSketch slug={slug} accentColor={c} accentBg={bg} bitmapScale={8} />The OG image — the picture that appears when you paste a lesson link into a chat — is that second line, dropped onto the lesson's brand tint with the title underneath. A headless browser navigates to a hidden route, screenshots it at 1200×630, and saves the PNG. The poster-size covers are the same move one more time: a 3:4 at 2880×3840 and a 16:9 at 3840×2160, same component, same screenshot, bigger frame. One drawing, three sizes, nothing redrawn. (It's the same shape as collapsing three play buttons into one: name the contract once, and the thing answers at any size you ask.)
The one bug worth keeping as a souvenir: the first OG layout stretched the sketch to fill the whole 1200×630 rectangle. On a sort row you couldn't tell. On the MNIST digit lesson, whose cover is a grid of pixels, the squares sheared into parallelograms — obviously, embarrassingly wrong, the way only a square drawn un-square can be. The fix was to pin the sketch to its native 16:9 and center it on the tint. The locked aspect ratio is the kind of rule you don't know you depend on until you break it in public.
So the rules read like fussiness in a style guide — monochrome, real data, one marker, the safe box, the locked ratio — and every one of them is also a load-bearing reason a 320×180 doodle survives being blown up to a poster without falling apart.
The cover is a deliverable
A lesson isn't done when the animation plays. It's done when there's a sketch in the map, the OG image is regenerated, and a stranger who'll never press play still sees the idea.
The post you're reading got the same treatment. The drawing up top isn't a generic mark — it's its own little sketch, hand-laid like the rest, because falling back to a stock bar chart on a post about refusing to fall back to stock art would be its own small lie. Covers are the cheapest place to teach and the easiest place to phone it in, and a product that takes its animations seriously can't quietly skip the frame everyone sees first.
See it: open the algorithms catalog and read the covers before you open anything. The TOP on the stack, the h(k) on the hash slot, the half a sorted array already ruled out — each one is the lesson, before the lesson.