Hero made by @ybouane.

@crazygl/hero-cloud-flythrough

Raymarched volumetric clouds. The camera flies forward through layered FBM density; sunlight scatters through every step and god-rays peek through breaks.

Demo

Cloud Flythrough

Install

npm install @crazygl/hero-cloud-flythrough

Usage

import CloudFlythrough from '@crazygl/hero-cloud-flythrough';

export default function Hero() {
  return (
    <CloudFlythrough
      heading="Above the deck."
      density={1}
      speed={0.6}
      sunStrength={1}
    />
  );
}

Customise

• Sky — skyTop / skyBottom (gradient behind the clouds), cloudColor, shadowColor (lit underside), sunColor.
• Motion & form — density (cloud coverage), speed (fly speed), sunStrength (god-ray / halo strength).

Best for

• Travel, airline and aviation brands.
• Meditation / wellness and calm-tech apps.
• Climate, weather and sustainability sites.
• Dreamy product-launch heroes.

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.