tidaldb/demo/src/Walkthrough.tsx

import React from 'react';
import {
  AbsoluteFill,
  Img,
  Sequence,
  interpolate,
  staticFile,
  useCurrentFrame,
} from 'remotion';
import manifest from '../capture-manifest.json';
import { FPS, HEIGHT, WIDTH, timeline, type Scene } from './scenes';

/**
 * Presentation only. Every pixel of evidence in here is a promoted Playwright
 * capture; this file controls pacing, framing, and captions and nothing else.
 * It must never composite, crop, or annotate in a way that changes what the
 * underlying screen said.
 */

const COLORS = {
  bg: '#0a0d13',
  panel: '#121821',
  line: '#243044',
  text: '#e3e9f2',
  dim: '#8797ad',
  accent: '#4da3ff',
  good: '#56d364',
  dream: '#d29922',
} as const;

const SANS =
  'ui-sans-serif, -apple-system, "Segoe UI", system-ui, "Helvetica Neue", sans-serif';
const MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace';

type CaptureEntry = {
  id: string;
  file: string;
  width: number;
  height: number;
  audienceVerdict: string;
  auditStatus: string;
};

const captures: Record<string, CaptureEntry> = Object.fromEntries(
  (manifest.captures as CaptureEntry[]).map((c) => [c.id, c]),
);

/** Reject at render time rather than shipping a scene with no evidence. */
function requireCapture(captureId: string): CaptureEntry {
  const entry = captures[captureId];
  if (!entry) throw new Error(`capture ${captureId} is not in the manifest`);
  if (entry.auditStatus !== 'pass' || entry.audienceVerdict !== 'perfect') {
    throw new Error(
      `capture ${captureId} is ${entry.auditStatus}/${entry.audienceVerdict}; only a ` +
        `passing, perfect capture may be rendered`,
    );
  }
  return entry;
}

/**
 * Frames of cross-dissolve between scenes — 10 at 30fps is 333ms, inside the
 * 200-400ms micro-transition range.
 */
export const OVERLAP = 10;

/**
 * Fade IN only, never out.
 *
 * The first cut of this composition faded each scene out over its last 8 frames
 * while the next faded in from its own frame 0. Because Remotion Sequences do
 * not overlap by default, both sat at opacity 0 on the boundary frame and the
 * video blinked to bare background between every scene. Scenes now start
 * OVERLAP frames early and rise on top of the outgoing one, which is a real
 * cross-dissolve with no empty frame.
 */
function useEntrance() {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, OVERLAP], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const lift = interpolate(frame, [0, OVERLAP + 4], [12, 0], {
    extrapolateRight: 'clamp',
  });
  return { opacity, lift };
}

const RungBadge: React.FC<{ rung: Scene['rung'] }> = ({ rung }) => (
  <span
    style={{
      fontFamily: MONO,
      fontSize: 20,
      letterSpacing: 1.6,
      textTransform: 'uppercase',
      color: rung === 'dream' ? COLORS.dream : COLORS.dim,
      border: `1px solid ${rung === 'dream' ? COLORS.dream : COLORS.line}`,
      borderRadius: 999,
      padding: '6px 16px',
    }}
  >
    {rung}
  </span>
);

const TitleScene: React.FC<{ scene: Extract<Scene, { kind: 'title' | 'recap' }> }> = ({
  scene,
}) => {
  const { opacity, lift } = useEntrance();
  return (
    <AbsoluteFill
      style={{
        backgroundColor: COLORS.bg,
        justifyContent: 'center',
        padding: '0 150px',
        opacity,
        transform: `translateY(${lift}px)`,
      }}
    >
      <div
        style={{
          width: 96,
          height: 5,
          backgroundColor: scene.kind === 'recap' ? COLORS.good : COLORS.accent,
          marginBottom: 44,
        }}
      />
      <h1
        style={{
          margin: 0,
          fontFamily: SANS,
          fontSize: 78,
          lineHeight: 1.08,
          fontWeight: 680,
          letterSpacing: -1.6,
          color: COLORS.text,
        }}
      >
        {scene.heading}
      </h1>
      <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 20 }}>
        {scene.lines.map((line) => (
          <p
            key={line}
            style={{
              margin: 0,
              fontFamily: SANS,
              fontSize: 34,
              lineHeight: 1.42,
              color: COLORS.dim,
              maxWidth: 1500,
            }}
          >
            {line}
          </p>
        ))}
      </div>
      {scene.footer ? (
        <p
          style={{
            marginTop: 56,
            fontFamily: MONO,
            fontSize: 24,
            color: COLORS.dim,
            opacity: 0.82,
          }}
        >
          {scene.footer}
        </p>
      ) : null}
    </AbsoluteFill>
  );
};

