CrazyGLChrome Mascot Logo
Your logo or mascot reborn as a chunky Y2K chrome object floating over a sunset gradient with twinkling stars and slow anamorphic lens flares. Real PBR mirror metal lit by a procedural HDR environment.
Usage
import ChromeMascotLogo from '@crazygl/hero-chrome-mascot-logo';
export default function Page() {
return (
<ChromeMascotLogo
logo="https://crazygl.com/samples/logo-shape1.png"
envPreset="Sunset"
autoRotateSpeed={0.045}
/>
);
}Drop in an SVG or PNG and the silhouette is extruded into a thick bevelled shape; hand it a GLB/GLTF and your actual 3D model takes the stage (keep its materials or override every mesh with the chrome look).
Customise
- Logo — SVG/PNG silhouette (extruded + bevelled) or GLB/GLTF model;
useGlbMaterials,bevelDepth. - Chrome material —
logoColor(F0 tint),logoMetalness,logoRoughness,clearcoatStrength,envMapIntensity. - Reflections & background —
envPreset(Sunset / Cyber / Cream HDR env),bgStyle,bgMotion, and three gradient stops. - Layout & motion —
layout,logoScale,pointerStrength,autoRotateSpeed. - Stars —
starCount,starColor,starDriftSpeed. - Lens flares —
flareStrength,flareColor.
Best for
- Creator tools and consumer apps launching a fresh identity
- Music, fashion, and retro-future brands chasing Y2K nostalgia
- Personal portfolios and product pages that want a logo to feel like a hero object
One command, zero config.
npm install @crazygl/hero-chrome-mascot-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 ChromeMascotLogo from '@crazygl/hero-chrome-mascot-logo';
export default function Landing() {
return (
<ChromeMascotLogo />
);
}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 ChromeMascotLogo from '@crazygl/hero-chrome-mascot-logo';
export default function Page() {
return (
<section>
<ChromeMascotLogo
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
