Chronon

---

Chronon is a small API platform with no paid plan. Webrizen builds and runs the APIs; anyone can use them. API keys exist only to keep the service fair: they identify an account so one runaway script can't take the servers down for everyone else.

API	Status
Regional menus: 146 dishes from 16 regions, filterable by course, diet and spice	Live
Structured data feeds	Planned
Automation tools	Planned

curl "https://chronon.webrizen.com/v1/menus/dishes?region=kerala&diet=vegan" \
  -H "Authorization: Bearer $CHRONON_KEY"

Full documentation ships with the app at /docs.

How it works

Developer ──► Next.js app on Vercel
                ├─ /             landing page
                ├─ /docs         documentation (MDX)
                ├─ /dashboard    sign in with Webrizen SSO → create / revoke keys, see usage
                └─ /v1/*         the APIs
                      │
                      ▼  withApiKey() on every request
                [1] parse chr_<id>_<secret> from Authorization or X-API-Key
                [2] look up the key (cached 60 s)            ──► Postgres (Neon)
                [3] per-minute window + monthly quota        ──► Upstash Redis
                [4] run the handler, add X-RateLimit-* / X-Quota-* headers

• Keys are chr_ + an 8-char public id + a 32-char secret. Only a SHA-256 hash is stored, and the key is shown once.
• Limits are per account, not per key: 60 requests/minute and 50,000/month on the Standard tier; 5 active keys.
• Abuse controls: lookups of unknown keys are capped per IP, admins can suspend accounts or raise tiers, and revocations take effect within a minute.

Run it locally

Requirements: Node 20+ and pnpm. Docker is not needed.

pnpm install
cp .env.example .env
pnpm db:local            # embedded Postgres on :54321, leave it running

In a second terminal:

pnpm db:migrate
pnpm dev                 # http://127.0.0.1:3001
pnpm dev:key             # local account + API key, no SSO needed

To use the dashboard locally, run Webrizen SSO on localhost:3000, register Chronon there (redirect URI http://127.0.0.1:3001/api/auth/webrizen/callback) and fill in the WEBRIZEN_SSO_* variables.

Command
pnpm dev	Dev server on port 3001
pnpm check	Lint, typecheck and tests (run before a PR)
pnpm test	Vitest
pnpm db:generate	New migration after editing src/lib/db/schema.ts
pnpm db:migrate	Apply migrations
pnpm dev:key [email]	Create a local account and key (local databases only)

Project layout

src/
  app/
    api/v1/            route handlers, one folder per endpoint
    dashboard/         key management and admin
    docs/              documentation pages (MDX)
  apis/menus/          regional menus: schema, JSON data per region, query logic
  components/
    base/, application/, foundations/   Untitled UI React components (copied in, MIT)
    landing/           overlay nav, code tabs, live data explorer
    vfx/               WebGL shader canvas and scenes
    lattice.tsx        hairline section layout used across pages
    ambient.tsx        scroll/pointer-driven light effects
  styles/              Untitled UI base theme (re-skinned in app/globals.css)
  lib/
    api/               withApiKey(), error format, query parsing
    db/                Drizzle schema and queries
    keys.ts            key generation and hashing
    ratelimit.ts       sliding window + monthly quota (Redis or memory)
brand/                 brand guide: logo assets, tokens.css, reference sheet
drizzle/               SQL migrations
scripts/               local Postgres and dev-key helpers
tests/                 Vitest suites

Deploy

Vercel (Hobby) + Neon Postgres + Upstash Redis, all on free tiers. Step by step: src/app/docs/deployment/page.mdx.

Brand & UI

The logo, colours and type come from brand/. brand/tokens.css is imported directly by the app's stylesheet, so it stays the single source of truth for colours, fonts and radii.

UI components are Untitled UI React (MIT), added with npx untitledui@latest add <name> and committed to src/components/. src/app/globals.css re-skins them for Chronon: Tailwind's neutral scale runs Paper → Night, the brand scale is Photon, and links and focus rings use Ion. Wrap a section in .dark-mode and the components switch to their Night variants.

Page-level styles live in globals.css; the scroll and pointer effects are driven by src/components/ambient.tsx:

• Landing VFX: five hand-written WebGL fragment shaders in src/components/vfx/scenes.ts, rendered by ShaderCanvas (only while on screen, capped pixel ratio, a still frame under reduced motion, CSS gradient fallback): light converging into a line (hero; pointer speed adds energy via u_energy/u_flow), a stippled colonnade, a swirling portal, and grainy pastel dunes (footer). Section images live in src/lib/landing.ts. Page scrolling is smoothed with Lenis (src/components/smooth-scroll.tsx). Feature cards use CSS film light leaks (.leak-card), and the page carries a film grain (.film-grain).
• Lattice (docs, dashboard): sections sit between hairline rails with "+" registration marks; .cells grids divide content with the same 1px line.
• Prism light: any element with data-prism picks up a spectral glow and rim that follow the pointer; .spectrum-rule hairlines sweep with scroll. All of it is off under prefers-reduced-motion.

Contributing

Fixes to data, docs and code are welcome. See CONTRIBUTING.md.

License

MIT © Webrizen AI Labs