Hero made by @ybouane.

@crazygl/hero-paint-strokes

Thick glossy paint strokes sweep across the hero in slow motion. Each stroke has its own colour and gloss highlight.

Demo

Paint Strokes

Install

npm install @crazygl/hero-paint-strokes

Usage

import PaintStrokes from '@crazygl/hero-paint-strokes';

export default function Hero() {
  return (
    <PaintStrokes
      heading="In oil."
      strokeCount={6}
      gloss={1}
      speed={0.4}
    />
  );
}

Customise

• Canvas — canvasColor (backdrop), strokeA / strokeB / strokeC (the three cycling tints), strokeCount (2–10), thickness, speed (sweep), gloss (wet highlight).
• Content & Typography — contentType (heading / two-columns / custom) and headingFontFamily.

Best for

• Art galleries, museums, and fashion editorial.
• Beauty and cosmetics brands.
• Design-led agency and studio sites wanting a tactile, painterly first frame.

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.