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.
Open SourceThat Ships.
The libraries, benchmarks and experiments behind this site — published on npm and GitHub, not case studies behind an NDA.
Triforge
Blender-Style Node Workflows for Three.js
A 19-package suite that brings Blender's node-graph workflow — geometry, shading, particles, physics, animation — to plain Three.js, with no dependency beyond Three.js itself.
Strata
A JIT CSS Framework
A PostCSS plugin that pairs Bootstrap-style ready-made components with Tailwind-style just-in-time class generation — only the CSS a project actually uses ships.
Fish Pond
3D Fish-Behavior Experiments
Browser-based experiments comparing reflex-like, probabilistic, and deliberative decision-making in a simulated fish — no backend, no account, no tracking.
Inkwake
A CSS Framework Benchmark
The same anime-themed e-commerce landing page, built three times — once each in Tailwind, Bootstrap 5, and Strata — then Lighthouse-benchmarked to isolate what the framework itself costs.
AI Dev Kit
Skills and Coding Standards for AI Agents
Agent skills, optional MCP servers, and a layered coding-standards system that helps Claude Code, OpenCode, and similar agents work consistently across projects.
Explore More of the System
Venus is one stop in the system. Each planet holds a different corner of the work — from engineering experiments to the tools that run this site.
Let's talk about the work.
Every project above is public on GitHub and npm. Leave an email and a note on what you're looking for, or find the repos directly.
Builtto Last.
Front-end engineering and production UI, built with a graphic design background. I write code that ships clean, reads clearly, and scales without drama.
Aerin Bio
A fictional biotech landing page built as a take-home assignment — an SVG-masked hero reveal, cursor-reactive smoke, and GSAP-driven scroll sequences on Next.js.
The Tech Layer
TypeScript, React, Astro, Next.js, Three.js, Node.js, Vercel. I favour type-safe, well-structured codebases with minimal abstraction overhead.
Stratisle
A Next.js web app currently in active development — built in the open, with the commit history telling the real story rather than a polished case study.
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.
Fish Pond
Browser-based 3D fish-behaviour experiments — an Underwater scene with Triforge node-graph materials and an on-device ONNX model deciding how each fish moves.
In the Commons
Strata (a CSS utility framework), Triforge (a Blender-style node-graph system for Three.js), and AI Dev Kit (agent skills + coding standards) — all public, all actively maintained, and the first two 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.
Fish Pond's own experiments, plus Inkwake's framework benchmark — work done to measure, compare, and find the edge of what's possible in a browser, documented in their own public repos.
Cognitive Arena
A scripted, no-AI simulation inside Fish Pond — one fish responds to eight stimuli, known ones fast and reflexive, unknown ones slower and multi-phase, with a live "Fish Mind" readout.
Visual Telemetry Benchmark
Three scripted controllers run side by side on identical, seeded inputs inside Fish Pond, with live telemetry over a 16-second automated test cycle — reproducible by design, not left to chance.
Underwater / Laya-AI
A realistic goldfish scene built on Triforge node-graph materials — caustics, water absorption, bloom — with an on-device ONNX model deciding whether each fish flees, feeds, or just swims.
Inkwake
The same landing page built three times — Tailwind, Bootstrap 5, Strata — then Lighthouse-benchmarked live to see what the CSS framework itself actually costs, with everything else held constant.
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, Triforge node graphs, ONNX Runtime Web, Next.js, Lighthouse. 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.
Builtto Prove Something.
Deep dives into the "why" behind three real, public projects — a design brief, a behavioural comparison, and a framework benchmark. No enterprise clients yet, no NDA — just the repos.
Aerin Bio
A take-home brief treated like a real launch — "medicine that breathes with you" became the literal mechanic of an SVG-masked hero reveal, with GSAP-driven scroll sequences built on top of that one idea.
Fish Pond
Comparing three ways to make a simulated fish decide what to do — scripted reflexes, a seeded probabilistic benchmark, and a real on-device ONNX model carrying the actual decisions in the Underwater scene.
One Idea, Fully Followed
Every project here starts from one idea or one question and gets built in service of answering it, not as a feature list. Aerin Bio had a design concept to embody. Fish Pond had a comparison to run fairly. Inkwake had a claim to prove.
Inkwake
Does Strata actually ship less CSS than Tailwind or Bootstrap? Inkwake builds the same page three times and settles the question with Lighthouse data instead of an assertion.
What They're Built On
Next.js and React across the design-led work, Three.js and Triforge where 3D rendering is the point, and plain TypeScript where the project is a benchmark harness rather than a product.
What They Have in Common
No enterprise clients yet, no NDA to work around — every repo, README, and live demo behind these case studies is public, linked from Earth and Venus.
Let's Work Together
Open to new projects and collaborations. Every case study above links back to a real, public repo — browse the code directly, or reach out via Neptune.
Free.Published. Installable.
No storefront — just real, open-source packages on npm and GitHub, built to the same standard as any client work, because they are the work.
strata-css
A JIT CSS framework — ready-made components plus Tailwind-style arbitrary values, cascade layers instead of `!important`, and six companion packages. This exact site runs on it.
@triforge/*
19 packages bringing Blender's node-graph workflow to Three.js — geometry, shading, particles, physics, and animation. Three.js is the only hard dependency.
ai-dev-kit
Agent skills and layered coding standards for AI-assisted development — markdown files that install into a project and load only when their trigger matches the task.
What's Included
Every package ships MIT-licensed, with documentation and examples in the repo itself — free to use, modify, and ship in commercial projects, no attribution required.
Want Something Added?
These packages are under active development. If a feature is missing or a bug gets in your way, open an issue on the repo — findings from real use are exactly how each one gets better.
Where Things Stand
strata-css and the triforge suite are both under active development, with version history and findings logged in the open. ai-dev-kit is tested on Windows; its Linux/macOS and GPU paths are implemented but not yet verified.
Get the Packages
strata-css and @triforge/* are on npm; ai-dev-kit installs from GitHub. Questions before using one in a real project? Reach out via Neptune.
What's NotBuilt Yet.
Real, documented gaps in Triforge, ai-dev-kit, and Fish Pond — named here honestly as roadmap, not implied to already exist.
Triforge Stage 2
A visual GUI node editor on top of Triforge's 19 code-first packages — so a graph can be built and previewed without hand-writing the equivalent TypeScript first.
Terrain & Vegetation Addon
A procedural terrain and vegetation-scatter suite built on Triforge's existing geometry-nodes and modifier-core packages — next on the roadmap after the Stage 2 GUI.
Laya-AI, System 2
Fish Pond's Underwater scene runs fast, reflex-style fish decisions today. A slower, deliberative reasoning layer on top — named as a known limitation in the project's own docs — isn't built yet.
Self-Improving Skills
ai-dev-kit already keeps a per-project learnings file. The open question: could a skill propose a reviewable edit to its own instructions from repeated corrections, with a human still approving every change?
Named, Not Hidden
Every item here is a gap already named in a real README or findings log — not a new idea invented for this page. Listing them here keeps the roadmap honest instead of implying these features already exist.
How This Roadmap Forms
Each gap here surfaced from actually using the tool — a missing editor, a missing addon category, a limitation flagged in a findings log. Most roadmap items start as a note in an issue, not a brainstorm.
Want to Help Build One of These?
All four items above are real, open issues on real repos — contributions, feedback, or just a conversation about priority are welcome. 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 Ibrahim Kazi — a frontend developer with a graphic design background, based in Ratnagiri, Maharashtra. This is where the system starts. Open to new projects, and open-source by default.
What I Build
Frontend engineering with a graphic design background. I build the libraries underneath the interface as much as the interface itself — strata-css and the Triforge node suite are both mine, and both run this site.
How I Work
Fix the root cause, in public. When a tool I'm using has a gap, I'd rather patch the library and publish the fix than work around it quietly — Mercury's findings log is the proof, not the claim.
Tools of the Trade
Astro, TypeScript, React, Next.js, Three.js, GSAP, and strata-css — my own CSS layer, the only one running on this site. I choose tools that match the problem, including the ones I had to build myself.
The Journey
Based in Ratnagiri, Maharashtra. Came to frontend development through a graphic design background, which is why the interface problems that interest me most are usually design problems first. Picked up 3D and shader work the same hands-on way: by building this planetarium on top of my own Triforge node suite.
What I Stand By
Code that another human — or the next version of me — can read and build on. Bugs logged with a reproduction case and a root cause, not just closed. Gaps named honestly on Uranus instead of implied away.
At a Glance
Real repos, real packages, and the range of problems tackled along the way — the numbers that actually hold up when you click through to GitHub.
Explore the Orbits
Each planet in this system holds a different body of work. Open-source projects live on Venus. Development on Earth. Experiments on Mars. Case studies on Jupiter. Published packages on Saturn. Roadmap on Uranus. Reach me at Neptune.
