CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/cosmic-marble

Cosmic Marble

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

ReactWebGLInteractiveFont#planet#marble#procedural#noise#atmosphere#premium

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
01 · Install the package

One command, zero config.

npm install @crazygl/hero-cosmic-marble
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <CosmicMarble />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <CosmicMarble
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Lightning Storm

Branching procedural arcs jag across animated stormclouds. Each strike pulses a bright halo across the sky, dimming back into the dark in a few hundred ms.

Sculpted Light Bust

A polished marble sculpture under studio lighting. The pointer orbits a single bright key light around the bust in real 3D, raking it across the stone face for hot specular highlights, cool subsurface shadows in the recesses, and a warm rim that tracks the cursor like a real museum spotlight.

Shader Playground

A live, full-bleed procedural shader background — domain-warped fractal Brownian motion mixed through an iridescent fresnel palette, with the headline and CTA layered cleanly on top. The pointer subtly steers the flow.

ASCII Nebula

The whole background is a grid of ASCII glyphs that, from afar, reads as a soft drifting nebula — dense glyphs where the cloud is thick, sparse where it thins. The pointer locally reveals hidden structure: nearby glyphs grow larger, rotate slightly, and switch to denser symbols.

Particle Typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.

Halftone Field

A full-bleed AM halftone screen — thousands of ink dots on an aspect-corrected grid whose size is driven by a slow, domain-warped noise field sampled at each cell's centre. Dark zones grow fat dots, light zones shrink to pinpricks, and the field visibly evolves over time so the dot sizes breathe. Dot contrast intensifies toward the frame edges while the centre stays calm so the heading reads. Bold, graphic, editorial.Live customizer

Cosmic Marble

Deep colourCloud colourLand colourAtmosphere colourPlanet size0.8Rotation speed0.06Atmosphere strength1Cloud frequency1.6Transparent backgroundDrop the deep-space backdrop and stars so the planet floats over the page bg.BackgroundStars1Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.