Categories
0
Text · Interaction · Cursor · Scroll · Shader · Physics · Components
Scope · catalog grouping
REACTΩ · OPEN SOURCE · SHIPPED · MIT · v1.2.0
57 COMPONENTS · TEXT·CURSOR·SCROLL·SHADER·PHYSICS
[ CASE STUDY — ED CHEN ]
ReactΩ
Motion · Interaction · Physics
The AI-native React component registry. 57 copy-paste components you own outright — installable in one line by humans and AI agents.
Move your cursor — the wordmark is a live component (variable-proximity)
01 — THE WEDGE
A component library, built for the machine age.
Tools like shadcn and react-bits give you components you own — no black-box package. ReactOmega keeps that, then adds the layer they don't ship: a machine-readable registry, a CLI, an MCP server, and an llms.txt. The same components install for a human reading docs and for an AI agent reading contracts.
Components
0
Counted · v1.2.0 registry · 12 shaders in the set
Runtime deps
0–1
Mostly pure React + scoped CSS
Contract · per-component
Install paths
3
CLI · shadcn · MCP
Shipped · one registry, three doors
A11y
reduced-motion
by contract
by contract
Contract · CI fails the build
Registry
deterministic
zero drift
zero drift
Architecture · generated, git-diffed
DesignOps & Asset Sovereignty
Why Registry & MCP > Traditional NPM Package: In enterprise and AI-native workflows, external package dependencies introduce security vulnerabilities, version lock-in, and visual drift. ReactOmega proves a modern DesignOps model: giving teams and AI agents direct ownership of accessible, token-compliant component code with zero downstream dependency drag.
Modelled-vs-measured: 57 components, 7 categories and 12 shaders are catalog counts from the tagged v1.2.0 “Materials” release, not product-outcome metrics. Three install paths (CLI / shadcn / MCP) are shipped behaviour. Reduced-motion is a CI-enforced contract, not a setting.
02 — ONE SOURCE OF TRUTH
Everything is generated from one file.
A single meta.json plus the component sources are compiled into the registry, the shadcn items, and the agent guide — deterministically. The CLI, shadcn, and the MCP server all read the same output, so they can never drift. CI re-runs the build and git-diffs it on every push.
registry/meta.json · contracts
reactomega/ui/*.tsx · 57 sources
lib + hooks · primitives
→
build-registry.mjsdeterministic
→
registry.json · index
public/r/*.json · shadcn items
llms.txt · agent guide
03 — THE MACHINE LAYER
Installable by humans and agents.
Three front doors to the same registry. Add ReactOmega to Claude Desktop or Cursor and ask: "add a ReactOmega magnetic button." The agent calls the MCP server, which reads the exact contract the CLI reads.
① CLI
npx -y github:Edwson/ReactOmega add magnetic
Resolves a component + its primitives, writes them into your repo. Zero-dependency.
② shadcn
npx shadcn add …@v1.2.0/r/tilt-card.json
Items are shadcn-compatible — served straight from jsDelivr.
③ MCP server
list_components
get_component
add_component
get_component
add_component
Tested end-to-end against the real MCP SDK client.
04 — THE PROOF IS THE PAGE
Everything you've been touching is the library.
The hero wordmark, the cursor, the field behind it — all hand-built from ReactOmega's own components. Here are a few more, live. 57 ship in the playground.
pointer →
Proximity
variable-proximitytextadd ⌘
pointer →
Magnetic
magnetic-texttextadd ⌘
press →
spring-meshphysicsadd ⌘
pointer →
liquid-metalshaderadd ⌘
on view
DECODED
scramble-texttextadd ⌘
loop
Shiny
shiny-texttextadd ⌘
loop
Gradient
gradient-texttextadd ⌘
05 — THE CONTRACT
Accessibility isn't a setting. It's a test.
Every component honors prefers-reduced-motion — and a dependency-free test in CI fails the build if any component doesn't reference it. The contract caught a real gap during development and forced the fix.
This case study honors it too. Turn on Reduce Motion and the field freezes to a single frame, the cursor returns to default, and the wordmark stops bending — the contract applies to the page, not just the components.
06 — TWO LANES
Deliberately not GalaxyJS.
Same author, two open-source libraries, two problems. Kept strictly separate so neither dilutes the other.
ReactΩ
React-first registry
Motion, interaction & physics UI you copy into a React app — with an AI-native distribution layer.
- React + TypeScript + Tailwind
- Copy-paste, you own the code
- Registry + CLI + shadcn + MCP
- Reduced-motion by contract
GalaxyJS
Vanilla cosmic canvas
A framework-free library of 86 cosmic canvas animations + UI kit, with zero required dependencies.
- Plain JS, no framework
- Drop-in <script> / CDN
- Cosmic backgrounds & effects
- Its own MCP + playground
07 — SHIPPED
Not a concept. Released.
01
v1.2.0 “Materials” · MIT
Tagged release with a 57-component registry — twenty added in 1.1.0, six more in 1.2.0. Release notes ↗
02
Shaders without a shader library
Twelve full-screen fragment shaders on hand-written GLSL and raw WebGL2 — no ogl, no three, and still zero runtime dependencies. 1.2.0 doubled the set into a materials library: dispersion through glass, anisotropic GGX on brushed metal, band-limited moiré, Ashikhmin velvet, Beer–Lambert wax, and the grating equation solved per order. One shared useShader primitive owns sizing, off-screen suspension, context-loss recovery and the still frame reduced-motion users get. See all twelve ↗
03
Live playground
Every component rendered live, auto-deployed via GitHub Pages. edwson.github.io/ReactOmega ↗
04
CI on Node 18 · 20 · 22
Syntax check, esbuild-compile every component, a registry-drift gate, a dependency-free contract test, and a real end-to-end MCP test — green on every push.
05
Built solo, AI-augmented
Architected and shipped end-to-end with an AI pair (Claude Code + agents), disclosed openly. The registry is the source of truth; the human owns the judgment.
08 — WHAT THIS EVIDENCES
I designed a design system as a product.
The differentiator was never "more components." It was treating distribution, machine-readability, and an accessibility contract as first-class product decisions — then building the toolchain (registry → CLI → shadcn → MCP) that keeps them honest and drift-free. That's the same instinct I bring to regulated product surfaces: the system is only as good as the discipline that guarantees it.
09 — NEXT
Where this system connects.
Design-system sibling
Consumer Design System
190 B2C component contracts, 119 skills and JSON/AGENTS.md machine layer.
Operating model Ed AgentThe human-gated AI workflow behind production-quality systems work.
Hiring route Hire EdSenior / Principal Product Designer dossier — resume, email, evidence.