Skip to documentation

Image

Glass Lens

A pointer-tracked physical glass lens that refracts an image and casts a soft shadow across its surface.

  • pixi.js@^8.20.1

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/GlassLens.svelte and installs its dependencies.

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

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

Overview

Glass Lens places an image over a configurable surface and moves a plano-convex glass volume toward the pointer with frame-rate-independent smoothing.

The lens traces refraction through curved and planar interfaces, separates wavelengths, adds Fresnel reflections, and casts a soft offset shadow onto the image plane.

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

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

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

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

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

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

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

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

			<div className="relative z-10">Your content</div>
		</section>
	);
}
<script setup lang="ts">
import GlassLens from '@/components/ui/GlassLens.vue';
</script>

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

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

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

		<div class="relative z-10">Your content</div>
	</section>
</template>
  • Give the component a definite parent size; the image scale and lens diameter are relative to that surface.
  • Pointer tracking is enabled by default. Reduced-motion mode keeps the lens interactive but applies pointer positions without interpolation.
  • Keep the image source CORS-accessible when it is hosted on 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.