Installation
Install the component
Run the following command to install the component and its dependencies:
npx @motion-core/cli add glass-panenpx @motion-core/cli add glass-panepnpm dlx @motion-core/cli add glass-panepnpm dlx @motion-core/cli add glass-panebunx @motion-core/cli add glass-panebunx @motion-core/cli add glass-paneyarn dlx @motion-core/cli add glass-paneyarn dlx @motion-core/cli add glass-paneImport the component
Import the component into your Svelte file:
import { GlassPane } from "$lib/motion-core";import { GlassPane } from "$lib/motion-core";Usage
Props
50deg
1.000
1.000
0.820
0.000
0.000
0.650
<script lang="ts">
import { GlassPane } from "motion-core";
import type { ComponentProps } from "svelte";
const demoImage = "/images/photos/sample-image-7.webp";
type Props = Partial<ComponentProps<typeof GlassPane>>;
let {
rotation = 0,
refraction = 1,
chromaticAberration = 1,
panelWidth = 0.82,
waveFrequency = 0.0,
waveAmplitude = 0.0,
speed = 0.65,
}: Props = $props();
</script>
<GlassPane
image={demoImage}
class="h-full min-h-96 w-full"
{rotation}
{refraction}
{chromaticAberration}
{panelWidth}
{waveFrequency}
{waveAmplitude}
{speed}
/>
<script lang="ts">
import { GlassPane } from "motion-core";
import type { ComponentProps } from "svelte";
const demoImage = "/images/photos/sample-image-7.webp";
type Props = Partial<ComponentProps<typeof GlassPane>>;
let {
rotation = 0,
refraction = 1,
chromaticAberration = 1,
panelWidth = 0.82,
waveFrequency = 0.0,
waveAmplitude = 0.0,
speed = 0.65,
}: Props = $props();
</script>
<GlassPane
image={demoImage}
class="h-full min-h-96 w-full"
{rotation}
{refraction}
{chromaticAberration}
{panelWidth}
{waveFrequency}
{waveAmplitude}
{speed}
/>
Props
GlassPane
| Prop | Type | Default |
|---|---|---|
image | string | — |
rotation | number | 0 |
refraction | number | 1 |
chromaticAberration | number | 1 |
panelWidth | number | 0.82 |
waveFrequency | number | 0.0 |
waveAmplitude | number | 0.0 |
speed | number | 0.65 |
class | string | "" |