Hero made by @ybouane.

@crazygl/hero-glass-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.

Demo

Glass Panels

Install

npm install @crazygl/hero-glass-panels

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.