Reveal

1
"use client";
2

3
import { cva, type VariantProps } from "class-variance-authority";
4
import {
5
  AnimatePresence,
6
  motion,
7
  type Transition,
8
  useReducedMotion,
9
} from "motion/react";
10
import {
11
  type PropsWithChildren,
12
  useEffect,
13
  useMemo,
14
  useRef,
15
  useState,
16
} from "react";
17

18
import { cn } from "@/lib/utils";
19

20
const revealVariants = cva("block", {
21
  variants: {
22
    pattern: {
23
      default: "",
24
      diagonal: "",
25
      radial: "",
26
      random: ""
27
    },
28
    size: {
29
      default: "",
30
      sm: "",
31
      md: "",
32
      lg: ""
33
    },
34
    variant: {
35
      default: "bg-background",
36
      card: "bg-card",
37
      popover: "bg-popover",
38
      muted: "bg-muted",
39
      primary: "bg-primary",
40
      success: "bg-success",
41
      danger: "bg-danger",
42
      warning: "bg-warning",
43
      info: "bg-info",
44
      foreground: "bg-foreground",
45
      primaryForeground: "bg-primary-foreground",
46
      successForeground: "bg-success-foreground",
47
      dangerForeground: "bg-danger-foreground",
48
      warningForeground: "bg-warning-foreground",
49
      infoForeground: "bg-info-foreground",
50
    },
51
  },
52
  defaultVariants: {
53
    pattern: "default",
54
    size: "default",
55
    variant: "default",
56
  },
57
});
58

59
  /**
60
   * Sweep order:
61
   * - "radial": from the center outwards (iris, RPG dialogue box look)
62
   * - "diagonal": from one corner to the other
63
   * - "random": cluttered, more "static"
64
   */
65
export type RevealPattern = NonNullable<VariantProps<typeof revealVariants>["pattern"]>;
66

67
/**
68
 * Calculate, for a grid of cols x rows, a delay per cell by combining
69
 * an ordered pattern (radial/diagonal) with a small random jitter.
70
 */
71
function useCellDelays(
72
  cols: number,
73
  rows: number,
74
  maxDelay: number,
75
  pattern: RevealPattern,
76
  jitter: number,
77
) {
78
  return useMemo(() => {
79
    const count = cols * rows;
80
    if (count === 0) return [];
81

82
    const centerCol = (cols - 1) / 2;
83
    const centerRow = (rows - 1) / 2;
84
    const maxDist =
85
      pattern === "radial"
86
        ? Math.hypot(
87
            Math.max(centerCol, cols - 1 - centerCol),
88
            Math.max(centerRow, rows - 1 - centerRow),
89
          ) || 1
90
        : cols - 1 + (rows - 1) || 1;
91

92
    const values: number[] = [];
93
    for (let row = 0; row < rows; row++) {
94
      for (let col = 0; col < cols; col++) {
95
        const order =
96
          pattern === "radial"
97
            ? Math.hypot(col - centerCol, row - centerRow) / maxDist
98
            : (pattern === "diagonal" || pattern === "default")
99
              ? (col + row) / maxDist
100
              : Math.random();
101
        const noise = (Math.random() - 0.5) * jitter;
102
        values.push(Math.min(1, Math.max(0, order + noise)) * maxDelay);
103
      }
104
    }
105
    return values;
106
    // eslint-disable-next-line react-hooks/exhaustive-deps
107
  }, [cols, rows, maxDelay, pattern, jitter]);
108
}
109

110
/**
111
 * The sizes for the pixels
112
 */
113
const PIXEL_SIZES : Record<NonNullable<VariantProps<typeof revealVariants>["size"]>, number> = {
114
  "default": 2,
115
  "sm": 1,
116
  "md": 2,
117
  "lg": 4,
118
};
119

