DEV Community: hb lai

Building a 100-question Rice Purity Test with Next.js: persona theming + a canvas share card

hb lai — Tue, 23 Jun 2026 16:48:48 +0000

I shipped a small side project last week, a Rice Purity Test, and a couple of the build details turned out more interesting than the quiz itself. Two in particular: making the result screen recolor itself based on your score, and exporting a share card to PNG entirely in the browser. Notes below in case they save someone an hour.

The setup

It's a Next.js 16 app on the App Router, deployed to Cloudflare Workers via OpenNext. The quiz is one client component (an "island") sitting inside otherwise static, server-rendered pages, so the SEO content stays fast and only the interactive part hydrates. 100 checkbox questions; your score is 100 minus whatever you tick.

Persona-adaptive theming

This was the fun part. Instead of one result screen, the page picks a colour identity from your score band and drives everything off a single CSS custom property.

:root { --persona: var(--sage); }      /* high score, reserved */
[data-band="wild"] { --persona: var(--crimson); }  /* low score */

The result component sets a data-band attribute plus the accent colour, and the card background, the borders, even the shadow tint all follow from --persona. No conditional class soup. Ten bands, one variable.

const band = bandForScore(score);   // 0..9
return <section data-band={band.key} style={{ "--persona": band.color }}>...</section>;

Setting a CSS var inline in React like that is underused. You compute a theme value in JS and hand it straight to plain CSS, no styled-components, no re-render storm.

Exporting the share card as a PNG

People want to post their score, so the card has to become an image. I used html-to-image and dynamic-imported it so it never touches the initial bundle:

async function savePng(node) {
  await document.fonts.ready;                 // gotcha #1
  const { toPng } = await import("html-to-image");
  const url = await toPng(node, { pixelRatio: 2, cacheBust: true });  // gotcha #2
  const a = document.createElement("a");
  a.href = url; a.download = "rice-purity-score.png"; a.click();
}

Two things ate that hour. Web fonts must be fully loaded before you rasterize or the card renders in a fallback font, hence await document.fonts.ready. And the default export looks soft on retina, so pixelRatio: 2.

i18n without moving indexed URLs

I added five languages after launch. English stays at the root (unprefixed) so nothing already indexed moves; other locales get a prefix (/es, /pt, and so on). One dictionary file per locale, all matching the same TypeScript Dict shape, and the client quiz reads the dict as plain serializable data. hreflang and canonical both generate from a single LOCALES array, so adding a language is basically: write the dict, append the code, deploy.

If you want to poke at the finished thing, it's live at ricepuritytest.art, and the score-meaning breakdown is where those band colours come from. Happy to get into any of the build details in the comments.

Building a paint-to-hide browser minigame with Next.js and SVG

hb lai — Tue, 16 Jun 2026 03:58:42 +0000

There's a PC party game called Meccha Chameleon where hiders paint their body to match a wall or a crate and freeze, while seekers try to spot them. I got a bit obsessed with the camouflage idea and built two small things around it.

The first is a camo "lab": pick a surface and it hands you the exact colours, a pattern, and a pose. Under the hood it's one inline SVG chameleon whose fills are driven by a per-surface palette. Recolouring an inline SVG with a few variables turned out far simpler than generating images, and each surface is a tiny data object (three hex colours, a pattern, a blend score), so adding one is a one-line change.

The second is an actual playable minigame: a grid of tiles, a few of them hiding a chameleon painted to match its tile, and you tap to find them before the timer runs out. It's all React state, no canvas and no engine, which kept it tiny and instant to load.

It runs as a Next.js app on Cloudflare Workers via OpenNext, a nice combo for a mostly-static site with a couple of client tools: static pages cache at the edge while the interactive bits hydrate on the client.

If you want to poke at it, the Camo Lab is here and the browser game is here. Happy to answer anything about the SVG recolour or the OpenNext setup.

I built a free toolbox for Threads (no login, no watermark)

hb lai — Mon, 08 Jun 2026 03:04:41 +0000

I post on Threads a fair bit, and I kept hitting the same small walls: no way to save a video, no clean screenshot, and reposting from X meant retyping everything. The sites that promised to help were buried in ads or wanted a login for a five-second job.

So I built ThreadsTools, a set of small, single-purpose tools for Threads. Free, no login, no watermark.

What's in it

Download the video, photos, GIF, or audio from any public Threads post
A Threads to MP3 converter that pulls just the audio
A screenshot maker, plus quote-card and mockup generators
Converters that turn an X tweet or a LinkedIn post into a Threads draft

A couple of build notes

The media downloads stream straight from the CDN to the browser, because Meta's CDN blocks server-side fetches anyway. The MP4-to-GIF and MP4-to-MP3 conversions run client-side with ffmpeg.wasm, so nothing gets uploaded. The whole thing runs on Cloudflare Workers, mostly because there are no egress fees, which is what makes a free downloader that streams video affordable to run.

Code and notes: https://github.com/Nora4844/threadstools

Full set of tools: threadstools.app/tools

The 'bad photo' look is back — here's the engineering behind it

hb lai — Sat, 06 Jun 2026 16:46:56 +0000

Every few years a visual style comes back, but this one is funny: it's literally old engineering bugs becoming features. The "2000s digicam" / CCD / disposable-camera look that's everywhere right now is just a stack of old hardware limitations — and you can recreate every one of them in code.

Here's what actually made those photos look "wrong," and how each maps to something you can fake today.

1. Tiny sensors → noise

Early compacts and phone cameras had minuscule sensors. Less light per pixel means more noise — that fine speckled grain in the shadows. Engineers spent ~15 years killing it with bigger sensors and computational denoising. To fake it: add per-pixel luminance noise, weighted toward the shadows.

2. Aggressive compression → blocky softness

Storage was tiny and expensive, so cameras compressed hard. Low-quality JPEG smears fine detail and leaves 8×8 block artifacts. Re-encoding at low quality (or simulating DCT block quantization) gives you that soft, slightly-mushy texture.

3. On-board flash → the flat night look

A bright bulb right next to the lens gives flat, head-on lighting: bright faces, hard shadows, a background that falls to black. Approximate it with a radial highlight near the subject and a steep falloff.

4. Narrow dynamic range → clipped highlights

Old sensors couldn't hold bright and dark at once, so skies blew to white and shadows crushed to black. A tone curve that clips both ends reproduces it.

5. CCD color science → the cool cast

CCD sensors leaned cool, sometimes slightly green. A small channel-mixer / white-balance shift toward cyan-green nails the "CCD" feeling people are nostalgic for.

The fun part: do all five at once and you don't get "a filter" — you get a photo that looks like it remembers something. It reads as a real moment instead of a product shot.

I've been poking at a free in-browser version that does these as one-click presets (iPhone 4, CCD, disposable, Y2K). Everything runs locally on a canvas, nothing uploads: digicamfilter.online. Useful for seeing each effect in isolation before wiring up your own.

Anyway — half of "retro" aesthetics are just old constraints we worked hard to remove, switched back on by choice. Kind of poetic.