Hero made by @ybouane.

@crazygl/hero-text-start-indent

Editorial-style paragraph with the first line indented and a giant drop-cap that overhangs into the margin — magazine-grade typography out of the box.

Demo

Text Start Indent

Install

npm install @crazygl/hero-text-start-indent

Usage

import TextStartIndent from '@crazygl/hero-text-start-indent';

export default function Hero() {
	return (
		<TextStartIndent
			kicker="Field notes — Issue 03"
			body="We design products the way a typesetter sets a page…"
			dropCap
		/>
	);
}

Customise

• Layout — dropCap (drop-cap vs first-line indent), dropCapSize, indentSize (used when dropCap is off).
• Typography — textColor, kickerColor, dropCapColor, fontSize, lineHeight, headingFontFamily, headingFontWeight.
• Backdrop — bgColor or transparentBackground.

Best for

• Editorial, magazine, and newsletter landing pages.
• Brand manifesto or "about" hero sections that lead with prose.
• Studios and publications wanting refined, literary typography.

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.