record me

An editorial recording instrument that lives in your browser.

The editorial landing at / — Twilight palette, Instrument Serif, four signature moments.

A quietly editorial screen recorder for the web. Press record, capture your screen, your camera, and your cursor — render a polished clip in the browser. No accounts, no upload, no compromise on craft.

Three modes

The ModeCard primitive shipped in Phase 2. Composition previewed via /dev/previews/modes.

• Screen + Camera + Cursor — the full recital. Picture-in-picture camera, click highlights.
• Screen + Cursor — just the work. Clean walk-throughs and demos.
• Camera only — talking-head async updates, round-framed and centered.

Principles

• Privacy as a feature, not a footnote. Recording bytes never leave your browser. Cookieless analytics. No accounts.
• Editorial over generic. Twilight palette, Instrument Serif headlines, Geist body, Geist Mono for the technical bits. The studio is composed like a piece of furniture.
• Web-native. Built on Next.js 15 App Router, deployed to Vercel. MediaRecorder + canvas compositing on the main thread. Zero install.

The studio

A composed cockpit, not a control panel. Pick a mode, set a cap, grant permissions once — a faithful live composite preview starts immediately. Stop, review, download. Nothing leaves your browser.

The /record studio shipped in Phase 4. Screenshot from apps/web/src/app/record/page.tsx.

Quick start

pnpm install
pnpm dev          # opens http://localhost:3000
pnpm test         # vitest
pnpm test:e2e     # playwright
pnpm build        # production build

Project structure

record-me/
├── apps/web                  # Next.js 15 App Router · the deployed surface
├── packages/recorder         # @record-me/recorder · framework-agnostic recording engine
├── packages/ui               # @record-me/ui · shadcn + Twilight tokens + brand primitives
├── packages/config           # @record-me/config · tsconfig · eslint · tailwind preset
├── docs/                     # Required reading — architecture, design, recording, security, …
└── .claude/                  # Agent harness — agents, commands, teams, memory, journal

Full architecture in docs/ARCHITECTURE.md. Design system in docs/DESIGN.md. Recording pipeline in docs/RECORDING.md. Privacy contract in docs/SECURITY.md.

Contributing

This project ships through a six-member multi-agent team — spawn it with /spawn-record-me-team against a plan written by superpowers:writing-plans. Human PRs welcome; please read docs/WORKFLOW.md and docs/CODE_STYLE.md before opening one.

License

MIT — see LICENSE.

---

Built in the open. Composed in Brooklyn & Manila. Printed by Vercel.