Hero made by @ybouane.

@crazygl/hero-prism-cloud

A luminous chromatic cloud hero built with GLSL. Responds to scroll and pointer with refracted color light.

Demo

Prism Cloud

Install

npm install @crazygl/hero-prism-cloud

Usage

import PrismCloud from '@crazygl/hero-prism-cloud';

export default function Page() {
  return (
    <PrismCloud
      hueA="#7b5cff"
      hueB="#32d6ff"
      hueC="#ff7ac6"
      intensity={1}
      speed={0.5}
    />
  );
}

Customise

• Hues — hueA/hueB/hueC are the three colour wells; analogous hues give a single-mood cloud, complements a more chromatic refraction. backgroundColor sits behind.
• Light — intensity (overall luminance) and caustic (etched light-through-glass streaks).
• Motion — speed (drift; keep slow) and grain (film grain).

Best for

• Premium SaaS landing pages and AI / ML productivity tools
• Fintech homepages and quiet editorial layouts that need atmosphere without theatre
• Scroll-reactive hero sections (the cloud drifts with scroll progress)

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.