Print edition
The one-man
studio
A designer, a frontend engineer, an animator and an AI engineer walk into one city. They're all me.
- Home
- Design
- Frontend
- Motion
- Tween
- Templates
- 3D
- AI
- Full stack
- Contact
Where it started — an old family computer, age 14.
Origin story
HomeI was fourteen. The computer was older than that.
Boot the old family computer, type commands at the prompt — and play Snake on the CRT.
How it’s made“The CRT warm-up is one GSAP timeline: a bright line opens to the full picture, then a stepped brightness flicker.”
“The boot text is typed character by character with timers, one synthesized key click every other letter.”
Meanwhile, at the design studio…
The designer
DesignType, colour and layout — I design what I build.
Compose a poster: pick a type pairing, drag colours onto it, set the grid — then print it.
How it’s made“Swatches are GSAP Draggables; on release I hit-test every poster region and paint the one underneath.”
“Changing the type pairing or alignment re-flows the poster with Flip, so the words travel instead of jumping.”
The workshop where interfaces get built.
The frontend engineer
FrontendReact, Next.js, React Native — pixels that hold up on every screen.
Drag UI parts into a browser window, then flip desktop → tablet → phone and watch it re-flow.
How it’s made“Every part knows its own layout per device, so switching desktop → phone is a real re-flow, not a scale trick.”
“Before each change I capture a Flip state; after React re-renders, Flip animates the difference.”
Tonight at the motion theatre: everything moves.
The animator
MotionGSAP, scroll, timing and feel — I care how it moves.
Draw an easing curve, set keyframes on a timeline, and watch a comic ball perform it.
How it’s made“The curve editor solves CSS cubic-bezier myself (Newton steps, bisection fallback) so GSAP can use it as an ease.”
“The ball squashes and stretches from its own speed, and leaves onion-skin ghosts of earlier frames.”
The shop where I keep my components.
Tween
TweenMy library of animated React components — one command to install each.
Play with live Tween components on the shelves and copy their one-line install command.
How it’s made“Every card on the shelf is a small, live version of a real Tween component — not a video.”
“The Masterpieces wing runs my most complex components at full size: shaders, physics, scroll scenes.”
Every billboard on this street is a template I made.
Now showing
TemplatesFull landing-page templates — every one designed, animated and built by me.
Roll the reel of every Tween template and preview them live in a laptop and a phone.
How it’s made“Every template lives inside this site too — the same files as Tween, served at /templates/<name> — so nothing here links you away.”
“The laptop renders the real page at 1440 × 900 and the phone at 390 × 844, then scales it into the frame, so you see each template's true desktop and mobile layout.”
The observatory — where I work in three dimensions.
Three dimensions
3DThree.js, React Three Fiber and shaders. This whole city is one.
Spin, morph and paint a 3D object printed through the same comic shader as the city.
How it’s made“This is the same comic shader that prints the whole city: depth and normals become ink lines, dark tones become halftone dots.”
“Morphing squashes the old shape flat, swaps the geometry, and springs the new one back with an elastic ease.”
The tower where the agents work through the night.
The AI engineer
AIAgents with tools, memory, voice — and the sense to ask before they act.
Give the agents a job, approve what they send — and ask the tower a question.
How it’s made“The task runs are scripted, but the shape is real: a lead agent delegates, specialists call tools, memory gets pinned, and nothing ships until you approve it.”
“"Ask the tower" is live when the server has an API key — the model only gets the facts from my content files and is told to say "I don't know" otherwise.”
Backend, web, Mac, iPhone — the power plant.
The whole stack
Full stackBackend to iPhone. I build the plumbing and the paint.
Send a request through the whole stack, then break a layer and watch it recover.
How it’s made“The packet rides real SVG paths: each hop is a tween that reads a point along the pipe every frame.”
“The layers are labelled with my actual stack, straight from my content file.”
End of the street. Send a signal.
Send a signal
ContactGot something that needs building — and moving? Tune in.
Tune the radio dial, sign the guestbook and send a signal.
How it’s made“The dial turns by the angle between your pointer and its centre, keeps your flick's speed, then snaps to the nearest station.”
“A click plays on every detent, so turning it feels like a real radio.”
Credits
New buildings are going up on this street. Come back and see what moves in.
Printed in Dubai, 2026 — the city lives online, in 3D.