Canvas
Glass Logo
OGL WebGL2 glass lens over an animated procedural swirl — silhouette driven by an SVG SDF.
Preview
WebGL2 glass lens over an animated procedural swirl. The silhouette is driven by an inline SVG.
Attributes
Installation
pnpm dlx motion-blocks add glass-logoUsage
---import "@/components/motion-blocks/glass-logo-element.ts"; const svgLogo = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="white"/></svg>`;--- <motion-glass-logo svg-source={svgLogo} speed={1} scale={1} rotation={0} refraction={1} chromatic-aberration={1} blur={1} swirl-color-a="#222326" swirl-color-b="#6c87bc" class="w-full h-[400px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
svg-source SVG markup to render as a glass lens (defaults to a logo shape). | string | "<svg>...</svg>" |
speed Animation speed of the swirl background. | number | 1 |
scale Scale of the logo within the canvas. | number | 1 |
offset-x Horizontal offset of the logo center. | number | 0 |
offset-y Vertical offset of the logo center. | number | 0 |
rotation Rotation angle of the logo in degrees. | number | 0 |
refraction Strength of the glass lens refraction effect. | number | 1 |
chromatic-aberration Intensity of RGB color splitting at edges. | number | 1 |
blur Blur amount of the refracted background. | number | 1 |
swirl-color-a First color for the animated swirl gradient. | string | "#222326" |
swirl-color-b Second color for the animated swirl gradient. | string | "#6c87bc" |