Categories
0
Text · Interaction · Components · Physics
REACTΩ · OPEN SOURCE · MIT
31 COMPONENTS · TEXT·INTERACTION·PHYSICS
[ CASE STUDY — ED CHEN ]
ReactΩ
Motion · Interaction · Physics
The AI-native React component registry. 31 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
Runtime deps
0–1
Mostly pure React + scoped CSS
Install paths
3
CLI · shadcn · MCP
A11y
reduced-motion
by contract
by contract
Registry
deterministic
zero drift
zero drift
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 · 31 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.0.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. 31 ship in the playground.
pointer →
Proximity
variable-proximitytextadd ⌘
pointer →
Magnetic
magnetic-texttextadd ⌘
press →
spring-meshphysicsadd ⌘
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 zero-dependency, framework-free library of 60 cosmic canvas animations + UI kit.
- Plain JS, no framework
- Drop-in <script> / CDN
- Cosmic backgrounds & effects
- Its own MCP + playground
07 — SHIPPED
Not a concept. Released.
01
v1.0.0 · MIT
Tagged release with a 31-component registry. Release notes ↗
02
Live playground
Every component rendered live, auto-deployed via GitHub Pages. edwson.github.io/ReactOmega ↗
03
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.
04
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.