Dither Gradient

A dark editorial hero lit by a single grainy warm gradient that ramps along one animated sine contour (no mirrored band). The contour breathes with a pseudo-random amplitude, and the giant wordmark is rendered into the same shader so it is revealed by the light — bright where the gradient washes over it, sinking into near-black shadow elsewhere. Quantised, dithered and grained for a retro/print texture.

React

WebGL

Font

#gradient

#dither

#sine

#wave

#webgl

#editorial

#wordmark

#grain

#warm

#dark

Usage

import DitherGradient from '@crazygl/hero-dither-gradient';

export default function Hero() {
  return (
    <DitherGradient
      wordmark="CGL"
      eyebrow={"Design for those who\nwant to become a better\nversion of themselves."}
      colorHot="#ffe6c8"
    />
  );
}

Customise

Content — eyebrow (multi-line) and the big wordmark.
Wave — waveAmplitude, waveFrequency, waveWidth, waveTilt, waveBaseY, flowSpeed, ampSpeed, intensity.
Dither — bands (quantised steps), dither (stipple strength), grain.
Colours — five-stop warm ramp: colorBase, colorDeep, colorMid, colorWarm, colorHot, plus textColor.
Wordmark — wordmarkFont, wordmarkWeight, wordmarkSize, wordmarkY, textGlow, textAmbient.

Best for

Editorial / brand statement landing pages and agency sites.
Dark-mode hero sections wanting a print-like, retro-warm texture.
Type-forward wordmark reveals for studios and product launches.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-dither-gradient

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 DitherGradient from '@crazygl/hero-dither-gradient';

export default function Landing() {
  return (
    <DitherGradient />
  );
}

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 DitherGradient from '@crazygl/hero-dither-gradient';

export default function Page() {
  return (
    <section>
      <DitherGradient
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}