Skip to content
Twenty One Media
webSeptember 5, 2026

The Work Grid Had No Images

We audited the live site last week: desktop at 1440px, full scroll, looking for what to improve. The /work page showed six project cards. No images. We assumed the thumbnails were broken or missing.

They weren't missing. The thumbnail field was in every MDX frontmatter file. It was in src/types/index.ts. It compiled clean. TypeScript had no complaint.

WorkGrid.tsx just never rendered it.

A grep for item.thumbnail across the whole src/ directory came back with one hit: the type definition. The component iterated the frontmatter, printed the title, the service badge, the summary. The image field sat there and went nowhere.

This is the failure mode TypeScript can't catch. The type says the field exists. It doesn't say the field is used. A portfolio card that renders without the image it's supposed to show still compiles.

The fix was fifteen lines: a conditional <Image> block inside TiltCard, with a 16:10 aspect wrapper and object-top so the header of each site stays in frame. We recaptured all six client screenshots fresh at 1280x800 the same day. One project had no thumbnail in its frontmatter at all. That was the one truly missing case, and we added it.

The same audit session found a second wired-but-silent bug in a different place.

The stats band had a tile showing "2025 / earliest system still in production." The number is rendered by StatsCounter, which pulls the integer out of a string, starts from zero, and counts up to the target on scroll. A year is just a number to that component, so it animated from 0 to 2025. Partway through that animation, one value it passed through was 1997.

We caught it on a scroll probe of the live production page. "1997" rendered for a fraction of a second on a tile claiming production dates.

The fix is in parseStat inside StatsCounter.tsx: a bare four-digit integer in the range 1900 to 2099 with no prefix or suffix gets flagged as a year and rendered statically. The test verifies it by stubbing the guard to if (false). The test fails when the guard is removed, which means it's testing the actual behavior and not just describing it.

We replaced the tile entirely with "0% churn: every system we've shipped is still running." No year to animate. The root cause stops mattering once the tile is gone, but the guard stays because the same class of bug can appear on any stat that happens to be a four-digit number.

Two bugs. Neither showed up in tsc. Neither showed up in next build. Both were visible to anyone who loaded the page.

Types say what something is. They don't say what it looks like. Rendered output is the only ground truth.