Hero made by @ybouane.

@crazygl/hero-collage-zero-gravity

Images, textures, and product screens float together in a controlled zero-gravity collage around the hero copy.

Demo

Collage in Zero Gravity

Install

npm install @crazygl/hero-collage-zero-gravity

Usage

import CollageZeroGravity from '@crazygl/hero-collage-zero-gravity';

export default function Page() {
  return (
    <CollageZeroGravity
      heading={"The brand\nin motion."}
      screenshot1="/shots/product-main.avif"
      mainScale={1.3}
      parallaxStrength={0.55}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom), heading, subheading, or custom nodes.
• Screens — screenshot1 (main / front) through screenshot5 (supporting panels), plus mainScale, secondaryScale, secondarySpread, mainEmissive, secondaryEmissive.
• Group — groupOffsetX / groupOffsetY to reposition the whole cluster.
• Motion — parallaxStrength (cursor orbit), breathingStrength (per-screen float).
• Atmosphere — fogDensity / fogColor, bloomColor / bloomStrength, ambientParticles, bgEdge / bgCenter, transparentBackground.

Best for

• Multi-feature SaaS launch pages that show several product surfaces at once.
• Design-studio and creative-portfolio sites.
• Editorial brand pages and campaign landings mixing imagery, UI, and texture.

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.