CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/glass-logo-sculpture

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.

ReactWebGL3DImageInteractiveFont#glass#logo#three#transmission#dispersion#refraction#pbr#ior#fresnel#premium#3d

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
01 · Install the package

One command, zero config.

npm install @crazygl/hero-glass-logo-sculpture
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <GlassLogoSculpture />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <GlassLogoSculpture
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Ice Encased Logo

Your logo is frozen inside a chunky beveled cube of real refractive ice. Three.js MeshPhysicalMaterial with IOR 1.31, clearcoat, Beer-Lambert blue attenuation and chromatic dispersion bends the studio HDRI around the brand. Frost on the front face melts on load to reveal the logo inside a clear ice-cube body.

Glass Typography

A headline cast in transparent optical glass: Three.js TextGeometry extruded into a real 3D object, rendered with MeshPhysicalMaterial (transmission, IOR, dispersion, clearcoat) so it visibly refracts the moving gradient behind it. Pointer parallax tilts the camera and CTA hover sweeps a bright edge highlight across the letters.

Liquid Glass Badge Logo

Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior reads as frosted glass, and a 4-light Blinn-Phong studio rig sells the volume. Falls back to a rotating gradient backdrop when no image is supplied.

Glass Tile Logo

The logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load. Hover separates the tiles slightly. Built with Three.js InstancedMesh + HDRI reflections + soft contact shadows.

Product Inside a Glass Capsule

A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow.

Extruded Logo Monolith

Drop in a transparent SVG (or PNG) logo and it becomes a glossy black 3D sculpture with bevelled edges, studio HDRI reflections, a mirror floor, and an animated rim-light sweep. Premium product-shot look for SaaS, agencies, and AI tools.Live customizer

Glass Logo Sculpture

Logo (SVG / PNG / GLB)Transparent SVG, PNG, OR a 3D GLB/GLTF file. SVG/PNG silhouettes are extruded into a chunky beveled 3D body; GLB/GLTF models are used as-is.Keep GLB materialsWhen a GLB is supplied, ON keeps the model's authored PBR materials (still lit by the studio HDRI); OFF re-skins every mesh with the glass material from this hero.Logo size1Multiplies the auto-fit scale. 0.8–1.3 reads as a substantial paperweight; below 0.5 feels lost; above 1.6 starts clipping the frame.Logo horizontal position0.22Shifts the sculpture left/right inside the frame so heading text can sit opposite. 0 = centred. Negative = left, positive = right.Logo vertical position0Extrusion depth0.35Thickness of the extruded body (Z axis, scene units). 0.25–0.45 reads as a chunky paperweight; below 0.15 reads as a glass shard; above 0.7 starts to read as a slab.Bevel amount0.6Rounds the rim of the extruded silhouette into a real paperweight profile. 0.4–0.8 reads as polished optical glass; 0 leaves a flat plate; >1.0 swells the body.Background ImagePhotograph behind the glass. The body's transmission renderer captures this and bends it as light passes through. Strong colour + readable structure (forest, sky, foliage) reads best.Background distance3.2How far the bg plane sits behind the glass. The further back, the more pronounced the bend through the body — but the smaller the photographic content reads.Studio HDRIEquirectangular HDRI lighting the glass. Drives the clearcoat reflections and the rim halo. Removing it leaves the body lit by direct lights only.Index of refraction1.51.0 = air (no bend). 1.33 = water. 1.5 = window glass / BK7 crown. 1.77 = sapphire. 2.42 = diamond. Drives how strongly light bends.Dispersion1Per-wavelength IOR spread — paints the rainbow seam at the silhouette. 0.6–1.2 reads as premium optical glass; above 1.8 is exaggerated prism.Volumetric thickness3.5Path length for Beer-Lambert absorption. Higher = more saturated tint deep inside the body. 3–4 = subtle tint; >6 = visibly tinted optical glass.Glass tintColour that LIGHT picks up while passing through the body (Beer-Lambert). Subtle blue-green = real BK7 crown glass.Tint distance5Distance over which the tint colour saturates. Lower = stronger / faster colour buildup. 4–6 reads as subtle optical glass.Roughness0.05Microfacet roughness of the body. 0 = perfect crystal (cold). 0.05–0.1 = real polished optical glass. 0.2+ reads as frosted glass.Clearcoat1A perfectly polished top layer added on top of the base glass — gives the body the punchy specular pip that real polished glass shows under studio light.Clearcoat roughness0.03Roughness of the clearcoat layer only. Keep below 0.08 for crisp reflections.Environment intensity1Strength of HDRI-driven reflections + transmission lighting.Auto rotation speed0.15Y-axis auto-spin (radians/sec). 0.12–0.20 = elegant slow drift; pauses under reduced motion.Pointer parallax (X)5°Max yaw the body adopts when the pointer reaches the edge of the frame.Pointer parallax (Y)3°Max pitch the body adopts when the pointer reaches the edge of the frame.Drag inertia0.85Spin retention after a drag flick. 0 = stops instantly; 0.9+ = long lazy spin.Shadow strength0.7Darkness of the contact shadow under the glass body.Shadow blur3.5Softness of the contact shadow's penumbra.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.