Skip to content
Available for select work

I buildthe webin motion

Motion-led launch sites and production web applications, from one pair of hands. Shaders, interface engineering and the state machines underneath — designed, built and shipped as code your team owns.

See the workStart a project
  • Three demos you can use
  • One clock, 60 fps budget
  • WCAG 2.2 AA as the floor
The practice
One person, one standard: work that moves with intent — real-time graphics, considered typography and interaction that survives contact with real users. Everything designed here ships as production code.

A practice built
around frame rate

  • 01

    Creative development

    React, WebGL and GLSL. Interfaces that hold frame rate on hardware people actually own, not on the machine they were built on.

  • 02

    Product engineering

    The unglamorous half: state machines, data tables, empty states, keyboard paths, and the error case nobody designed.

  • 03

    Design systems

    Tokens, components and the documentation that keeps a team consistent long after the engagement ends.

Selected work

Four concepts, each answering one question

These are self-initiated builds, not client engagements — each card says which. The interfaces you can operate are one section further down, in the product lab.

01/04
2026 — Concept project

Halcyon Optics

A frame configurator that holds 60fps on a phone, and a quality ladder that steps down before the frame rate does.

02/04
2025 — Interactive concept

Meridian Capital

A market narrative drawn entirely in SVG, so every chart on the page lifts straight into a deck.

03/04
2025 — Internal exploration

Sable & Ash

A scroll-scrubbed launch film that streams its frames instead of downloading them.

04/04
2024 — Internal exploration

Northwind Labs

One token vocabulary, two themes, and not a single `dark:` variant in the component layer.

01 / 04

Case notes

  • A frame configurator built to find the real cost of real-time lighting on a phone: streamed geometry, one draw call per frame, and a quality ladder that steps down before the frame rate does.

    Role
    Art direction, WebGL, front-end
    Stack
    three.js · GLSL · React
    Interaction
    Adaptive DPR tied to a rolling frame-time average

What I do0x64
Live product lab

Three applications, running in the page

Not screenshots, not a video. Each of these is the interface itself at a smaller scale — click through it here, then open the whole thing on its own route.

0x64.site/demos/agent

AI operations interface

Agent Console

A run you can hold: plan, tool calls, an approval gate a human has to pass, then a streamed answer and the artifact it produced.

Sessions
3
Tool calls
9
Artifacts
code · doc · table
Open Agent ConsoleInteractive concept demo · sample data

A run you can hold: plan, tool calls, an approval gate a human has to pass, then a streamed answer and the artifact it produced.

  • Deterministic run machine
  • Pause · resume · cancel
  • Human-in-the-loop approval
Open full demo
Capability engine

Three things this practice builds

Pick one and the whole section reconfigures — the object, the readouts around it and the next step. It is the same argument the rest of the page makes, in a form you can hold.

  • Type scaleOne heading size, page-wide
  • MotionOne idea per section
  • BudgetLCP and CLS, agreed up front

Marketing surface

A launch people finish reading

Editorial typography, one scroll timeline and a motion budget written down before the first commit. Built to convert, measured on the deployed build rather than on a laptop.

See the standards
Services

Three things you can hire me to build

One person, so one project at a time. Pick the one that sounds like yours and the brief form opens with it already selected.

012–6 weeks

Launch sites and brand experiences

The site a product launch deserves, built to convert rather than to win an award on its own.

  • Product launches and campaign sites
  • Interactive storytelling and scroll narratives
  • Motion systems with a written budget
  • Landing pages measured on conversion, not on taste

You are left withA repo, a motion spec and a performance budget your team can hold.

Brief me on this
024–12 weeks

Product and SaaS interfaces

The signed-in half: dashboards, AI surfaces, internal tools and the long tail of states that decide whether people keep using it.

  • Dashboards, analytics and data tables
  • AI and agent interfaces with real run state
  • Customer portals, workflows and admin tools
  • Design systems and component libraries

You are left withTyped components, documented tokens and a recorded walkthrough.

Brief me on this
033–8 weeks

Real-time, 3D and WebGL

When the thing being sold has to be turned over, configured or felt before anyone will believe it.

  • Product configurators and 3D viewers
  • Shaders, particle systems and custom materials
  • Data visualisation and spatial storytelling
  • Bespoke motion systems and scroll choreography

You are left withA GPU budget, a graceful fallback and source you can read.

Brief me on this
Brief to shipped

What happens between the email and the launch

Five stages, one pair of hands. Scroll and the frame gets rebuilt at each one — from the sentences a client sends to the numbers the work is handed over with.

01

The brief

Three paragraphs and a deadline. The first job is to find the one sentence in it that the whole build has to serve, and to write down what will not be built.

Input
Email, deck, a call
Output
Scope, in writing

inbound · re: new site

