index.tsx

import React, { useCallback, useRef } from "react";
import {
  AbsoluteFill,
  Easing,
  HtmlInCanvas,
  type HtmlInCanvasOnInit,
  type HtmlInCanvasOnPaint,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import {
  type BarSlotGlState,
  initBarSlotGl,
  initPaperGl,
  type PaperGlState,
  paintBarSlotGl,
  paintPaperGl,
} from "./gl";

/** Must match the centered paper `<div>`. */
const PAPER_WIDTH_PX = 1000;
const PAPER_HEIGHT_PX = Math.round(560 * 1.3 * 1.1);

/** Must match `PaperBarChartOverlay` layout (paper-local px). */
const CHART_PAD = { top: 48, left: 44, right: 44, bottom: 32 } as const;
/** Bar column area height; bars use % of this — scale uniformly to change bar height. */
const CHART_ROW_H = Math.round(228 * 1.75);
/** Narrower bars vs full flex split; extra room → larger `gap` below. */
const CHART_BAR_WIDTH_PCT = 9.5;
const CHART_BAR_GAP_PX = 16;
const CHART_BLACK_H = 3;

/** Step animation time to every N frames (holds between steps). */
const ANIMATION_FRAME_QUANT = 3;
function animationTimeFrame(frame: number): number {
  return Math.floor(frame / ANIMATION_FRAME_QUANT) * ANIMATION_FRAME_QUANT;
}

/** GL-style UV bounds (u,v bottom-left origin): paper tile in normalized framebuffer coords. */
function paperUvRect(
  width: number,
  height: number,
): {
  u0: number;
  v0: number;
  u1: number;
  v1: number;
} {
  const u0 = (width - PAPER_WIDTH_PX) / (2 * width);
  const u1 = u0 + PAPER_WIDTH_PX / width;
  const yTopDom = (height - PAPER_HEIGHT_PX) / 2;
  const yBotDom = yTopDom + PAPER_HEIGHT_PX;
  const v1 = 1 - yTopDom / height;
  const v0 = 1 - yBotDom / height;
  return { u0, v0, u1, v1 };
}

/** [0, 1) — stable for a given integer input (Remotion-friendly). */
function hash01(n: number): number {
  const s = Math.sin(n * 127.123 + 311.741) * 43758.5453123;
  return s - Math.floor(s);
}

function maxPaperGuvRadius(panX: number, panY: number): number {
  let r = 0;
  for (const gx of [0, 1] as const) {
    for (const gy of [0, 1] as const) {
      const px = gx - 0.5 - panX;
      const py = gy - 0.5 - panY;
      r = Math.max(r, Math.hypot(px, py));
    }
  }
  return r;
}

const GRUNGE_COVER_MARGIN = 1.07;

function grungeTransformForSecond(sec: number): {
  scale: number;
  rot: number;
  panX: number;
  panY: number;
} {
  const panX = (hash01(sec * 61.7 + 8.4) - 0.5) * 0.48;
  const panY = (hash01(sec * 29.2 + 5.5) - 0.5) * 0.48;
  const rot = (hash01(sec * 47.13 + 2.1) - 0.5) * 1.45;
  const rMax = maxPaperGuvRadius(panX, panY);
  const scaleMin = 2 * rMax * GRUNGE_COVER_MARGIN;
  const zoomExtra = 0.88 + 0.52 * hash01(sec * 19.31 + 0.7);
  const scale = scaleMin * zoomExtra;
  return { scale, rot, panX, panY };
}

const BAR_COUNT = 6;
/** Scales last bar height vs `targetPct` (other bars use 1). */
const LAST_BAR_HEIGHT_MULT = 1.3;
/** Row + last bar `HtmlInCanvas` height so 100%…148% bar fits without clipping. */
const CHART_BAR_ROW_H_PX = Math.round(CHART_ROW_H * LAST_BAR_HEIGHT_MULT);
/** Frames between each bar starting its grow animation (left → right). */
const BAR_STAGGER_FRAMES = 5;
/** Leftmost year label (one per bar, ascending). */
const YEAR_LABEL_START = 2020;
const CHART_YEAR_ROW_MARGIN_TOP_PX = 10;

function barRevealProgress(
  frame: number,
  fps: number,
  barIndex: number,
): number {
  return Math.min(
    spring({
      frame: Math.max(0, frame - barIndex * BAR_STAGGER_FRAMES),
      fps,
      config: {
        damping: 17,
        mass: 0.72,
      },
    }),
    1,
  );
}

/** Halftone on bars (DOM → sampled by WebGL pass-through). Pitch sets repeat size. */
const BAR_DOT_RADIUS_PX = 2.7;
const BAR_DOT_PITCH_PX = 6.5;
const CHART_BAR_FILL = "#0f84ff";
const CHART_BAR_DOT_HIGHLIGHT = "rgba(205, 245, 255, 0.52)";
/** Subtle gray bars (non-last); last bar stays `CHART_BAR_FILL` blue. */
const CHART_BAR_FILL_MUTED = "#c9ced6";
const CHART_BAR_DOT_HIGHLIGHT_MUTED = "rgba(248, 249, 251, 0.5)";
/** Ax baseline — blue slate (matches bars, softer than pure black). */
const CHART_BASELINE_COLOR = "#3d4f62";

function barDotStyleForIndex(barIndex: number): React.CSSProperties {
  const last = barIndex === BAR_COUNT - 1;
  const fill = last ? CHART_BAR_FILL : CHART_BAR_FILL_MUTED;
  const hi = last ? CHART_BAR_DOT_HIGHLIGHT : CHART_BAR_DOT_HIGHLIGHT_MUTED;
  return {
    backgroundColor: fill,
    backgroundImage: `radial-gradient(circle at 50% 50%, ${hi} ${BAR_DOT_RADIUS_PX}px, transparent ${BAR_DOT_RADIUS_PX + 0.15}px)`,
    backgroundSize: `${BAR_DOT_PITCH_PX}px ${BAR_DOT_PITCH_PX}px`,
  };
}

/** Steeper → shorter bars on the left, faster growth toward the right (exp curve). */
const BAR_HEIGHT_EXP_K = 2.8;

const innerChartWidthPx = PAPER_WIDTH_PX - CHART_PAD.left - CHART_PAD.right;
const BAR_SLOT_WIDTH_PX = Math.round(
  innerChartWidthPx * (CHART_BAR_WIDTH_PCT / 100),
);

type BarSlotCanvasProps = {
  barIndex: number;
  targetPct: number;
};

/**
 * One `HtmlInCanvas` per bar. Slot is `CHART_ROW_H` (normal) or
 * `CHART_BAR_ROW_H_PX` (last) so a “tall” last bar isn’t clipped. Inner height
 * is `targetPct * reveal`% of the slot; last bar’s extra height is the taller slot.
 */
const BarSlotCanvas: React.FC<BarSlotCanvasProps> = ({
  barIndex,
  targetPct,
}) => {
  const frame = animationTimeFrame(useCurrentFrame());
  const { fps } = useVideoConfig();
  const gpuRef = useRef<BarSlotGlState | null>(null);

  const reveal = barRevealProgress(frame, fps, barIndex);
  const applyShine = barIndex === BAR_COUNT - 1;

  const slotW = BAR_SLOT_WIDTH_PX;
  const slotH = barIndex === BAR_COUNT - 1 ? CHART_BAR_ROW_H_PX : CHART_ROW_H;
  const heightPct = targetPct * reveal;

  const onInit: HtmlInCanvasOnInit = useCallback(
    ({ canvas }) => {
      const { gpu, cleanup } = initBarSlotGl(canvas, applyShine);
      gpuRef.current = gpu;
      return () => {
        cleanup();
        gpuRef.current = null;
      };
    },
    [applyShine],
  );

  const onPaint: HtmlInCanvasOnPaint = useCallback(
    ({ elementImage }) => {
      const gpu = gpuRef.current;
      if (!gpu) {
        return;
      }
      paintBarSlotGl(gpu, elementImage, { applyShine, frame });
    },
    [applyShine, frame],
  );

  return (
    <div
      style={{
        width: slotW,
        height: slotH,
        flexShrink: 0,
        overflow: "hidden",
      }}
    >
      <HtmlInCanvas
        width={slotW}
        height={slotH}
        onInit={onInit}
        onPaint={onPaint}
      >
        <div
          style={{
            width: "100%",
            height: "100%",
            backgroundColor: "transparent",
            display: "flex",
            flexDirection: "column",
            justifyContent: "flex-end",
            alignItems: "stretch",
          }}
        >
          <div
            style={{
              width: "100%",
              height: `${heightPct}%`,
              minHeight: 2,
              borderTopLeftRadius: 3,
              borderTopRightRadius: 3,
              borderBottomLeftRadius: 0,
              borderBottomRightRadius: 0,
              overflow: "hidden",
              flexShrink: 0,
              ...barDotStyleForIndex(barIndex),
            }}
          />
        </div>
      </HtmlInCanvas>
    </div>
  );
};

const PaperBarChartOverlay: React.FC = () => {
  const frame = animationTimeFrame(useCurrentFrame());
  const { fps } = useVideoConfig();

  const minBarPct = 50;
  const maxBarPct = 100;
  const heightsPct = Array.from({ length: BAR_COUNT }, (_, i) => {
    const t = BAR_COUNT > 1 ? i / (BAR_COUNT - 1) : 0;
    const eNum = Math.exp(BAR_HEIGHT_EXP_K * t) - 1;
    const eDen = Math.exp(BAR_HEIGHT_EXP_K) - 1;
    const u = eDen > 0 ? eNum / eDen : t;
    return minBarPct + u * (maxBarPct - minBarPct);
  });

  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end",
        padding: `${CHART_PAD.top}px ${CHART_PAD.left}px ${CHART_PAD.bottom}px`,
        boxSizing: "border-box",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-end",
          justifyContent: "center",
          gap: CHART_BAR_GAP_PX,
          height: CHART_BAR_ROW_H_PX,
          marginBottom: 0,
          flexShrink: 0,
        }}
      >
        {heightsPct.map((targetPct, i) => (
          <BarSlotCanvas key={i} barIndex={i} targetPct={targetPct} />
        ))}
      </div>
      <div
        style={{
          height: CHART_BLACK_H,
          width: "calc(80%)",
          marginLeft: -14,
          marginRight: -14,
          backgroundColor: CHART_BASELINE_COLOR,
          borderRadius: 1,
          flexShrink: 0,
          alignSelf: "center",
        }}
      />
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "flex-start",
          gap: CHART_BAR_GAP_PX,
          marginTop: CHART_YEAR_ROW_MARGIN_TOP_PX,
          flexShrink: 0,
          width: "100%",
        }}
      >
        {Array.from({ length: BAR_COUNT }, (_, i) => {
          const reveal = barRevealProgress(frame, fps, i);
          return (
            <div
              key={`year-${i}`}
              style={{
                flex: "0 0 auto",
                width: `${CHART_BAR_WIDTH_PCT}%`,
                minWidth: 0,
                textAlign: "center",
              }}
            >
              <span
                style={{
                  display: "inline-block",
                  opacity: reveal,
                  fontSize: 28,
                  fontWeight: 500,
                  color: "#1c1c1c",
                  fontFamily: 'Georgia, "Times New Roman", Times, serif',
                  fontVariantNumeric: "tabular-nums",
                  letterSpacing: "0.01em",
                }}
              >
                {YEAR_LABEL_START + i}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/** Background + sheet only (sibling chart layer draws on top). */
const PaperSheetDom: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#eaeaea",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          width: PAPER_WIDTH_PX,
          height: PAPER_HEIGHT_PX,
          backgroundColor: "#fafaf8",
          borderRadius: 3,
          boxShadow:
            "0 18px 42px rgba(25, 22, 18, 0.22), 0 2px 0 rgba(255,255,255,0.35) inset",
        }}
      />
    </AbsoluteFill>
  );
};

