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

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.

ReactWebGL3DImageInteractiveFont#glass#logo#three#instanced#tiles#refraction#transmission#modular#image-input#premium

Usage

import GlassTileLogo from '@crazygl/hero-glass-tile-logo';

export default function Page() {
  return (
    <GlassTileLogo
      logo="https://crazygl.com/samples/crazygl.png"
      tileGrid={20}
      glassIOR={1.5}
      glassDispersion={0.04}
      heading="Built block by block."
    />
  );
}

Customise

  • Logo & layout — logo (transparent PNG), tileGrid (tiles per long edge, 10–40), tileGapPct, tileDepth, logoZoom, logoCenterX/Y.
  • Glass material — glassTransmission, glassRoughness, glassIOR (1.5 = BK7, up to 2.4 for diamond), glassThickness, glassDispersion (rainbow seam), glassTintHex, envIntensity.
  • Assembly animation — assembleDuration, scatterDistance, staggerAmount (ripple-in order).
  • Hover — hoverSeparation, hoverRadiusPct.
  • Ambient motion — ambientFloat, ambientSwaySpeed.
  • Stage — environmentImage (equirectangular HDRI; biggest mood lever), bgTopHex, bgBotHex, shadowAlpha.

Best for

  • Premium SaaS and design-system launch pages where "built from parts" is the story
  • Developer tools, fintech and crypto products wanting a crafted, glassy signature
  • Luxury and product brands after a jewel-like logo reveal
  • Brand or rebrand announcement pages
01 · Install the package

One command, zero config.

npm install @crazygl/hero-glass-tile-logo
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 GlassTileLogo from '@crazygl/hero-glass-tile-logo';

export default function Landing() {
  return (
    <GlassTileLogo />
  );
}
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 GlassTileLogo from '@crazygl/hero-glass-tile-logo';

export default function Page() {
  return (
    <section>
      <GlassTileLogo
        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

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.

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.

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.

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.

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.Live customizer

Glass Tile Logo

Logo (raster PNG)Transparent PNG. The alpha mask is sampled into a regular grid; pixels above threshold become glass tiles.Tile resolution20Tiles per long-edge of the logo bounding box. 18-24 reads as a recognisable silhouette with chunky readable tiles; >32 slows down software-WebGL because every tile needs its own transmission backbuffer copy.Tile gap0.22Fraction of each cell left as air between tiles. 0 = touching, 0.5 = scattered cubes.Tile depth0.7How deep each block extrudes back from the silhouette plane. Drives the chunkiness of the sculpture.Logo size0.6Fraction of the smaller viewport axis the longer logo dimension occupies.Horizontal position0.22Shift left or right so the heading can sit opposite. 0 = centred.Vertical position0Transmission1Fraction of light that passes through. 1.0 = perfectly transparent glass; lower fades to translucent.Roughness0.06Microsurface roughness. 0 = polished crystal; 0.2-0.4 = frosted.Index of refraction1.51.5 = ordinary glass (BK7). Higher IORs (1.9-2.4) bend light more — toward sapphire / diamond.Glass thickness1Internal optical thickness — drives how much the background distorts through each tile and the dispersion strength.Chromatic dispersion0.04Per-channel IOR spread for the rainbow seam at the rim. 0.03-0.06 reads as real optical glass.Glass tintFaint dielectric tint. Default = the cool blue of real BK7 crown glass.Reflection brightness1Scales the HDRI environment contribution. 0.8-1.3 reads as studio; >2 = sunlit beach.Assemble duration2.4sHow long the tiles take to lerp from scattered to assembled positions on load.Scatter distance1.6How far each tile starts off-position (in tile-widths). 0 = no animation, just appears.Stagger amount0.55Fraction of the duration over which tile start times are spread. 0 = all together, 1 = sequential ripple.Hover separation0.35How much tiles push away from the cursor on hover, in tile-widths. 0 = static, 1 = tiles fly apart dramatically.Hover radius0.22Pointer falloff radius as fraction of the smaller viewport axis.Ambient float0.12Strength of per-tile breathing wobble in tile-widths. 0 = perfectly still, 0.1 = subtle life, 0.3 = restless.Sway speed0.55Frequency of the breathing wobble in cycles/second.HDRI environmentEquirectangular (2:1) sky for reflections/refraction. Drives the entire material look.Background topBackground bottomContact shadow0.6Opacity of the soft shadow disc under the tile assembly.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.