Hero made by @ybouane.

@crazygl/hero-shader-playground-hero

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.

Demo

Shader Playground

Install

npm install @crazygl/hero-shader-playground-hero

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.

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.