CrazyGLBad 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.
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,paperGrainoverlay.
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.
One command, zero config.
npm install @crazygl/hero-bad-handwritingImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import BadHandwriting from '@crazygl/hero-bad-handwriting';
export default function Landing() {
return (
<BadHandwriting />
);
}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.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import BadHandwriting from '@crazygl/hero-bad-handwriting';
export default function Page() {
return (
<section>
<BadHandwriting
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
