t/ playground

A small light for every season. Interactive 3D experiments for the web, built with Three.js and React Three Fiber. A new one switches on with each holiday.

🌐 playground.oksana.dev

Experiments

Season one: Halloween 2026 → Christmas → New Year 2027

Repository

A pnpm + Turborepo monorepo. Every experiment is its own Next.js app and its own Vercel project; the hub stitches them together under one domain.

apps/
  hub/          playground, the catalog (proxies /halloween to its app)
  halloween/    Glowkin, served under basePath /halloween
packages/
  shared/       design tokens, the "← playground" overlay, the experiments registry

Run locally

Requires Node.js and pnpm.

pnpm install
pnpm dev          # hub on :3000, halloween on :3001

• Hub: http://localhost:3000
• Glowkin: http://localhost:3001/halloween (also reachable through the hub at http://localhost:3000/halloween)

pnpm lint
pnpm test
pnpm build

Adding an experiment

1. Create apps/<name> (a Next.js app) with basePath: '/<name>', and render <Overlay /> from @playground/shared/Overlay in its root layout. Set --accent to the season color.
2. Add an entry to EXPERIMENTS in packages/shared/src/experiments.ts. The hub timeline and cards are built from it.
3. Add the rewrite for /<name> in apps/hub/next.config.ts and a <NAME>_URL environment variable (declare it in turbo.json too, since Turborepo hides undeclared variables from builds).
4. Create a Vercel project with Root Directory apps/<name>, and add a row to the table above.

License

The code is MIT. Third-party audio (Pixabay) is not part of the repository and stays under the Pixabay Content License, see apps/halloween/README.md.

---

Made by toksana · @toksana_dev