Canvas
Glass Slideshow
An OGL-powered slideshow with liquid glass image transitions, chromatic fringing, and optional autoplay.
Preview
A liquid glass transition blends between slides with noise-driven refraction, chromatic fringing, and autoplay.
Attributes
Installation
pnpm dlx motion-blocks add glass-slideshowUsage
---import "@/components/motion-blocks/glass-slideshow-element.ts"; const slides = [ { src: "/images/slide1.jpg", alt: "Slide 1" }, { src: "/images/slide2.jpg", alt: "Slide 2" }, { src: "/images/slide3.jpg", alt: "Slide 3" }];--- <motion-glass-slideshow images={JSON.stringify(slides)} index={0} transition-duration={2000} intensity={1} distortion={1} chromatic-aberration={1} refraction={1} autoplay={true} autoplay-interval={5000} class="w-full h-[600px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
images JSON array of slide objects with src (URL) and optional alt text. | string (JSON) | "[]" |
index Current slide index (updates on transition when autoplay is false). | number | 0 |
transition-duration Duration of the glass transition effect in milliseconds. | number | 2000 |
intensity Overall intensity of the glass distortion and refraction effects. | number | 1 |
distortion Strength of the liquid distortion during transitions. | number | 1 |
chromatic-aberration Intensity of RGB color splitting at refracted edges. | number | 1 |
refraction Strength of the glass lens refraction effect. | number | 1 |
autoplay Whether to automatically advance slides. | boolean | true |
autoplay-interval Time between automatic slide advances in milliseconds. | number | 5000 |