CrazyGLVolumetric 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.
Usage
import VolumetricBeamLogo from '@crazygl/hero-volumetric-beam-logo';
export default function Hero() {
return (
<VolumetricBeamLogo
logoImage="https://example.com/logo.svg"
heading={"Stand\nin the light."}
beamColor="#ffd99a"
beamIntensity={1.6}
contentSide="content-left"
/>
);
}The logoImage accepts a transparent SVG (preferred) or PNG — both are extruded into 3D — or a GLB/GLTF model, which replaces the extrusion with your mesh.
Customise
- Content & Layout —
heading/subheading, two-column or custom node;contentSide(centered / left / right, beam auto-shifts opposite) andbeamPositionXoverride. - Logo —
logoSize,logoDepth(extrusion),logoHeight,logoSpin,logoTint,logoMetalness,logoRoughness,logoEmissive,useGlbMaterials. - Beam —
beamColor,beamIntensity,beamWidth,beamSoftness,fogDensity(dust),ringIntensity(logo ring glow). - Camera —
orbitSpeed,parallaxStrength,dragInertia,moteCount. - Lighting —
environmentImage(HDRI for reflections) andenvIntensity. - Background —
bgTop,bgBottom,floorColor.
Best for
- Brand launches and rebrands where the logo needs a spotlight moment.
- Premium SaaS hero sections and product-reveal landing pages.
- Personal-branding and portfolio sites that want a single, cinematic focal point.
One command, zero config.
npm install @crazygl/hero-volumetric-beam-logoImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import VolumetricBeamLogo from '@crazygl/hero-volumetric-beam-logo';
export default function Landing() {
return (
<VolumetricBeamLogo />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import VolumetricBeamLogo from '@crazygl/hero-volumetric-beam-logo';
export default function Page() {
return (
<section>
<VolumetricBeamLogo
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
