remotion
React-based Remotion video studio that renders explainer/animation compositions about the monorepo's subsystems.
Overview
@repo/remotion is a Remotion video/animation studio: programmatic video
compositions written in React, one per subsystem being explained (Effect,
Drizzle, Turborepo, Better Auth, RPC, CI/CD, etc.). Compositions can carry
optional ElevenLabs TTS voiceover tracks. It's for anyone producing
explainer videos about the monorepo's internals, not an end-user product.
Stack
- Remotion (
remotion,@remotion/cli,@remotion/media) — React-based video framework + studio - React 19 + React DOM
- Zod +
@remotion/zod-typesfor composition prop schemas - Vitest for tests; TypeScript via
@repo/typescript-config - ElevenLabs TTS for voiceover (needs
ELEVENLABS_API_KEY)
Develop
pnpm -F @repo/remotion dev # Remotion Studio on http://localhost:3003Entry point is src/index.ts → src/Root.tsx, which registers every
composition.
Test
pnpm -F @repo/remotion test # vitest (--passWithNoTests)
pnpm -F @repo/remotion test:coverage # with v8 coverage
pnpm -F @repo/remotion check-types # tsc --noEmitBuild & deploy
pnpm -F @repo/remotion build # bundle compositions to dist/
pnpm -F @repo/remotion render # render TitleCard to out/title-card.mp4The static bundle is deployed on Vercel (albertonline-org-remotion) at
remotion.albertonline.org.
This is a composition preview bundle for internal explainer videos, not a product page.
Structure
src/
Root.tsx # registers all compositions
index.ts # registerRoot entry
compositions/ # one .tsx per video (+ .voiceover.ts scripts)
components/ # shared scene primitives (terminal, typewriter, …)
framecn/ # framecn registry primitives ported to Remotion
remocn/ # remocn/ui reusable animated effects
lib/ # frames, voiceover, composition schema helpers
__tests__/ # vitest specs
scripts/ # voiceover draft/generate/cleanup CLIs
public/voiceover/ # generated TTS audioSee the apps overview and the monorepo overview.