Interactive Grid

Choose your framework. The registry installs one component file and its PixiJS dependency.

The registry command writes the component to src/lib/components/ui/InteractiveGrid.svelte and installs its dependencies.

The registry command writes the component to src/components/ui/InteractiveGrid.tsx and installs its dependencies.

The registry command writes the component to src/components/ui/InteractiveGrid.vue and installs its dependencies.

Interactive Grid stores a two-axis displacement vector per cell and samples that field with hard nearest-neighbor boundaries, producing the reference’s blockwise elastic image distortion.

Pointer velocity is distributed to cells within the selected radius, then decays through frame-rate-corrected relaxation so the image settles back into place.

The shader fills its parent. Your layout decides whether that parent is a card, hero, or viewport.

<script lang="ts">
	import InteractiveGrid from '$lib/components/ui/InteractiveGrid.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<InteractiveGrid
		class="absolute inset-0"
		src="/images/your-image.jpg"
	/>

	<div class="relative z-10">Your content</div>
</section>

<script lang="ts">
	import InteractiveGrid from '$lib/components/ui/InteractiveGrid.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<InteractiveGrid
		class="absolute inset-0"
		src="/images/your-image.jpg"
	/>

	<div class="relative z-10">Your content</div>
</section>

import { InteractiveGrid } from '@/components/ui/InteractiveGrid';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<InteractiveGrid
				className="absolute inset-0"
				src="/images/your-image.jpg"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

import { InteractiveGrid } from '@/components/ui/InteractiveGrid';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<InteractiveGrid
				className="absolute inset-0"
				src="/images/your-image.jpg"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}

<script setup lang="ts">
import InteractiveGrid from '@/components/ui/InteractiveGrid.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<InteractiveGrid
			class="absolute inset-0"
			src="/images/your-image.jpg"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

<script setup lang="ts">
import InteractiveGrid from '@/components/ui/InteractiveGrid.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<InteractiveGrid
			class="absolute inset-0"
			src="/images/your-image.jpg"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

• Enable interaction so pointer movement can inject velocity into the grid.
• Higher Grid values create smaller image cells and require proportionally more CPU-side state updates.
• Remote image sources must allow cross-origin image loading when served from another origin.