The brief: the artist asked for a logo, a white page, and the latest art in the middle. Nothing else earned a place.
What I built: a one-page canvas gallery where each work dissolves into the next, pixel by pixel, in the art's own grammar.
The proof: live on Vercel, a 74-capture cross-device matrix, zero 404s in the live QA pass.
the assignment
“Logo, white page, latest art in the middle. The simpler, the cleaner, the better. Art can take as much space as it can.”
8bitfiction is melancholic flash fiction set inside 8-bit pixel collages. The fiction is baked into the images, so the site could add no captions and no text overlays, ever. The page's only job was to hold the art and get out of the way.
Before this brief there was a much bigger concept: a drifting archive built on 60 pieces pulled from the artist's Instagram, an infinite camera flight through a depth field of cards, glitch interludes, a ticker of first lines. It was elaborate and it was wrong for him. When Patrick became a real stakeholder his one sentence replaced all of it, and the scope locked to the newest drop only: 13 works, no CMS, no back-catalog. I redeploy when new art ships.
Three direction mockups went to the pick: a plain white gallery, a pixel-dissolve concept, and a feed-style layout. All three were QA'd headless before the choice. The pixel-dissolve direction won, paired with an edge peek for the set.
decision one
A default CSS fade smooths the edges the whole practice is about. So the transition is drawn on canvas instead: one piece resolves into the next as individual pixels, the same grammar the artist works in.
The canvas route is more work and more fragile than a CSS fade. Canvas rendering behaves differently across devices, so the effect that looked right on a laptop had to be checked against a full capture matrix before the claim could be made. That verification pass is decision four below. The trade was accepted because the fade quietly contradicts the art it presents, and for a pixel artist the moment between works is part of the show.
decision two
Only the portrait series is a set; every wide piece stands alone. So set chrome itself carries meaning: if you see dots and an edge peek, you are inside a set. Standalone works show zero chrome.
decision three
Patrick sets his fiction captions in System, the defunct Windows 3.x raster face. The site's two labels are rendered in that exact font, rebuilt glyph by glyph, so even the interface text belongs to the work.
Modern text stacks silently substitute raster fonts, so the glyphs had to come from raw GDI: create the System font, render each character to a bitmap, and read the pixels back. Row lengths use the true advances with bearings. Only the characters the two labels need shipped, the letters of “next work” and “instagram” plus a down arrow, which the raster font never had, so it was drawn by hand to match the System weight. The labels keep real anchor elements and aria-labels underneath; the pixels use currentColor so hover styles still work.
decision four
Canvas effects lie on the machine they were built on. Before calling it done, the build ran a full cross-device matrix: iPhone SE and 14 Pro in both orientations, Pixel 7, iPad both ways, and flat widths from 1280 to 2560, on both the Chromium and WebKit engines.
this page, same rules
White ground, near-black ink, square dots, mono text. The site's own gray labels sit below contrast thresholds, so this page darkens them; every text pair here measures AAA.
| Pair | Ratio | Grade |
|---|---|---|
| Ink on white | 18.88:1 | AAA |
| Muted text on white | 7.46:1 | AAA |
| White on the dark bands | 18.88:1 | AAA |
| Muted text on the dark bands | 9.21:1 | AAA |
where it stands
works on the page: one 9-piece portrait set, 4 standalone wides
captures in the cross-device matrix behind the "it works everywhere" claim
a single tight gallery, no navigation to get lost in
the pixel grid the wordmark was reverse-engineered to
System-font glyphs extracted and re-encoded as pixel grids
captions added to the art, per the hardest rule in the brief
The dissolve runs a fixed duration, so a dense piece and a sparse one resolve in the same beat even though the eye needs longer on the busy one. The fix I would ship next ties transition length to the visual complexity of the outgoing frame. Also still open: the hero ordering assumes newest first and is not yet confirmed with Patrick, and the planned move from the hand-built bundle to a proper static build has not happened. The art and the 8bitfiction name are the artist's; this is client work, not mine to relicense.
The strongest design system on this project was one sentence from the artist. Every later decision, dots over a fraction, no wheel, no captions, a font pulled out of Windows 3, was just that sentence applied again. Restraint is not the absence of decisions; it is more of them.
Maria Angelika Agutayamariaangelika.com · Built solo for 8bitfiction, 2026