emocn
Blog

Making a launch video for Prisma

Another unofficial one — Prisma didn't commission this. Forty-six seconds, and the whole video happens inside the logo: an indigo-and-teal smoke field lives behind everything, masked to the prism silhouette, so every beat plays out within the brand mark itself.

The storyboard

  1. The pain conveyor — "Raw SQL strings" / "No autocomplete" / "Schema drift", each arriving from the right, holding alone, exiting left.
  2. The reveal — a beam of white light strikes the prism outline, an indigo-to-teal spectrum fan swallows the scene, and the official mark draws itself on: contour first, fill rising, then the wordmark docks in glyph by glyph.
  3. What it is — the homepage's own words, "Agent infrastructure for TypeScript", assembling word by word.
  4. The mechanism — the one idea the product rests on, acted out: schema.prisma cascades line by line, npx prisma generate flashes, and the generated client appears with the : User[] inlay hint popping in — the guarantee shown the way your editor shows it.
  5. The montage — five stations whip-panning left: a live autocomplete menu fed by the schema, two model cards with the relation curve drawing itself, a migration applying, the provider value flipping through five databases, and a Studio table populating and saving a record.
  6. The platform — "Start with the ORM / Add Postgres when you need it / Deploy on Compute."
  7. The proof — a counter easing into the real GitHub star count.
  8. The action — a terminal types the real npx prisma init / npx prisma generate flow with the CLI's real answers, then yields to "Start at prisma.io".
  9. The lockup — the field opens to full brightness — the smoke the whole video lived inside, finally seen at scale — and the official lockup stands alone.

Director's notes

Tokens come from the live stylesheet, not from memory. The canvas, the ink, the indigo ramp, the Postgres teal — all lifted from prisma.io's CSS the day the video was built. Even the code cards run Prisma's own editor theme. A brand video that eyeballs its colors is off by exactly enough to feel wrong.

One branded transition, used exactly twice. The refraction — light strikes the prism, the spectrum fan opens, folds back, and the refracting element becomes the logo — appears at the opening turn and the final stamp, nowhere else. A signature move you repeat five times stops being a signature.

Nothing appears without a direction. Enumeration always travels left: the pain conveyor, the five montage stations, content arriving from the right and decelerating. Narrative turns dive into the frame; calm shifts crossfade. When every scene obeys the same grammar, forty-six seconds feel composed instead of assembled.

The prompt

The brief, as a prompt (validated against a clean project + the remocn skill before publishing):

I'm making an unofficial launch video for Prisma with remocn (remocn.dev)
in a Remotion project — install anything you need with
`npx shadcn add @remocn/<name>`.
 
Build a ~46-second, 1280×720, 30fps introducing spot:
 
1. Pain conveyor — "Raw SQL strings" / "No autocomplete" / "Schema drift",
   each arriving from the right, holding alone, exiting left.
2. Reveal — a beam of light strikes the prism outline, an indigo-to-teal
   spectrum fan swallows the scene, and the official Prisma mark draws
   itself on — contour first, fill rising — then the wordmark docks in
   glyph by glyph.
3. What it is — "Agent infrastructure for TypeScript" assembling word by
   word.
4. Mechanism — "Define once — generate the client": schema.prisma cascades
   line by line, `npx prisma generate` flashes, and the generated client
   appears with a `: User[]` editor inlay hint.
5. Montage — five whip-pan stations traveling left: a live autocomplete
   menu fed by the schema, two model cards with the @relation curve
   drawing itself, a migration applying, the provider value flipping
   through five databases, and a Studio table populating and saving a
   record.
6. Platform — "Start with the ORM / Add Postgres when you need it /
   Deploy on Compute" stacking as a block.
7. Proof — a counter easing into the real GitHub star count, verified the
   day you build.
8. Action — a terminal types the real `npx prisma init` and
   `npx prisma generate` flow with the CLI's real answers, yielding to
   "Start at prisma.io".
9. Lockup — the official mark alone as the background field opens to full
   brightness.
 
Style: tokens lifted from prisma.io's live stylesheet — #131420 canvas,
#f9fafb ink, the indigo ramp and the Postgres teal; Inter everywhere,
Geist Mono for code; Prisma's own editor theme on every code card. The
whole video lives inside the brand — a gem-smoke shader field masked to
the prism silhouette carries everything, brightening for the reveal and
the outro, dimming under code. The refraction transition appears exactly
twice: the opening turn and the final stamp. Enumeration always travels
left; nothing appears without a direction. Use the official press-kit
logo paths, never redraw them.

Make one for your product

The generic recipe is Launch video; the brand-matching trick — pointing your agent at your own tokens — is Your brand.