albertonline.org docs
Apps

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-types for 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:3003

Entry point is src/index.tssrc/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 --noEmit

Build & deploy

pnpm -F @repo/remotion build   # bundle compositions to dist/
pnpm -F @repo/remotion render  # render TitleCard to out/title-card.mp4

The 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 audio

See the apps overview and the monorepo overview.

On this page