Canvas
Glass Pane
OGL animated glass panel strips with refraction, chromatic aberration and wave distortion over an image.
Preview
Animated diagonal glass panels with refraction and chromatic aberration over an image.
Attributes
Installation
pnpm dlx motion-blocks add glass-paneUsage
---import "@/components/motion-blocks/glass-pane-element.ts";--- <motion-glass-pane image="/images/your-image.jpg" rotation={0} refraction={1} chromatic-aberration={1} panel-width={0.82} wave-frequency={0.0} wave-amplitude={0.0} speed={0.65} class="w-full h-[500px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
image URL of the background image to display through the glass pane. | string | "" |
rotation Rotation angle of the glass strips in degrees. | number | 0 |
refraction Strength of the glass refraction distortion. | number | 1 |
chromatic-aberration Intensity of RGB color splitting at edges. | number | 1 |
panel-width Width of each glass strip as a fraction of the canvas. | number | 0.82 |
wave-frequency Frequency of the wave distortion across the strips. | number | 0.0 |
wave-amplitude Amplitude of the wave distortion effect. | number | 0.0 |
speed Animation speed of the wave distortion. | number | 0.65 |