CrazyGLPixel to 3D Reveal
An image is sampled into a cloud of chunky pixel cubes scattered through 3D space. They fly to their home positions and refine from low-res chunks to crisp pixels — a pixel mosaic that assembles itself in front of a glowing grid floor. Three.js InstancedMesh, image-as-particle-source.
Usage
import PixelTo3DReveal from '@crazygl/hero-pixel-to-3d-reveal';
export default function Page() {
return (
<PixelTo3DReveal
media="/product-screenshot.png"
heading="From pixels to product."
pixelDensity={121}
repeatMode="Static"
gridColor="#5cf2ff"
/>
);
}Customise
- Image —
media(PNG/JPG/WebP/AVIF; transparent areas are skipped), plusmediaZoomandmediaCenterX/Yto position the mosaic opposite the heading. - Pixel assembly —
pixelDensity,assemblyDuration,flightDuration,clusterSize,particleStartScale→particleEndScale(the resolution-doubling gap),scatterDistance,repeatMode(Auto / Static / Click) andloopInterval. - Grid floor —
gridColor,gridIntensity,gridScale. - Stage —
bgColor,vignetteStrength,pointerParallax.
Best for
- Developer tools, IDEs, and dashboards where the loading-becomes-product story matters.
- Indie games and retro-flavoured creative apps.
- Nostalgia and "rebuilt for today" brand launches — drop in a logo or product UI.
One command, zero config.
npm install @crazygl/hero-pixel-to-3d-revealImport 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 PixelTo3DReveal from '@crazygl/hero-pixel-to-3d-reveal';
export default function Landing() {
return (
<PixelTo3DReveal />
);
}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 PixelTo3DReveal from '@crazygl/hero-pixel-to-3d-reveal';
export default function Page() {
return (
<section>
<PixelTo3DReveal
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
