Glass Pane — Godsend

Preparing preview…

Installation

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

Installation unavailable

This preview is not assigned to the free or paid catalog. Installation is unavailable.

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

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

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

Overview

Glass Pane divides an image into a repeating refractive field with a cubic lens profile, RGB separation, and narrow specular highlights.

Rotation changes the panel field while the optional wave bends and gently animates its boundaries.

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 GlassPane from '$lib/components/ui/GlassPane.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<GlassPane
		class="absolute inset-0"
		src="/images/your-image.jpg"
		refraction={1}
		speed={0.8}
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import GlassPane from '$lib/components/ui/GlassPane.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<GlassPane
		class="absolute inset-0"
		src="/images/your-image.jpg"
		refraction={1}
		speed={0.8}
	/>

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

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

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

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { GlassPane } from '@/components/ui/GlassPane';

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

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

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

<template>
	<section class="relative h-128 overflow-hidden">
		<GlassPane
			class="absolute inset-0"
			src="/images/your-image.jpg"
			:refraction="1"
			:speed="0.8"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import GlassPane from '@/components/ui/GlassPane.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<GlassPane
			class="absolute inset-0"
			src="/images/your-image.jpg"
			:refraction="1"
			:speed="0.8"
		/>

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

Set both Wave frequency and Wave amplitude above zero to reveal the animated panel motion.
Use Image fit to preserve the source aspect ratio or deliberately stretch it across the canvas.

Component API

Types below match the selected Svelte component.

Property	Type	Default	Range / values
`class`	`string`	`—`	`—`
`src`	`string`	`—`	`Image URL or data URL`
`imageFit`	`"cover" \| "fit" \| "stretch"`	`"cover"`	`cover, fit, stretch`
`rotation`	`number`	`0`	`-180–180`
`refraction`	`number`	`1`	`0–2`
`chromaticAberration`	`number`	`1`	`0–3`
`panelWidth`	`number`	`0.82`	`0.2–2.5`
`waveFrequency`	`number`	`0`	`0–16`
`waveAmplitude`	`number`	`0`	`0–0.25`
`speed`	`number`	`0.65`	`0–2`
`paused`	`boolean`	`false`	`—`
`interactive`	`boolean`	`false`	`—`
`maxDpr`	`number`	`2`	`1–3`
`resolutionScale`	`number`	`1`	`0.25–1`
`onReady`	`(backend: ShaderBackend) => void`	`—`	`webgpu, webgl`
`onRendererChange`	`(backend: ShaderBackend, reason: string) => void`	`—`	`webgl`
`onError`	`(error: Error) => void`	`—`	`—`
`bind:this`	`Component public instance`	`—`	`pause, resume, reset, resize, destroy`

Types below match the selected React component.

Property	Type	Default	Range / values
`className`	`string`	`—`	`—`
`src`	`string`	`—`	`Image URL or data URL`
`imageFit`	`"cover" \| "fit" \| "stretch"`	`"cover"`	`cover, fit, stretch`
`rotation`	`number`	`0`	`-180–180`
`refraction`	`number`	`1`	`0–2`
`chromaticAberration`	`number`	`1`	`0–3`
`panelWidth`	`number`	`0.82`	`0.2–2.5`
`waveFrequency`	`number`	`0`	`0–16`
`waveAmplitude`	`number`	`0`	`0–0.25`
`speed`	`number`	`0.65`	`0–2`
`paused`	`boolean`	`false`	`—`
`interactive`	`boolean`	`false`	`—`
`maxDpr`	`number`	`2`	`1–3`
`resolutionScale`	`number`	`1`	`0.25–1`
`onReady`	`(backend: ShaderBackend) => void`	`—`	`webgpu, webgl`
`onRendererChange`	`(backend: ShaderBackend, reason: string) => void`	`—`	`webgl`
`onError`	`(error: Error) => void`	`—`	`—`
`ref`	`GlassPaneHandle`	`—`	`pause, resume, reset, resize, destroy`

Types below match the selected Vue component.

Property	Type	Default	Range / values
`class`	`string`	`—`	`—`
`src`	`string`	`—`	`Image URL or data URL`
`imageFit`	`"cover" \| "fit" \| "stretch"`	`"cover"`	`cover, fit, stretch`
`rotation`	`number`	`0`	`-180–180`
`refraction`	`number`	`1`	`0–2`
`chromaticAberration`	`number`	`1`	`0–3`
`panelWidth`	`number`	`0.82`	`0.2–2.5`
`waveFrequency`	`number`	`0`	`0–16`
`waveAmplitude`	`number`	`0`	`0–0.25`
`speed`	`number`	`0.65`	`0–2`
`paused`	`boolean`	`false`	`—`
`interactive`	`boolean`	`false`	`—`
`maxDpr`	`number`	`2`	`1–3`
`resolutionScale`	`number`	`1`	`0.25–1`
`@ready`	`(backend: ShaderBackend) => void`	`—`	`webgpu, webgl`
`@rendererchange`	`(backend: ShaderBackend, reason: string) => void`	`—`	`webgl`
`@error`	`(error: Error) => void`	`—`	`—`
`ref`	`Component public instance`	`—`	`pause, resume, reset, resize, destroy`