CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/extruded-logo-monolith

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.

ReactWebGL3DImageInteractiveFont#three#3d#extrusion#logo#pbr#metallic#reflections#premium

Usage

import ExtrudedLogoMonolith from '@crazygl/hero-extruded-logo-monolith';

export default function Page() {
  return (
    <ExtrudedLogoMonolith
      logoSvg="https://example.com/logo.svg"
      heading={"Built like\na monolith."}
      thickness={0.32}
      bevel={0.6}
      rimColor="#7aa2ff"
    />
  );
}

Customise

  • Logo — logoSvg accepts a transparent SVG (sharpest extrusion), a PNG (auto-traced from its alpha mask), or a GLB/GLTF model (swaps the extruded mesh for your real 3D asset).
  • Sculpture — monolithSize, thickness (extrusion depth), bevel (edge rounding).
  • Material — logoColor, metalness, roughness, imperfectionStrength (procedural micro-roughness), useGlbMaterials (keep a GLB's authored PBR materials).
  • Lighting — keyColor, rimColor/rimIntensity/rimSweepSpeed (the orbiting accent light), envIntensity (studio reflection), showFloor (mirror floor).
  • Layout & motion — layout (centered / content-left / content-right), rotationSpeed, parallaxStrength.
  • Background — transparent, bgTop/bgBottom gradient.

Best for

  • Premium SaaS and developer-tool launch pages
  • Design agencies and studios showing off a wordmark
  • AI products and brand teaser sites that need a hero logo moment
  • Luxury or hardware product announcements
01 · Install the package

One command, zero config.

npm install @crazygl/hero-extruded-logo-monolith
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 ExtrudedLogoMonolith from '@crazygl/hero-extruded-logo-monolith';

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

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

Extruded 3D Headline Sculpture

Your headline as a thick, bevelled 3D sculpture floating under three-point studio lighting. Each letter has glossy bevelled edges, the camera parallaxes with your pointer so the depth reads from every angle, a soft contact shadow + AO strip ground it, and a real mirrored reflection fades into the glossy floor. A CTA button hover sends a sweep of light across the letters.

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.

Volumetric Beam Logo

Your logo floats inside a vertical museum-grade beam of light. Ray-marched volumetric cone reveals drifting dust around the brand, an emissive ring lights the logo, and a soft floor shadow grounds the scene. Premium SaaS / personal-branding / product-launch aesthetic.

Floating Monolith

A glossy obsidian monolith floats on screen, rotating slowly, sampling a procedural HDRI for genuine mirror reflections. Emissive light strips travel down its faces in a hypnotic loop.

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.

Logo Reflected in Water

A glowing brand mark floats above a real 3D water plane. Perspective foreshortening, fog-attenuated distant reflection, and Schlick Fresnel sell the scene as photographic. Stacked Gerstner waves drive the surface; pointer wake rings and a continuous finger-press depression carve into the mirror.Live customizer

Extruded Logo Monolith

Logo (SVG / PNG / GLB)Transparent SVG, PNG, or a 3D GLB/GLTF file. SVG gives sharpest extrusion; PNG is auto-traced from alpha; GLB replaces the extruded mesh with your real 3D model.Sculpture Size1.05Extrusion Depth0.32Bevel0.6Sculpture ColorMetalness0.72Roughness0.22Surface Imperfections0.35Keep GLB MaterialsWhen the logo is a GLB/GLTF file, keep its authored PBR materials. Turn off to override with the sculpture material above.Key LightRim Sweep ColorRim Sweep Intensity1Rim Sweep Speed0.35Studio Reflection1.1Mirror FloorTransparent backgroundBackground TopBackground BottomHeading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.