Motion Grid

1<script lang="ts">
2	import { motion } from "motion-sv";
3	import { setMotionGridContext } from "./use-motion-grid-context.svelte";
4	import type { MotionGridCellMotionProps, MotionGridProps } from "./types";
5 
6	type StyleValue = MotionGridCellMotionProps["style"];
7 
8	function mergeStyles(baseStyle: StyleValue, userStyle: StyleValue): StyleValue {
9		return {
10			...(baseStyle ?? {}),
11			...(userStyle ?? {}),
12		};
13	}
14 
15	function withRefProp<T extends Record<string, unknown>>(props: T) {
16		return Object.defineProperty(props, "ref", {
17			enumerable: true,
18			configurable: true,
19			get: () => ref,
20			set: (value) => {
21				ref = value as HTMLDivElement | null;
22			},
23		}) as T & { ref: HTMLDivElement | null };
24	}
25 
26	let {
27		ref = $bindable(null),
28		gridSize,
29		frames,
30		duration = 200,
31		animate = true,
32		child,
33		children,
34		...restProps
35	}: MotionGridProps = $props();
36 
37	let index = $state(0);
38 
39	let cols = $derived(gridSize[0]);
40	let rows = $derived(gridSize[1]);
41 
42	setMotionGridContext({
43		animate: () => {
44			return animate;
45		},
46		index: () => {
47			return index;
48		},
49		cols: () => {
50			return cols;
51		},
52		rows: () => {
53			return rows;
54		},
55		frames: () => {
56			return frames;
57		},
58		duration: () => {
59			return duration;
60		},
61	});
62 
63	$effect(() => {
64		frames;
65		index = 0;
66	});
67 
68	$effect(() => {
69		if (frames.length === 0) {
70			index = 0;
71			return;
72		}
73 
74		if (index >= frames.length) {
75			index = 0;
76		}
77	});
78 
79	$effect(() => {
80		if (!animate || frames.length === 0) return;
81 
82		let interval = setInterval(() => {
83			index = (index + 1) % frames.length;
84		}, duration);
85 
86		return () => clearInterval(interval);
87	});
88 
89	let baseStyle = $derived({
90		display: "grid",
91		gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
92		gridAutoRows: "1fr",
93	});
94 
95	let mergedProps = $derived.by(() => {
96		let style = mergeStyles(baseStyle, restProps.style as StyleValue);
97		return withRefProp({
98			...restProps,
99			"data-animate": animate,
100			style,
101		}) as MotionGridCellMotionProps;
102	});
103</script>
104 
105{#if child}
106	{@render child({ props: mergedProps })}
107{:else}
108	<motion.div bind:ref {...mergedProps}>
109		{@render children?.()}
110	</motion.div>
111{/if}