“We’re launching in eleven weeks and the current site doesn’t explain what we do. It needs to feel like the product feels.”

“There’s a dashboard behind the login too. Same look, ideally.”

“And it has to be fast on a phone.”

The sentence it serves · it needs to feel like the product feels

02

Architecture

Routes, states and the shape of the data before a single pixel. Wireframes exist to argue about hierarchy while it is still cheap to lose that argument.

Decided
Routes and states
Deferred
Everything visual
hero · one claim
proof

03

The system

One type scale, one spacing rhythm, two radius families and a token vocabulary with no theme variants in the components. The system is what makes screen forty as fast to build as screen four.

Tokens
One vocabulary, two themes
Rule
No `dark:` in components
AaAaAaAa
--space: 4 8 12 16 24 32 48 64
--radius: 12px  24px
--ease:   cubic-bezier(.22,1,.36,1)
--motion: 180ms  320ms  560ms

04

The product

Real components against real state — including the loading, empty, error and cancelled cases. This is where most of the time goes, and where most of the quality is decided.

Built
Components, not mockups
Covered
Every state, not the happy path
OverviewLast 30 days

MRR

€184.2k

+6.4%

Active

1,284

+2.1%

Churn

1.7%

-0.4%

LoadingEmptyErrorCancelled

05

Shipped

Measured on the deployed build, on a throttled profile, on hardware people own. Then a handover: readable commits, documented tokens and a recorded walkthrough for whoever inherits it.

Measured
LCP, INP, CLS, bundle
Handed over
Repo, docs, walkthrough
LCP
1.4 s
CLS
0.00
Bundle
Route-split
A11y
WCAG 2.2 AA
  • Repository transferred, history intact
  • Tokens and components documented
  • Decision records for anything non-obvious
  • Walkthrough recorded for the next maintainer

That is the whole path, and it is the same path whether the thing at the end is a launch page or a product with a login.

Start at stage one

Hover, focus or tap a card for the evidence behind the claim

01Performance

Measured, not asserted

02Real-time

Shaders written to a budget

03Choreography

One clock, not five

04Product

The states nobody designs

How it runs

Brief in one end, shipped build out the other

Two to eight weeks, one project at a time. It opens with art direction and a working prototype of the hardest screen, so the risk is spent before the budget is.

See the demosStart a project
  1. 01Direction
  2. 02Prototype
  3. 03Build
  4. 04Handover
Milestone shipped

Fixed price per milestone, quoted from the brief. If scope moves we re-quote the next one and you decide.

Handover pack
  • Typed components, documented tokens
  • Reduced-motion path on every surface
  • A frame budget the team can hold
The standard

Held to the same standard, every engagement

Six commitments that go in the contract rather than the pitch deck. Each one is checkable — which is the only reason to write it down.

Send a briefSee the work
Demo apps you can use
3
Chart or drag libraries
0
Lighthouse, desktop
99
Lighthouse, mobile
93

A performance budget in writing

LCP, INP and bundle ceilings agreed before the first commit and measured on the deployed build, on a throttled connection — not on localhost with a warm cache.

WCAG 2.2 AA as the floor

Keyboard paths through every flow, visible focus, contrast that holds in both themes, and a reduced-motion fallback for every animation on the page — including the ones you are looking at.

Typed from the database to the pixel

Strict TypeScript, schemas validated at the boundary and generated types across the seam. If a field changes shape, the build tells you before a user does.

Real-user metrics from day one

Web Vitals and error reporting wired up in the first week, so performance is a number the team watches rather than an opinion someone defends in a review.

A handover you can act on

Readable commits, documented tokens, decision records for anything non-obvious, and a walkthrough recorded for whoever inherits it. The engagement ends; the knowledge does not leave.

Tested on hardware people own

A four-year-old mid-range Android and a throttled network are the target, not a flagship on office wifi. If it holds there, it holds everywhere else.

Where I work

Remote by default, on site when it counts

Based in Remote · Europe, working across CET / UTC+1 and overlapping with most of Europe and the US east coast. I travel for kickoffs and handovers.

  • Lisbon
  • New York
  • Tokyo
  • Berlin
  • São Paulo
  • Sydney
FAQ

Your questions, answered.

The things people ask before the first call. Still curious? The inbox is one section down.

Two to twelve weeks, one project at a time. It starts with a week of art direction and a working prototype of the hardest screen, so the risk is spent before the budget is.

Contact

Have something
worth building properly?

hey@0x64.site

A real reply, not a form response

Every brief is read by the person who would build it. Usually within a day.

Scope before price

You get the shape of the work written down first, then a fixed number against it.

A prototype in week one

The hardest screen gets built first, so the risk is spent while the budget is still intact.

Code you keep

Typed components, a documented system and a repo your team owns outright at handover.

Your details are only ever used to reply to this message. Nothing is stored, shared or added to a list.