Interactive Grid

Preparing preview…

Installation

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

Installation unavailable

The preview is public, but its installable release is still being prepared.

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.

Overview

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.

Basic usage

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

Hero.svelte

<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.

Component API

Types below match the selected Svelte component.

Types below match the selected React component.

Types below match the selected Vue component.