Hero made by @ybouane.

@crazygl/hero-glass-logo-sculpture

Upload a logo (SVG / PNG / GLB) and watch it become a real 3D glass paperweight: Three.js MeshPhysicalMaterial with true volumetric transmission, per-wavelength dispersion, clearcoat, Beer-Lambert attenuation, ContactShadows, an HDRI-lit studio rig and pointer-driven parallax orbit that visibly bends the photographic background through the body.

Demo

Glass Logo Sculpture

Install

npm install @crazygl/hero-glass-logo-sculpture

Usage

import GlassLogoSculpture from '@crazygl/hero-glass-logo-sculpture';

export default function Page() {
  return (
    <GlassLogoSculpture
      logoImage="/brand/logo.svg"
      backgroundImage="/photos/forest.jpg"
      ior={1.5}
      dispersionAmount={1.0}
    />
  );
}

You can plug in your own assets: a transparent SVG (preferred) or PNG silhouette is extruded into a beveled body; a GLB / GLTF model is used as-is (optionally re-skinned in glass via useGlbMaterials). Any JPG / PNG / WebP / AVIF photo refracts through the body, and an equirectangular HDRI lights the glass and drives its reflections.

Customise

• Content / Logo — contentType (heading / two-columns / custom), logoImage, useGlbMaterials, logoScale, centerX / logoY, extrusionDepth, bevelAmount.
• Background — backgroundImage, backgroundDistance, environmentImage (HDRI).
• Glass physics — ior, dispersionAmount, thickness, attenuationColor / attenuationDistance, roughness, clearcoat / clearcoatRoughness, envIntensity.
• Behavior — rotationSpeed, parallaxAzimuth / parallaxElevation, dragInertia.
• Shadow — shadowStrength, shadowBlur.

Best for

• Luxury product launches and premium SaaS / design-tool landing pages
• Brand and identity studios that want their mark to feel physically crafted
• High-end fintech, agency and portfolio sites
• Any hero where a logo should read as a real optical object

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.