/** Chart aligned to the same paper slot as `PaperSheetDom` (transparent outside). */
const BarChartDom: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "transparent",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          position: "relative",
          width: PAPER_WIDTH_PX,
          height: PAPER_HEIGHT_PX,
        }}
      >
        <PaperBarChartOverlay />
      </div>
    </AbsoluteFill>
  );
};

/** Serif title at the top of the chart region; grain applied via `PaperGrainHtmlInCanvas`. */
const ChartTitleDom: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "transparent",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          position: "relative",
          width: PAPER_WIDTH_PX,
          height: PAPER_HEIGHT_PX,
        }}
      >
        <div
          style={{
            position: "absolute",
            left: CHART_PAD.left,
            right: CHART_PAD.right,
            top: CHART_PAD.top - 20,
            fontFamily: 'Georgia, "Times New Roman", Times, serif',
            fontSize: 57,
            fontWeight: 600,
            letterSpacing: "-0.02em",
            color: "#1c1c1c",
            textAlign: "center",
            lineHeight: 1.25,
          }}
        >
          Videos generated
        </div>
      </div>
    </AbsoluteFill>
  );
};

type PaperGrainHtmlInCanvasProps = {
  children: React.ReactNode;
};

/** Rasters children and applies the same paper-region grain + grunge as the sheet layer. */
const PaperGrainHtmlInCanvas: React.FC<PaperGrainHtmlInCanvasProps> = ({
  children,
}) => {
  const frame = animationTimeFrame(useCurrentFrame());
  const { width, height, fps } = useVideoConfig();
  const gpuRef = useRef<PaperGlState | null>(null);
  const paperUv = paperUvRect(width, height);

  const grain = 0.045;
  const grunge = 0.42;

  const onInit: HtmlInCanvasOnInit = useCallback(({ canvas }) => {
    const { gpu, cleanup } = initPaperGl(canvas);
    gpuRef.current = gpu;
    return () => {
      cleanup();
      gpuRef.current = null;
    };
  }, []);

  const { u0, v0, u1, v1 } = paperUv;
  const onPaint: HtmlInCanvasOnPaint = useCallback(
    ({ elementImage }) => {
      const gpu = gpuRef.current;
      if (!gpu) {
        return;
      }
      const posterSecond = Math.floor(frame / fps);
      const gx = grungeTransformForSecond(posterSecond);
      paintPaperGl(gpu, elementImage, {
        frame,
        grain,
        grunge,
        paperUv: { u0, v0, u1, v1 },
        grungeScale: gx.scale,
        grungeRot: gx.rot,
        grungePanX: gx.panX,
        grungePanY: gx.panY,
      });
    },
    [frame, fps, grain, grunge, u0, v0, u1, v1],
  );

  return (
    <AbsoluteFill style={{ pointerEvents: "none" }}>
      <HtmlInCanvas
        width={width}
        height={height}
        onInit={onInit}
        onPaint={onPaint}
      >
        {children}
      </HtmlInCanvas>
    </AbsoluteFill>
  );
};

const PaperHtmlInCanvas: React.FC = () => (
  <PaperGrainHtmlInCanvas>
    <PaperSheetDom />
  </PaperGrainHtmlInCanvas>
);

const TitleHtmlInCanvas: React.FC = () => (
  <PaperGrainHtmlInCanvas>
    <ChartTitleDom />
  </PaperGrainHtmlInCanvas>
);

export const CenteredWhitePaperComposition: React.FC = () => {
  const frame = useCurrentFrame();

  const translation = interpolate(frame, [0, 30], [1080, 0], {
    extrapolateRight: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#eaeaea",
      }}
    >
      <AbsoluteFill
        style={{
          width: "100%",
          height: "100%",
          translate: `0 ${translation}px`,
        }}
      >
        <PaperHtmlInCanvas />
        <TitleHtmlInCanvas />
        <AbsoluteFill style={{ pointerEvents: "none" }}>
          <BarChartDom />
        </AbsoluteFill>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};