CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/prism-cloud

Prism Cloud

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

ReactWebGLInteractiveFont#chromatic#webgl#glsl#cloud#atmospheric#gradient#scroll

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

One command, zero config.

npm install @crazygl/hero-prism-cloud
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 PrismCloud from '@crazygl/hero-prism-cloud';

export default function Landing() {
  return (
    <PrismCloud />
  );
}
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 PrismCloud from '@crazygl/hero-prism-cloud';

export default function Page() {
  return (
    <section>
      <PrismCloud
        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

Aurora Plane

A pure-CSS animated aurora hero. Cheap, calm, and responsive — a great default when CSS is enough.

Breathing Gradient Landscape

A product screenshot floats above an abstract gradient terrain that slowly breathes through stacked low-frequency FBM noise. Warm peach peaks fade into soft sage valleys; motes drift up; the camera pans across a 30-second loop with a hint of bob.

Artwork Lens

A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.

Liquid Aurora Gradient

A full-bleed liquid gradient: large organic blobs of electric blue and warm orange bleed and morph across a near-black field, driven by domain-warped FBM in a single WebGL2 fragment shader. Slow lava-lamp / aurora flow with deep black negative space; the pointer gently pulls the fluid toward the cursor.

Slow Glitch Fabric

An elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move the cursor and the glitch concentrates around its position, intensifying the tears and chromatic split right where you point, then eases back out when you leave.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.Live customizer

Prism Cloud

Caustic1Hue AHue BHue CBackgroundIntensity1Drift Speed0.5Grain0.03Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.