Hero made by @ybouane.

@crazygl/hero-pixel-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.

Demo

Pixel to 3D Reveal

Install

npm install @crazygl/hero-pixel-to-3d-reveal

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), plus mediaZoom and mediaCenterX/Y to position the mosaic opposite the heading.
• Pixel assembly — pixelDensity, assemblyDuration, flightDuration, clusterSize, particleStartScale → particleEndScale (the resolution-doubling gap), scatterDistance, repeatMode (Auto / Static / Click) and loopInterval.
• 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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.