Every stack. Every motion engine. In one scroll.

Every stack. Every motion engine. In one scroll.

Heroes, navigation systems, preloaders, scroll effects and dashboards — each variation a different combination of framework, animation library and GPU technique, wrapped in a metadata HUD that tells you exactly what you are looking at and what happens when you touch it.

See it verified

npm run setup:browser   # Chromium from npm
npm run verify:browser  # audit + capture
#  → docs/vision/index.html

The vision reel is a real browser, driven through each variation's signature interaction — pointer arcs, scroll trajectories, clicks — with the audit results printed beside every capture. It is where the bugs that jsdom cannot see (a `display` rule defeating `hidden`, `
` breaking screen-reader text) were found.

Run it locally

npm install
npm run build      # exports every framework track into docs/
npm run preview    # → http://localhost:4173

The hub is a buildless static site, so docs/index.html also works straight from disk. The framework variations are static exports that CI splices into docs/framework/.

Add a variation

1. build it in apps/next-catalog/src/heroes/<slug>/
2. register it in catalog/catalog.json
3. npm run catalog:sync && npm run build

One manifest entry drives the hub card, the metadata HUD, the route generator and this page’s counters. No duplication, no drift.

Deploy to Pages

git push origin main
# .github/workflows/deploy.yml builds every
# app, splices docs/ and publishes Pages

Every href in the manifest is relative, so the same build serves from / locally and from /<repo>/ on GitHub Pages without a rewrite step.