Hero made by @ybouane.

@crazygl/hero-bad-handwriting

A heading scribbled like a real human — wobbly per-letter rotation, baseline jitter, varied ink weight, with an underline scribbled in as the line lands.

Demo

Bad Handwriting

Install

npm install @crazygl/hero-bad-handwriting

Usage

import BadHandwriting from '@crazygl/hero-bad-handwriting';

export default function Hero() {
  return (
    <BadHandwriting
      heading="we ship like nobody is watching"
      subheading="(but everybody is)"
      wobbleAmount={8}
      textColor="#ffffff"
    />
  );
}

Customise

• Content — heading, subheading.
• Wobble — wobbleAmount (per-letter rotation), baselineJitter (vertical/horizontal offset), weightJitter (ink-weight variance), underline (toggle the scribbled underline).
• Typography — textColor, fontSize, headingFontFamily (Google font, default Caveat), headingFontWeight (base weight).
• Backdrop — transparentBackground, bgColor, paperGrain overlay.

Best for

• Playful, human brand voices and indie product landings.
• Personal portfolios and blogs wanting a hand-drawn note feel.
• Launch announcements or quote callouts that need warmth over polish.

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.