Pixel Image

1<script lang="ts">
2	import { cn } from "$UTILS$.js";
3	import { useInView } from "motion-sv";
4	import { watch } from "runed";
5 
6	type Grid = {
7		rows: number;
8		cols: number;
9	};
10 
11	const DEFAULT_GRIDS: Record<string, Grid> = {
12		"6x4": { rows: 4, cols: 6 },
13		"8x8": { rows: 8, cols: 8 },
14		"8x3": { rows: 3, cols: 8 },
15		"4x6": { rows: 6, cols: 4 },
16		"3x8": { rows: 8, cols: 3 },
17	};
18 
19	type PredefinedGridKey = keyof typeof DEFAULT_GRIDS;
20 
21	interface Props {
22		src: string;
23		grid?: PredefinedGridKey;
24		customGrid?: Grid;
25		grayscaleAnimation?: boolean;
26		pixelFadeInDuration?: number;
27		maxAnimationDelay?: number;
28		colorRevealDelay?: number;
29		once?: boolean;
30	}
31 
32	let {
33		src,
34		grid = "6x4",
35		grayscaleAnimation = true,
36		pixelFadeInDuration = 1000,
37		maxAnimationDelay = 1200,
38		colorRevealDelay = 1300,
39		customGrid,
40		once = false,
41	}: Props = $props();
42 
43	let showColor = $state(false);
44 
45	const MIN_GRID = 1;
46	const MAX_GRID = 16;
47 
48	let dimensions = $derived.by(() => {
49		const isValidGrid = (grid?: Grid) => {
50			if (!grid) return false;
51			const { rows, cols } = grid;
52			return (
53				Number.isInteger(rows) &&
54				Number.isInteger(cols) &&
55				rows >= MIN_GRID &&
56				cols >= MIN_GRID &&
57				rows <= MAX_GRID &&
58				cols <= MAX_GRID
59			);
60		};
61 
62		return isValidGrid(customGrid) ? customGrid! : DEFAULT_GRIDS[grid];
63	});
64 
65	let pieces = $derived.by(() => {
66		const total = dimensions.rows * dimensions.cols;
67		return Array.from({ length: total }, (_, index) => {
68			const row = Math.floor(index / dimensions.cols);
69			const col = index % dimensions.cols;
70 
71			const clipPath = `polygon(
72        ${col * (100 / dimensions.cols)}% ${row * (100 / dimensions.rows)}%,
73        ${(col + 1) * (100 / dimensions.cols)}% ${row * (100 / dimensions.rows)}%,
74        ${(col + 1) * (100 / dimensions.cols)}% ${(row + 1) * (100 / dimensions.rows)}%,
75        ${col * (100 / dimensions.cols)}% ${(row + 1) * (100 / dimensions.rows)}%
76      )`;
77 
78			const delay = Math.random() * maxAnimationDelay;
79			return {
80				clipPath,
81				delay,
82			};
83		});
84	});
85 
86	let element: HTMLDivElement | null = $state(null);
87	let view = useInView(
88		() => element!,
89		() => ({ once }) as any // type definition bug
90	);
91 
92	watch(
93		() => view.current,
94		(isInView) => {
95			if (isInView) {
96				// Element entered view - start color reveal after delay
97				const colorTimeout = setTimeout(() => {
98					showColor = true;
99				}, colorRevealDelay);
100				return () => clearTimeout(colorTimeout);
101			} else if (!once) {
102// … truncated