@crazygl/hero-dither-gradient

_{Hero made by @ybouane.}

@crazygl/hero-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.

Demo

Dither Gradient

Install

npm install @crazygl/hero-dither-gradient

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.

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.