Writing from the Field
Two open-source packages, the reasoning behind building them, and the real incidents from shipping this site on top of them — untextured planets, a page-transition router, and the bugs found maintaining my own tools.
Strata: A CSS Utility Framework I Actually Wanted to Use
Why I built my own utility-class CSS framework instead of reaching for Tailwind or Bootstrap — and what shipping a real site on top of it taught me.
Triforge: A Blender-Style Shader Graph for Three.js
Every planet material on this site compiles from a node graph, not hand-written GLSL. Here is why I built a Blender-workflow shader system for the web, and what it still cannot do.
Why I Built My Own Tools Instead of Just Using What Exists
Tailwind and Bootstrap exist. Three.js material libraries exist. Here is the actual reasoning behind building Strata and Triforge anyway — not "not invented here," a real gap I kept hitting.
This Site Runs on My Own Open-Source Work
Every surface, every gradient, every planet on this page compiles from Strata and Triforge — my own two public packages. The portfolio is the proof, not the pitch.
The Ghost Planet Bug: When Nine Planets Went Untextured Overnight
A shader-core version bump silently broke fragment compilation on every planet surface, with zero console errors. Here is how it was found and fixed.
Building the Warp Router: A Site-Wide Page Transition in a Multi-Page App
Every click on this site plays a fullscreen GLSL warp-speed effect before the page actually navigates. Here is how that works inside a real MPA, not an SPA.
Maintaining Packages I Depend On
Shipping a real product on top of your own early-stage npm packages turns every bug your users would hit into a bug you hit first, at the worst possible time.
Explore More of the System
Mercury is just one stop. Each planet in this system holds a different corner of the work — from live projects to experiments to commercial builds.
Get the writing delivered.
New articles land in your inbox the moment they're published. No spam, no noise — just the next piece when it's ready.
DesignsThat Live.
A curated collection of themes, websites and digital experiences crafted with precision, performance and purpose.
Lumen
A Design System for a Health Platform
A token-based component library built to carry a patient-facing health platform across web and native, without the two surfaces drifting apart.
Solstice
A Full Brand Rebrand
A ground-up identity rebuild for a subscription hardware company — logo, type system, colour, and a guidelines deck the internal team could actually use.
Nimbus
A Mobile Banking App Redesign
A full UX audit and redesign of a mobile banking app's core flows — balances, transfers, and card controls — cutting task completion time by a third.
Aurora
A Marketing Site Built for Conversion
A marketing site rebuild for a B2B SaaS product, designed around a single conversion goal instead of a laundry list of feature callouts.
Kinetic
A Motion Design Reel
A self-directed motion design reel exploring micro-interactions, page transitions, and loading states — the small moments most products skip.
Explore More of the System
Venus is one stop in the system. Each planet holds a different corner of the work — from engineering to enterprise builds to open-source tools.
Let's talk about the work.
Full case studies, process notes, and finished work are available on request. Leave an email and a note on what you're looking for.
Builtto Last.
Front-end engineering, full-stack products, and everything in between. I write code that ships clean, reads clearly, and scales without drama.
Meridian
A usage-analytics dashboard for a B2B SaaS product — built to replace a spreadsheet-based reporting habit with something the whole team checks every morning, without a six-month rebuild.
The Tech Layer
TypeScript, React, Astro, Node.js, PostgreSQL, Supabase, Vercel. I favour type-safe, well-structured codebases with minimal abstraction overhead.
Northwind
A headless e-commerce rebuild — same catalogue and checkout logic, moved onto a static-first Astro front end to fix a mobile load-time problem that was costing the client shoppers before the page even finished painting.
How I Engineer
Accessibility first. Performance budgets from day one. Type safety throughout. I write code for the next developer, not just the next deadline. Tests where they prevent regressions, not to hit a coverage number.
Pulsegrid
A real-time 3D data-visualisation layer for IoT sensor networks — hundreds of live data points rendered as an interactive field so an operator can spot an anomaly by shape, not by scanning a table.
In the Commons
Strata (a CSS utility framework) and Triforge (a Blender-style shader-graph system for Three.js) — both public, both actively maintained, and both doing real work on this site right now.
See the Work
Full project breakdowns, case studies, and live demos are available on request. If you want to understand how something was built — not just what it looks like — let's talk.
Pushthe Limits.
Experiments that don't need a client brief. Work done to learn, to break, to find the edge of what's possible in a browser. Some ships. Some stays here. All of it teaches something.
Terrarium
A generative plant-growth shader — one branching rule run thousands of times from a single seed value, no geometry hand-drawn. Noise turned out to be the missing ingredient between "straight lines" and "plant."
Echograph
A real-time audio visualiser reacting to live frequency data via the Web Audio API — bass and treble rendered as depth in a 3D field. Silence, not loud audio, turned out to be the hard case to design for.
Fracture
A shatter effect for UI dismissal — cards break into physically-simulated shards under gravity instead of fading out. Hit a real Canvas 2D performance ceiling around 150 simultaneous shards.
Driftwood
A from-scratch Verlet-integration rope/cloth simulation — a driftwood bridge swaying under a simulated wind force, no physics engine dependency, built purely out of curiosity about the underlying math.
The Lab Method
Every experiment starts with a single constraint: one unusual input, one novel output, or one forbidden approach. Time-boxed. Documented. The ones that survive go into the field. The rest stay as notes.
Lab Equipment
Three.js, GLSL shaders, WebGL, Web Audio API, Canvas, GSAP. Sometimes just raw CSS. The constraint isn't the tool — it's the question.
Read the Notes
Write-ups for some experiments live on Mercury. The rest are on GitHub with comments. If something here interests you — working or not — reach out. Broken things are often more interesting than finished ones.
Workat Scale.
Large-scale product work, commercial contracts, and long-running engagements. Projects that require system thinking, team coordination, and decisions that hold up at 100,000 users.
National Retail Chain
A checkout and cart rebuild for a 40+ store retail chain — cut the mobile flow from five steps to two, scoped to the front-end checkout component library specifically, not the payments backend behind it.
Fintech Trading Platform
A real-time trading dashboard rebuilt to hold its frame rate under live market-data load, with every UI state change traceable to satisfy the client's own regulatory audit requirements.
Working at Volume
Enterprise work requires a different mode: slower decision cycles, more stakeholders, longer horizons. I've learned to navigate org charts as well as wireframes — to align, document, and communicate clearly at every layer.
Multi-Tenant SaaS Platform
An admin portal built zero-to-production as an embedded engineer inside the client's own team — one interface serving tenants from five-person teams to organisations with thousands of seats.
Sectors Worked
Retail, fintech, and B2B SaaS so far — each with its own version of "at scale": store count, transaction throughput, and tenant count respectively. Context that signals domain familiarity to the next client.
What Got Shipped
A two-step checkout, a dashboard that holds up under live market-data load, and an admin portal that replaced ad-hoc internal scripts. Each result traces to one specific, describable decision.
Let's Work Together
Available for enterprise contracts, long-term retainers, and embedded team roles. NDA available. Case studies with full detail available on request after a brief call. Reach out via Neptune.
Thingsfor Sale.
Themes, templates, UI kits, and digital assets built for other designers and developers. Products that encode the same standards I hold in client work.
Orbit UI
A 120-component Figma kit for SaaS dashboards — data tables, filter bars, and settings panels in dark and light variants, so the fifth new dashboard screen doesn't start from a blank canvas.
Nightfall
A dark-mode Astro starter theme — six page templates on the same cascade-layer CSS architecture this site uses, no framework dependency. Clone, install, and it's running.
Glyphset
A 200-icon set drawn at one consistent stroke weight and corner radius — SVG, PNG, and an Astro-ready component wrapper, so nothing looks mismatched against the rest of the UI.
What's Included
All products come with documentation, lifetime update access, and a licence for commercial use — including client work, no attribution required.
Need Something Bespoke?
Products are starting points. If you need a theme modified, a template system extended, or a design kit built to your brand, I offer custom product development on a project basis.
What Customers Say
Early buyers on Orbit UI and Nightfall — reviews will fill in as the storefront gets more traffic. Real feedback carries more weight than any copy written here, so this section grows honestly, not artificially.
Browse the Store
All products are available on Gumroad. Instant download after purchase. Questions before buying? Reach out at Neptune and I'll answer the same day.
The SpeculativeSpace.
Work that doesn't have a client yet. Concepts, prototypes, unreleased ideas, and creative direction explored for its own sake.
Aftertouch
A UI direction built on press pressure as an input, not just position — a button that reads a firm press differently from a tap. The hardware APIs already exist; almost nobody designs for them.
Palimpsest
A collaborative-document UI where edit history stays visible as a fading layer beneath the current text, instead of hidden behind a version-history modal nobody opens.
Weathervane
Dashboards you hear, not just see — a live data stream turned into ambient sound so a problem is sensed building before anyone glances at a monitor. Blocked on real sound-design expertise, not engineering.
What If?
A screen-free bedtime interface — a physical dial and ambient light instead of a phone app, built around the specific problem of blue light and notifications undermining a wind-down routine.
Nocturne
The sketchbook entry — physical-object-first rather than software, deliberately unfinished, and the one concept here that shows range beyond pure interface design.
How Concepts Form
Concepts usually start in a notes app, not a design tool. I collect images, write fragments, and let things sit until the pattern becomes clear. Most die. A few turn into something real.
Like What You See?
If a concept here interests you — commission it, fund it, or just talk about it. Some of the best work starts as a strange idea shared at the right moment. Neptune is where that conversation starts.
Senda Signal.
Neptune sits 4.5 billion kilometres from the Sun. Voyager 2 took 12 years to reach it. Your message will arrive considerably faster. Open to freelance projects, collaborations, and conversations.
Reach Out Directly
hello@aftabkazi.comWorking remotely, open to teams in any timezone.
Compose Your Transmission
Other Frequencies
End of Transmission
Signal destination: Neptune, 8th planet, 4.495 × 109 km from origin. Estimated travel time: 4 hours 9 minutes at light speed. Actual reply time: considerably sooner.
EverythingOrbits Something.
I'm Aftab Kazi — a designer and developer building digital products at the intersection of craft and clarity. This is where the system starts. Freelance, open to full-time, passionate about work that matters.
What I Build
UI/UX design. Front-end engineering. Design systems. Motion and interaction. I work across the full product lifecycle — from early concepts to shipped code. Comfortable in Figma and a terminal in equal measure.
How I Work
Clarity over cleverness. Systems over one-offs. I believe the best design is invisible — it removes friction and lets the work speak. I start with constraints, not aesthetics. The visual language follows from the problem.
Tools of the Trade
Figma, Astro, TypeScript, React, GSAP, Three.js, CSS. On the back end: Node, PostgreSQL, Supabase. I choose tools that match the problem — not the trend.
The Journey
Started as a self-taught developer, picking apart other people's code long before writing much of my own. Freelance from day one — no bootcamp, no internship, just shipped work and steadily harder problems. Picked up 3D and creative coding the same way: by building this planetarium.
What I Stand By
Honest timelines. Clean handoffs. Code that another human can read. I don't over-promise and I don't disappear mid-project. I collaborate openly and I'll tell you when something isn't working — before it ships.
At a Glance
Projects shipped, clients worked with, and the range of problems tackled along the way — the numbers that matter most when deciding who to work with next.
Explore the Orbits
Each planet in this system holds a different body of work. Design lives on Venus. Development on Earth. Experiments on Mars. Enterprise work on Jupiter. Products on Saturn. Concepts on Uranus. Reach me at Neptune.
