Motion Core

Canvas

Glass Pane

A refractive view simulating moving glass rods that distort the underlying texture with chromatic aberration.

@threlte/core@threlte/extrasthree

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-6.jpg";
</script>

<GlassPane
	image={demoImage}
	distortion={0.5}
	chromaticAberration={0.005}
	waviness={0.0}
	speed={0.5}
	rods={3}
	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
rods
number 5.0
speed
number 1.0
class
string ""