Hero made by @ybouane.

@crazygl/hero-textdoodles

Heading marked up with hand-drawn doodle annotations — circle one word, scribble under another, arrow into a third. Reads like a designer's notebook.

Demo

Text Doodles

Install

npm install @crazygl/hero-textdoodles

Usage

import TextDoodles from '@crazygl/hero-textdoodles';

export default function Page() {
  return (
    <TextDoodles
      before="We ship"
      wordA="premium"
      middle="design with a"
      wordB="smile"
      doodleColor="#ffd86b"
    />
  );
}

Customise

• Content — before, wordA (circled), middle, wordB (underlined), after.
• Doodles — doodleColor.
• Typography — textColor, fontSize, headingFontFamily (default Caveat), headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Design studios and creative agencies.
• Playful product and brand landing pages.
• Personal sites and portfolios.
• Marketing pages wanting a hand-annotated, human touch.

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.