CrazyGLIce 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.
Usage
import IceEncasedLogo from '@crazygl/hero-ice-encased-logo';
export default function Page() {
return (
<IceEncasedLogo
heading={'Frozen\nin time.'}
logoImage="https://crazygl.com/samples/crazygl.svg"
frostMeltSeconds={2}
/>
);
}Customise
- Logo —
logoImage(SVG/PNG silhouette is extruded into a thin plate; GLB placed as-is),logoScale, plus optional backlit glow (logoEmissive,logoEmissiveIntensity). - Ice block —
centerX,blockWidth/blockHeight/iceThickness,blockBevel, and the optics:iceColor,iceTransmission,iceTint,attenuationDistance,roughness,clearcoat,dispersion. - Frost reveal —
frostInitial,frostResidual,frostMeltSeconds. - Lighting —
environmentImageHDRI +envIntensity, three-point key/fill/rim colours and intensities. - Behavior & stage —
rotationSpeed, pointer parallax,dragInertia,bgTop/bgBottom, and contact-shadow controls.
Best for
- Premium product and luxury brand launch pages
- Cold-chain, beverage, or winter-campaign sites
- Studios and agencies wanting a tactile, cinematic logo reveal
- High-end SaaS landing pages that want their mark to feel substantial
One command, zero config.
npm install @crazygl/hero-ice-encased-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 IceEncasedLogo from '@crazygl/hero-ice-encased-logo';
export default function Landing() {
return (
<IceEncasedLogo />
);
}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 IceEncasedLogo from '@crazygl/hero-ice-encased-logo';
export default function Page() {
return (
<section>
<IceEncasedLogo
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
