Motion Core

Glass Pane

GlassPane provides a glass-like refraction effect over an image using Three.js and Shaders. It simulates a series of moving glass rods that distort the underlying texture with chromatic aberration.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add glass-pane

Import the component

Import the component into your Svelte file: 
import { GlassPane } from "$lib/motion-core";
import { GlassPane } from "$lib/motion-core";

Usage

<script lang="ts">
	import { GlassPane } from "motion-core";

	const demoImage = "/images/demos/sample-4.jpg";
</script>

<GlassPane
	image={demoImage}
	distortion={0.5}
	chromaticAberration={0.005}
	waviness={0.1}
	frequency={4.0}
	speed={0.5}
	class="h-full min-h-96 w-full"
/>

Props

GlassPane

PropTypeDefault
image
string —
distortion
number 1.0
chromaticAberration
number 0.005
waviness
number 0.05
frequency
number 6.0
speed
number 1.0
class
string ""