Prisma — Introducing Prisma

import React from "react";
import {
  AbsoluteFill,
  Easing,
  Sequence,
  interpolate,
  staticFile,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import {
  TransitionSeries,
  linearTiming,
  type TransitionPresentation,
  type TransitionPresentationComponentProps,
} from "@remotion/transitions";

import { KineticCenterBuild } from "@/components/remocn/kinetic-center-build";
import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";
import { ShaderGemSmoke } from "@/components/remocn/shader-gem-smoke";
import { RelationGraph } from "@/components/remocn/relation-graph";
import { PrismaStudio } from "@/components/remocn/prisma-studio";
import { pushThrough } from "@/components/remocn/push-through";
import { whipPan } from "@/components/remocn/whip-pan";
import { focusPull } from "@/components/remocn/focus-pull";
import { prismRefraction } from "@/components/remocn/prism-refraction";

import {
  BG,
  CARD,
  CODE_BG,
  CODE_BORDER,
  CODE_KEYWORD,
  CODE_MENU,
  CODE_MUTED,
  CODE_PROP,
  CODE_STRING,
  CODE_TAB,
  CODE_TEXT,
  CODE_TYPE,
  FAINT,
  HAIRLINE,
  INDIGO,
  INDIGO_DEEP,
  INDIGO_SOFT,
  INK,
  MONO,
  MUTED,
  SANS,
  TEAL_SOFT,
  clampOpts,
} from "./theme";
import { PrismaLockup, PrismaLockupDraw } from "./logo";
import { GettingStarted } from "./getting-started";

const easeOut = Easing.out(Easing.cubic);
const easeIn = Easing.in(Easing.cubic);

// ---------------------------------------------------------------------------
// Scene timings (frames @ 30fps). Transitions overlap.
//
// The motion score: enumeration always travels LEFT (the pain conveyor, the
// montage whip-pans, content arriving from the right and decelerating);
// narrative progress dives INTO the frame (push-through on the two big
// turns — the reveal, the getting started). Calm shifts are crossfades and
// focus-pulls. One gem-smoke field — smoke living inside the official prism
// silhouette — carries the whole video; the root score brightens it for the
// reveal and the outro, dims it under code.
// ---------------------------------------------------------------------------
const S_HOOK = 116; //    pain conveyor: three lines, right in / left out
const S_REVEAL = 148; //  the logo is written, then seen
const S_WHAT = 84; //    "Agent infrastructure for TypeScript"
const S_SCHEMA = 210; //  define once → schema → generate → typed client
const F_TYPESAFE = 80; // montage: type-safe queries
const F_RELATIONS = 92; // montage: typed relations
const F_MIGRATIONS = 80; // montage: declarative migrations
const F_DATABASES = 80; //  montage: every database
const F_STUDIO = 118; //   montage: browse your data (Prisma Studio)
const S_STATIONS =
  F_TYPESAFE + F_RELATIONS + F_MIGRATIONS + F_DATABASES + F_STUDIO;
const S_PLATFORM = 104; // ORM → Postgres → Compute
const S_PROOF = 120; //   47,300 GitHub stars
const S_START = 175; //   npx prisma init → generate → prisma.io
const S_OUTRO = 150; //   the lockup on the open field

const T_REFRACT = 38; // hook → reveal, getting started → outro
const T_X = 14; //       reveal → what
const T_FP = 16; //      what → schema
const T_WHIP = 12; //    schema → stations, station → station
const T_FP2 = 16; //     stations → platform
const T_X2 = 14; //      platform → proof
const T_PUSH2 = 18; //   proof → getting started

export const INTRODUCING_PRISMA_DURATION =
  S_HOOK +
  S_REVEAL +
  S_WHAT +
  S_SCHEMA +
  S_STATIONS +
  S_PLATFORM +
  S_PROOF +
  S_START +
  S_OUTRO -
  (T_REFRACT + T_X + T_FP + T_WHIP * 5 + T_FP2 + T_X2 + T_PUSH2 + T_REFRACT);

// Absolute frame where each sequence starts (for the root field score).
const F_REVEAL = S_HOOK - T_REFRACT;
const F_WHAT = F_REVEAL + S_REVEAL - T_X;
const F_SCHEMA = F_WHAT + S_WHAT - T_FP;
const F_STATIONS = F_SCHEMA + S_SCHEMA - T_WHIP;
const F_PLATFORM = F_STATIONS + S_STATIONS - T_WHIP * 4 - T_FP2;
const F_PROOF = F_PLATFORM + S_PLATFORM - T_X2;
const F_START = F_PROOF + S_PROOF - T_PUSH2;
const F_OUTRO = F_START + S_START - T_REFRACT;

// Readability scrim over the smoke field.
const Scrim: React.FC<{ strength?: number }> = ({ strength = 1 }) => (
  <AbsoluteFill
    style={{
      background: `radial-gradient(120% 120% at 50% 42%, rgba(19,20,32,${
        0.34 * strength
      }) 0%, rgba(19,20,32,${0.82 * strength}) 100%)`,
    }}
  />
);

// ===========================================================================
// Scene 1 — Hook. The pain conveyor: each line arrives from the right and
// decelerates, holds alone, then exits left as the next one arrives — one
// axis of travel for the whole problem section.
// ===========================================================================
const PAIN_LINES = ["Raw SQL strings", "No autocomplete", "Schema drift"];

const PainLine: React.FC<{ text: string; enter: number; last?: boolean }> = ({
  text,
  enter,
  last = false,
}) => {
  const frame = useCurrentFrame();
  const inP = interpolate(frame, [enter, enter + 10], [0, 1], {
    ...clampOpts,
    easing: easeOut,
  });
  // The last line's exit IS the cut's momentum — it accelerates left and
  // the push-through dive takes over.
  const outP = interpolate(frame, [enter + 22, enter + 31], [0, 1], {
    ...clampOpts,
    easing: easeIn,
  });
  const x = (1 - inP) * 52 - outP * 52;
  const blur = (1 - inP) * 6 + outP * 6;
  const opacity = inP * (last ? 1 - outP * 0.4 : 1 - outP);
  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
      <span
        style={{
          fontFamily: SANS,
          fontWeight: 500,
          fontSize: 54,
          color: INK,
          opacity,
          transform: `translateX(${x}px)`,
          filter: `blur(${blur}px)`,
        }}
      >
        {text}
      </span>
    </AbsoluteFill>
  );
};

