Hero made by @ybouane.

@crazygl/hero-cosmic-marble

A procedurally-textured planet fills the background — swirling FBM clouds, atmosphere scattering at the rim, slow rotation, scattered stars.

Demo

Cosmic Marble

Install

npm install @crazygl/hero-cosmic-marble

Usage

import CosmicMarble from '@crazygl/hero-cosmic-marble';

export default function Page() {
  return (
    <CosmicMarble
      planetSize={0.8}
      atmosphereColor="#5cb8ff"
      cloudFrequency={1.6}
    />
  );
}

Customise

• Planet — deepColor, cloudColor, landColor, atmosphereColor, planetSize, rotateSpeed, atmosphereStrength, cloudFrequency.
• Layout — centerX slides the planet across the frame so heading copy can sit opposite.
• Background — transparent to float the planet over the page, otherwise bgColor and starDensity for the deep-space backdrop.

Best for

• Climate, earth-observation, and astronomy products
• Space / sci-fi brands and product launches
• Global-reach or geopolitical storytelling
• Science-themed landing pages

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.