canvas

Glass Slideshow

A slideshow component featuring organic glass bubble transitions with refraction and chromatic aberration.

@threlte/core @threlte/extras three

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add glass-slideshow

Import the component

Import the component into your Svelte file:

import { GlassSlideshow } from "$lib/motion-core";

import { GlassSlideshow } from "$lib/motion-core";

Usage

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

	const images = [
		"/images/demos/sample-7.jpg",
		"/images/demos/sample-5.jpg",
		"/images/demos/sample-6.jpg",
	];
</script>

<GlassSlideshow class="h-full min-h-96 w-full" {images} />

Props

GlassSlideshow

Prop	Type	Default
`images`	`string[]`	`—`
`index`	`number`	`0`
`transitionDuration`	`number`	`2000`
`intensity`	`number`	`1.0`
`distortion`	`number`	`1.0`
`chromaticAberration`	`number`	`1.0`
`refraction`	`number`	`1.0`
`autoplay`	`boolean`	`true`
`autoplayInterval`	`number`	`5000`
`class`	`string`	`""`