const HookScene: React.FC = () => (
  <AbsoluteFill>
    {PAIN_LINES.map((text, i) => (
      <PainLine
        key={text}
        text={text}
        enter={6 + i * 30}
        last={i === PAIN_LINES.length - 1}
      />
    ))}
  </AbsoluteFill>
);

// ===========================================================================
// Scene 2 — The reveal. The logo is written before it is seen: the prism
// stroke-draws, the fill lands, the wordmark docks glyph by glyph.
// ===========================================================================
const RevealScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  // A slow settle-forward so the hold is never frozen.
  const drift = interpolate(frame, [0, durationInFrames], [1, 1.035]);
  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
      <div style={{ transform: `scale(${drift})` }}>
        <PrismaLockupDraw height={96} predrawn />
      </div>
    </AbsoluteFill>
  );
};

// ===========================================================================
// Scene 3 — What it is, in the site's own words.
// ===========================================================================
const WhatScene: React.FC = () => (
  <AbsoluteFill>
    <Sequence from={6}>
      <KineticCenterBuild
        text="Agent infrastructure for TypeScript"
        fontSize={54}
        fontWeight={500}
        color={INK}
      />
    </Sequence>
  </AbsoluteFill>
);

// ===========================================================================
// Scene 4 — The mechanism. Statement first, then the schema cascades in, the
// generate command flashes, and the generated client materializes with its
// type hovering over it — schema becomes types.
// ===========================================================================
const SCHEMA_LINES: Array<Array<[string, string]>> = [
  [
    ["model ", INK],
    ["User", INDIGO_SOFT],
    [" {", INK],
  ],
  [
    ["  id    ", MUTED],
    ["Int", TEAL_SOFT],
    ["     ", MUTED],
    ["@id @default(autoincrement())", FAINT],
  ],
  [
    ["  email ", MUTED],
    ["String", TEAL_SOFT],
    ["  ", MUTED],
    ["@unique", FAINT],
  ],
  [
    ["  name  ", MUTED],
    ["String?", TEAL_SOFT],
  ],
  [
    ["  posts ", MUTED],
    ["Post[]", TEAL_SOFT],
  ],
  [["}", INK]],
];

