Case files

Real-time 3D, hand-drawn canvas animation, and the full-stack product behind them. Every moving piece below is custom code we wrote, and every technique is one we can build for you.

1760 Strategic AIthree.js scenes, GLSL, a Canvas 2D ink system.
StakksA Next.js site, and the full-stack app behind it.

1760 Strategic AI

A site for an AI strategy firm where nearly every image is code. The 3D scenes run through a custom shader pass so they read as gouache paintings, not CG. The diagrams, portraits and illustrations come from one Canvas 2D ink system that draws them by hand, in the browser, every time.

Role: Design, 3D, front-end build
Built with: three.js, custom GLSL, Canvas 2D, React, GSAP, Vite
Live: 1760strategic.ai

Drag the gem. It's a live three.js model running on this page, the same mark that floats over the 1760 hero.

A painted world in real time. The ridges are silhouette shaders on stacked planes, hazed with distance. The lake mirrors the sky, the hills and the gem. Each frame then passes through a finishing shader that adds brush-edge warp, pigment and paper grain. You can drag the gem to spin it, and clicking the water sends a ripple across the lake.

Ink loops instead of icons. Each service card runs a small Canvas 2D scene in one shared style. Hairlines ink in along their length, and gold appears only where the work lands. The canvases pause offscreen, and each one has a still frame for visitors who turn motion off.

Generative diagrams. The discovery map scatters new points every cycle, so the loop never plays the same way twice. Three scenes share one connecting line.

Keep scrolling. The gem splits along its cuts, the same way the 1760 ownership scene opens it.

Scroll-driven 3D. As you scroll, the gem parts into four facets, each drifting toward its label. The scene writes CSS variables every frame, so the HTML labels follow the 3D pieces without React re-rendering.

Toon shading with ink outlines. A three.js scene of three characters on a choreographed 10-second loop: a gold lead passes around the table and rises into the gem. It has its own render setup, because toon materials need colour output the painterly pass would wash out. Each frame costs about half a millisecond of JavaScript.

From photo to pen strokes. A Python script traces each portrait into ordered pen strokes. The canvas replays them as a reveal mask, from the shoulders in to the face, then lays a wash in broad brush passes and hands over to a plain image.

Hand lettering, in code. Each digit is a handful of control points smoothed with Catmull-Rom splines and inked over time. The same pen line keeps going and draws a street of shops, whose windows light one by one. It starts when it scrolls into view.

One component, every page. This before-and-after diptych is a single parametric vignette that draws itself from each service's data, so every service page gets its own illustration from the same code.

A sketch that straightens. A wobbly pen sketch of a dashboard draws itself on a tilted sheet. Then every line straightens into the finished layout and gold marks each headline number, with fresh wobble on every cycle. On phones and in browsers without WebGL, the same ink system draws a 2D stand-in for the customers page's 3D scene.

Stakks

A Next.js marketing site for a royalty accounting app. The design is a bento grid of rounded, colour-blocked cards and line-art characters. The illustrations move with CSS keyframes rather than video or GIFs, so the page stays light.

Role: Design, front-end build
Built with: Next.js, CSS keyframe animation
Live: stakks.ai

847 transactions reconciled
$26,210 artist payable, one pass
17 sec start to finish

Every sheet is a statement. Click the stack to knock it over.

Type-led hero. One heavy wordmark and one line on a paper card, so there's no hero image to wait for. The bento grid it sits in carries the rest of the page.

Line art that boils. Each step pairs a colour-blocked illustration with a spec card. The drawings wobble slightly on a CSS keyframe loop, the way hand-drawn animation does, without any JavaScript.

Rhythm through contrast. Light, dark and colour cards alternate, so a long page reads in beats rather than as one scroll of text.

Numbers that count up. The proof figures count up as the panel enters view, on a full-bleed colour field.

The app

Behind the site is the product itself: a multi-tenant royalty ledger. A label drops in its distributor exports, the app reconciles every row to the cent, and statements go out the same day.

Role: Product design, full-stack engineering
Built with: Next.js, TypeScript, Postgres (Supabase), Claude API
Status: In beta with record labels

134 API routes
55 database migrations
379 test files
147k lines of TypeScript

The front door. The app's own landing page shows a distributor file turning into a statement, row by row, ending on the label's net.

Send a file through the pipeline. These are the formats it reads, and what the real code decides at each step.

Upload to dashboard. 3,470 rows read, classified, mapped, resolved and written in a few seconds. Every step leaves a timeline entry, so a label can see exactly what happened to its file.

It adds up. The file's net total and the dashboard agree to the cent: $13,487.67, across 6 artists, 8 releases and one compilation the app detected on its own.

Compilations, split fairly. A various-artists release is split track by track, and each contributing artist gets their share.

Statements in one click. Fourteen artist and release statements generated in 58 ms, held as a draft run until someone locks it.

A royalty statement for the artist Mara Vell, listing income by category and revenue by release. — **What the artist gets.** Income by category, then every release with its revenue, costs, recoup status and amount owed.

The app clips are recorded on a fictional label. Every artist, release and amount in them is made up.

Yours next?

Want a site that moves like this? Tell us what you're building. Four questions, two minutes. Or read how we work on 3D and WebGL websites and AI automation.

Start a project Back to the rain