Glass Pane

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

Props

Distortion

0.500

Chromatic Aberration

0.005

Waviness

0.000

Speed

0.500

Rods

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

	const demoImage = "/images/demos/sample-6.jpg";
	type Props = Partial<ComponentProps<typeof GlassPane>>;

	let {
		distortion = 0.5,
		chromaticAberration = 0.005,
		waviness = 0,
		speed = 0.5,
		rods = 3,
	}: Props = $props();
</script>

<GlassPane
	image={demoImage}
	class="h-full min-h-96 w-full"
	{distortion}
	{chromaticAberration}
	{waviness}
	{speed}
	{rods}
/>

Props

GlassPane

Prop	Type	Default
`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`	`""`