120
export function Reveal({
121
  show,
122
  children,
123
  className,
124
  contentClassName,
125
  duration = 0.55,
126
  jitter = 0.15,
127
  maxCells = 400,
128
  onExitComplete,
129
  pattern = "default",
130
  size = "default",
131
  variant = "default",
132
}: {
133
  /** Controls whether the content is visible or not */
134
  show: boolean;
135
  className?: string;
136
  contentClassName?: string;
137
  /** Total duration of the transition, in seconds */
138
  duration?: number;
139
  /** how much noise/jitter is mixed in on top of the ordered pattern (0 = perfect, 1 = chaotic) */
140
  jitter?: number;
141
  /** Maximum number of rendered blocks (for performance and to avoid a "salt & pepper" look) */
142
  maxCells?: number;
143
  onExitComplete?: () => void;
144
} & VariantProps<typeof revealVariants> &
145
  PropsWithChildren) {
146
  const containerRef = useRef<HTMLDivElement>(null);
147
  const [grid, setGrid] = useState({ cols: 0, rows: 0 });
148
  const reducedMotion = useReducedMotion();
149

150
  useEffect(() => {
151
    const el = containerRef.current;
152
    if (!el) return;
153

154
    const update = () => {
155
      const { width, height } = el.getBoundingClientRect();
156
      if (!width || !height) return;
157

158
      let cols = Math.max(1, Math.round(width / PIXEL_SIZES[size ?? "default"]));
159
      let rows = Math.max(1, Math.round(height / PIXEL_SIZES[size ?? "default"]));
160

161
      if (cols * rows > maxCells) {
162
        const scale = Math.sqrt((cols * rows) / maxCells);
163
        cols = Math.max(1, Math.round(cols / scale));
164
        rows = Math.max(1, Math.round(rows / scale));
165
      }
166
      setGrid((prev) =>
167
        prev.cols === cols && prev.rows === rows ? prev : { cols, rows },
168
      );
169
    };
170

171
    update();
172
    const ro = new ResizeObserver(update);
173
    ro.observe(el);
174
    return () => ro.disconnect();
175
  }, [size, maxCells]);
176

177
  const cellDuration = Math.max(0.12, duration * 0.5);
178
  const maxDelay = Math.max(0, duration - cellDuration);
179
  const delays = useCellDelays(grid.cols, grid.rows, maxDelay, pattern ?? "default", jitter);
180

181
  const contentTransition: Transition = reducedMotion
182
    ? { duration: 0.15, ease: "easeOut" }
183
    : { duration: duration * 0.8, ease: [0.16, 1, 0.3, 1] };
184

185
  const cellEase = [0.4, 0, 0.2, 1] as const;
186

187
  return (
188
    <div
189
      ref={containerRef}
190
      className={cn("relative isolate size-full", className)}
191
    >
192
      <AnimatePresence onExitComplete={onExitComplete}>
193
        {show && (
194
          <motion.div
195
            key="pixel-reveal-content"
196
            className={cn("relative", contentClassName)}
197
            initial={{ opacity: 0, scale: reducedMotion ? 1 : 0.985 }}
198
            animate={{ opacity: 1, scale: 1 }}
199
            exit={{ opacity: 0, scale: reducedMotion ? 1 : 0.985 }}
200
            transition={contentTransition}
201
          >
202
            {children}
203

204
            {!reducedMotion && delays.length > 0 && (
205
              <div
206
                aria-hidden
207
                className="pointer-events-none absolute inset-0 grid overflow-hidden"
208
                style={{
209
                  gridTemplateColumns: `repeat(${grid.cols}, 1fr)`,
210
                  gridTemplateRows: `repeat(${grid.rows}, 1fr)`,
211
                }}
212
              >
213
                {delays.map((delay, i) => (
214
                  <motion.span
215
                    key={i.toString()}
216
                    className={revealVariants({
217
                      variant,
218
                    })}
219
                    initial={{ opacity: 1, scale: 1 }}
220
                    animate={{
221
                      opacity: 0,
222
                      scale: 0.6,
223
                      transition: {
224
                        duration: cellDuration,
225
                        delay,
226
                        ease: cellEase,
227
                      },
228
                    }}
229
                    exit={{
230
                      opacity: 1,
231
                      scale: 1,
232
                      // Reversed order: the last block to disappear upon opening is the first to reappear upon closing.
233
                      transition: {
234
                        duration: cellDuration,
235
                        delay: maxDelay - delay,
236
                        ease: cellEase,
237
                      },
238
                    }}
239
                  />
240
                ))}
241
              </div>
242
            )}
243
          </motion.div>
244
        )}
245
      </AnimatePresence>
246
    </div>
247
  );
248
}