CrazyGLGlass Panels
Liquid-glass panels in WebGL — half-sphere bevel, biconvex refraction (entry + exit + thickness), edge-weighted blur mix, multi-light Blinn-Phong specular, Fresnel rim, drop shadow. Drop in any background image and it gets bent through the glass.
Usage
import GlassPanels from '@crazygl/hero-glass-panels';
export default function Page() {
return (
<GlassPanels
backgroundImage="/photos/nature.avif"
refraction={1.21}
chromatic={0.29}
blur={0}
/>
);
}Customise
- Content — single heading panel, two-column (two panels), or custom node.
- Behavior —
draggable,pointerTilt. - Background —
backgroundImage,blur(frosted body). - Glass shape —
cornerRadius,bevelDepth. - Glass physics —
refraction,chromatic,fresnel,gloss,edgeHighlight,tint,brightness,saturation. - Shadow —
shadow,shadowSpread,shadowOffsetY.
Inputs you can plug in
- Background image — Any JPG, PNG, WebP, or AVIF. This is the scene the glass refracts, so a photo with depth, color, and soft shapes reads far better than flat artwork. Leave it empty to fall back to the built-in mesh gradient.
Notable controls
- Refraction (0–2.5, sweet spot around 1.0–1.4) — how hard the glass bends the background. Push it up for a heavy lens, down for near-flat glass.
- Bevel depth (4–120px, default 58) — how thick the slab appears; it drives how strongly the rim refracts. Drop to ~15px for a thin glass plate.
- Chromatic dispersion (0–3, try 0.2–0.4) — the rainbow split at the silhouette. A little reads as polished glass; 1.0+ goes into prism territory.
- Frosted blur (0–60px) — how blurry the body renders the background. 0 keeps it clear; 20–40px gives a proper frosted look while the rim stays crisp.
- Pointer tilt (0–2.5) — how much panels rotate toward the cursor. 0 for static plates, ~1.0 for a clean 3D-card lean.
One command, zero config.
npm install @crazygl/hero-glass-panelsImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import GlassPanels from '@crazygl/hero-glass-panels';
export default function Landing() {
return (
<GlassPanels />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import GlassPanels from '@crazygl/hero-glass-panels';
export default function Page() {
return (
<section>
<GlassPanels
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