const ProofScene: React.FC<{ scene: Extract<Scene, { kind: 'proof' }> }> = ({ scene }) => {
  const { opacity, lift } = useEntrance();
  const capture = requireCapture(scene.captureId);

  // Reserve fixed bands for the heading and caption, then fit the capture into
  // whatever is left, preserving its aspect ratio. Tall captures (the 1600x1800
  // dashboard) letterbox instead of being squashed or cropped.
  const headerBand = 76;
  const captionBand = 104;
  const availableWidth = WIDTH - 160;
  const availableHeight = HEIGHT - headerBand - captionBand;
  const scale = Math.min(availableWidth / capture.width, availableHeight / capture.height);
  const renderWidth = Math.round(capture.width * scale);
  const renderHeight = Math.round(capture.height * scale);

  return (
    <AbsoluteFill style={{ backgroundColor: COLORS.bg, opacity }}>
      <div
        style={{
          height: headerBand,
          padding: '30px 80px 0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'flex-end',
          gap: 18,
          transform: `translateY(${lift}px)`,
        }}
      >
        <span style={{ fontFamily: MONO, fontSize: 22, color: COLORS.dim }}>
          {scene.capabilityId}
        </span>
        <RungBadge rung={scene.rung} />
      </div>

      <div
        style={{
          flex: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div
          style={{
            width: renderWidth,
            height: renderHeight,
            borderRadius: 10,
            overflow: 'hidden',
            border: `1px solid ${COLORS.line}`,
            boxShadow: '0 24px 70px rgba(0,0,0,0.55)',
          }}
        >
          <Img
            src={staticFile(capture.file)}
            style={{ width: '100%', height: '100%', display: 'block' }}
          />
        </div>
      </div>

      <div
        style={{
          height: captionBand,
          padding: '0 80px 30px',
          display: 'flex',
          alignItems: 'flex-end',
        }}
      >
        <p
          style={{
            margin: 0,
            fontFamily: SANS,
            fontSize: 27,
            lineHeight: 1.42,
            color: scene.rung === 'dream' ? COLORS.text : COLORS.dim,
            maxWidth: 1660,
            borderLeft: `3px solid ${scene.rung === 'dream' ? COLORS.dream : COLORS.line}`,
            paddingLeft: 22,
          }}
        >
          {scene.caption}
        </p>
      </div>
    </AbsoluteFill>
  );
};

export const Walkthrough: React.FC = () => (
  <AbsoluteFill style={{ backgroundColor: COLORS.bg }}>
    {timeline.map(({ scene, from, frames }) => (
      // Start early and run long by OVERLAP so the incoming scene dissolves
      // over the outgoing one. End times are unchanged, so total duration and
      // every storyboard hold stay exactly as specified.
      <Sequence
        key={scene.id}
        from={Math.max(0, from - (from > 0 ? OVERLAP : 0))}
        durationInFrames={frames + (from > 0 ? OVERLAP : 0)}
        name={scene.id}
      >
        {scene.kind === 'proof' ? (
          <ProofScene scene={scene} />
        ) : (
          <TitleScene scene={scene} />
        )}
      </Sequence>
    ))}
  </AbsoluteFill>
);

export const config = { FPS, WIDTH, HEIGHT };