CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/shader-playground-hero

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.

ReactWebGLInteractiveFont#shader#webgl#procedural#iridescent#fbm#domain-warp#cta#premium#creative-coding#awwwards

Usage

import ShaderPlayground from '@crazygl/hero-shader-playground-hero';

export default function Page() {
  return (
    <ShaderPlayground
      heading="Shaders, live."
      palette="iridescent"
      warpStrength={0.85}
      ctaLabel="Open the playground"
    />
  );
}

Customise

  • Content — contentType, heading, subheading, ctaLabel, onCTAClick.
  • Palette — palette (iridescent, aurora, sunset, lava, oil, ice, mono, galaxy).
  • Flow — flowSpeed, fbmOctaves (detail), warpStrength, pointerInfluence.
  • Look — brightness, contrast, grain, vignette.
  • Overlay — textColorMode, textColor, ctaBgColor, ctaTextColor.

Best for

  • Creative-coding and graphics-engine landing pages.
  • Design-tool launches and generative-art portfolios.
  • AI / ML product pages wanting a "this thing computes" feel.
  • Any premium hero that needs motion without a literal subject.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-shader-playground-hero
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 ShaderPlayground from '@crazygl/hero-shader-playground-hero';

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

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

Iridescent Membrane

The whole background is a thin soap-bubble film — a translucent holographic membrane rendered with physically-based thin-film interference. Slow domain-warped flow drives the film thickness, so restrained pastel rainbows drift across the surface. The pointer presses on the membrane: the film stretches under the cursor and sends out concentric tension waves — single-wavefront ripples that perturb the thickness and shift the colour as they expand. Elegant, futuristic, premium.

Floating Ink

Ink clouds drifting through water — domain-warped FBM noise, layered with transparency, slowly evolving so the silhouettes never repeat.

Typographic Fluid Simulation

A bold headline acts as a mask for a real-time colorful fluid. Domain-warped FBM noise advected over time + a pointer-driven velocity grid swirl two color fields inside the type while the background stays minimal. Move the cursor to inject velocity and color into the letters.

Thermal Logo

Your logo rendered as a live thermal-camera image — a flowing heat field clipped to the silhouette and mapped through a cold-to-white-hot gradient, with the cursor leaving a glowing heat trail that slowly cools.

AI Video Generation Portal

A floating prompt card streams a current of energy particles across to a glowing portal ring, through which the generated video or image materializes with a shimmer-dissolve reveal.

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.Live customizer

Shader Playground

PaletteCurated palettes mixed through the iridescent fresnel term.Flow speed0.35Time multiplier on the noise field. 0 freezes; above 1 reads as frantic.Detail (FBM octaves)6Number of noise octaves stacked. Higher = finer structure, more GPU.Domain warp strength0.85How aggressively the field warps through itself. 0 = clean FBM; the painterly look starts around 0.6.Pointer influence0.45How strongly the cursor pulls the flow toward itself.Brightness1Contrast1.05Grain0.05Filmic noise added at the end.Vignette0.35Overlay text colourCTA backgroundCTA text colourHeading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.