const CodeCard: React.FC<{
  title: string;
  width: number;
  children: React.ReactNode;
  style?: React.CSSProperties;
  bodyStyle?: React.CSSProperties;
}> = ({ title, width, children, style, bodyStyle }) => (
  <div
    style={{
      width,
      borderRadius: 14,
      border: `1px solid ${CODE_BORDER}`,
      background: CODE_BG,
      boxShadow: "0 1px 0 rgba(192,202,245,0.05) inset",
      overflow: "hidden",
      ...style,
    }}
  >
    <div
      style={{
        padding: "9px 16px",
        borderBottom: `1px solid ${CODE_BORDER}`,
        fontFamily: MONO,
        fontSize: 12.5,
        color: CODE_TAB,
        opacity: 0.85,
      }}
    >
      {title}
    </div>
    <div
      style={{
        padding: "14px 18px",
        fontFamily: MONO,
        fontSize: 15.5,
        lineHeight: 1.75,
        whiteSpace: "pre",
        ...bodyStyle,
      }}
    >
      {children}
    </div>
  </div>
);

const SchemaScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  const headIn = interpolate(frame, [2, 16], [0, 1], {
    ...clampOpts,
    easing: easeOut,
  });

  // The generate beat between the two cards.
  const GEN = "npx prisma generate";
  const GEN_START = 78;
  const genTyped = Math.max(
    0,
    Math.min(GEN.length, Math.floor((frame - GEN_START) * 1.5)),
  );
  const genOpacity = interpolate(frame, [GEN_START - 4, GEN_START], [0, 1], {
    ...clampOpts,
    ...{ extrapolateRight: "clamp" as const },
  });
  const genDone = genTyped >= GEN.length;
  const genCaret = !genDone || Math.floor(frame / 15) % 2 === 0;

  const clientIn = interpolate(frame, [104, 122], [0, 1], {
    ...clampOpts,
    easing: easeOut,
  });
  const chipIn = interpolate(frame, [132, 142], [0, 1], {
    ...clampOpts,
    easing: easeOut,
  });

  const exitP = interpolate(
    frame,
    [durationInFrames - 10, durationInFrames - 1],
    [0, 1],
    { ...clampOpts, easing: easeIn },
  );

  return (
    <AbsoluteFill
      style={{
        alignItems: "center",
        justifyContent: "center",
        gap: 14,
        opacity: 1 - exitP,
      }}
    >
      {/* Statement first. */}
      <span
        style={{
          fontFamily: SANS,
          fontWeight: 500,
          fontSize: 34,
          color: INK,
          opacity: headIn,
          transform: `translateY(${(1 - headIn) * 12}px)`,
          filter: `blur(${(1 - headIn) * 6}px)`,
          marginBottom: 6,
        }}
      >
        Define once — generate the client
      </span>

      {/* The schema assembles line by line. */}
      <CodeCard title="schema.prisma" width={470}>
        {SCHEMA_LINES.map((segments, i) => {
          const at = 16 + i * 4;
          const p = interpolate(frame, [at, at + 9], [0, 1], {
            ...clampOpts,
            easing: easeOut,
          });
          return (
            <div
              key={i}
              style={{
                opacity: p,
                transform: `translateY(${(1 - p) * 7}px)`,
                filter: p < 1 ? `blur(${(1 - p) * 3}px)` : undefined,
              }}
            >
              {segments.map(([text, color], j) => (
                <span key={j} style={{ color }}>
                  {text}
                </span>
              ))}
            </div>
          );
        })}
      </CodeCard>

      {/* The generate beat. */}
      <div
        style={{
          fontFamily: MONO,
          fontSize: 15,
          color: CODE_TEXT,
          opacity: genOpacity,
          height: 26,
        }}
      >
        <span style={{ color: CODE_MUTED }}>$ </span>
        {GEN.slice(0, genTyped)}