Hero made by @ybouane.

@crazygl/hero-zero-gravity-ui

Five product screens drift weightlessly in a dark space. The main screen sits in focus at the front; four secondary feature screens float at varying depths behind it, with soft shadows and depth fog selling the void.

Demo

Product UI in Zero Gravity

Install

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

Usage

import HeroZeroGravityUI from '@crazygl/hero-zero-gravity-ui';

export default function Hero() {
  return (
    <HeroZeroGravityUI
      heading="Built to flow."
      screenshot1="/screens/dashboard.png"
      screenshot2="/screens/builder.png"
    />
  );
}

Customise

• Screens — screenshot1 (main/front) … screenshot5, plus mainEmissive, secondaryEmissive, mainScale, secondaryScale, secondarySpread.
• Group — groupOffsetX, groupOffsetY.
• Motion — parallaxStrength (cursor orbit), breathingStrength.
• Atmosphere — fogDensity, fogColor, bloomColor, bloomStrength, ambientParticles, bgEdge, bgCenter, transparentBackground.

Best for

• Multi-feature SaaS launch pages and AI productivity suites.
• Project-management, collaboration and design platforms.
• Any "one product, many screens" story.

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.