2026 Collection · 5 sites in production

Sixteen products.
One studio. Zero shortcuts.

A portfolio of production-grade website prototypes — from a real-time fintech dashboard to an NFT auction house — each one fully interactive, hand-coded, and shipped as a single self-contained file.

Browse the work How it's built
0Product prototypes
0Industries covered
0+Interactive modules
0Build steps required

The Collection

5 LIVE · INDEX 01 — 16
/
No projects matchTry a different filter or search term.

How every prototype is built

METHOD
01 /

Design system first

Each product gets its own tokens — palette, type pairing, spacing rhythm and motion curves — so nothing looks like a template. Light theme primary, with a considered dark mode one click away.

02 /

Real data, real interactions

No lorem ipsum, no dead buttons. Carts total correctly, forms validate, charts stream, countdowns tick, and bookings decrement inventory. Every module behaves like the product it imitates.

03 /

Ship as a single file

Every demo is one self-contained HTML file — open it anywhere, no build step, no install. Only battle-tested CDN libraries (Chart.js, Leaflet, Tone.js) are pulled in where they earn their weight.

The stack

TOOLS
CORE

Vanilla HTML · CSS · JS

Custom properties for theming, CSS grid and container-aware layouts, IntersectionObserver reveals, and compositor-friendly animation only — transform, opacity and clip-path.

LIBS

Chart.js · Leaflet · Tone.js

Charting for the fintech dashboard, OpenStreetMap tiles for property search, and a real-time synthesis engine for the artist page — each loaded from a CDN only on the page that needs it.

CRAFT

Accessibility & motion

Semantic landmarks, labelled controls, keyboard-reachable interactions and full prefers-reduced-motion support across all fifteen prototypes.