grid-pixelate-wipe

1import type { TransitionPresentation } from "@remotion/transitions";
2import { useMemo } from "react";
3import { AbsoluteFill, Easing, interpolate } from "remotion";
4import {
5  resolveTransitionTiming,
6  transitionPhase,
7  type TransitionVariant,
8} from "@/remotion/lib/transition-timing";
9 
10export type GridPixelateOrder =
11  | "from-left"
12  | "from-top"
13  | "diagonal"
14  | "center";
15 
16export type GridPixelateShape = "square" | "dot";
17 
18export type GridPixelateWipeProps = {
19  cols?: number;
20  rows?: number;
21  /** Which corner or axis the cells light up from. */
22  order?: GridPixelateOrder;
23  shape?: GridPixelateShape;
24  /** 0 pops every cell together; 1 spreads them across the whole window. */
25  stagger?: number;
26};
27 
28function cellRank(
29  order: GridPixelateOrder,
30  col: number,
31  row: number,
32  cols: number,
33  rows: number,
34): number {
35  const u = cols <= 1 ? 0 : col / (cols - 1);
36  const v = rows <= 1 ? 0 : row / (rows - 1);
37 
38  switch (order) {
39    case "from-left":
40      return u;
41    case "from-top":
42      return v;
43    case "diagonal":
44      return (u + v) / 2;
45    case "center":
46      return Math.min(1, Math.hypot(u - 0.5, v - 0.5) / 0.7071);
47  }
48}
49 
50function cellOpacity(
51  progress: number,
52  rank: number,
53  stagger: number,
54): number {
55  const revealAt = rank * stagger;
56  const span = Math.max(1 - stagger, 0.001);
57  const raw = Math.min(1, Math.max(0, (progress - revealAt) / span));
58 
59  return interpolate(raw, [0, 1], [0, 1], {
60    easing: Easing.out(Easing.cubic),
61    extrapolateLeft: "clamp",
62    extrapolateRight: "clamp",
63  });
64}
65 
66function buildGridMask(
67  progress: number,
68  cols: number,
69  rows: number,
70  order: GridPixelateOrder,
71  shape: GridPixelateShape,
72  stagger: number,
73): string {
74  const cellW = 100 / cols;
75  const cellH = 100 / rows;
76  const cells: string[] = [];
77 
78  for (let row = 0; row < rows; row++) {
79    for (let col = 0; col < cols; col++) {
80      const opacity = cellOpacity(
81        progress,
82        cellRank(order, col, row, cols, rows),
83        stagger,
84      );
85 
86      if (opacity < 0.004) {
87        continue;
88      }
89 
90      const alpha = opacity.toFixed(3);
91 
92      if (shape === "dot") {
93        // The dot grows with its own reveal, so the frame fills in as a field
94        // of expanding points rather than a grid of fading squares.
95        const r = (Math.min(cellW, cellH) / 2) * opacity;
96        cells.push(
97// … truncated