CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/text-start-indent

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.

ReactFont#editorial#indent#drop-cap#typography

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-text-start-indent
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <TextStartIndent />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <TextStartIndent
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Drop Cap

Editorial paragraph with a single, oversized serif drop-cap that overhangs the leading margin — drop straight into a magazine layout.

Progressive Blur Text

A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable.

Kinetic Split Typography

A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Scroll Text FX

Each letter scales, rotates and brightens as it passes the scroll midpoint — an editorial mid-line emphasis effect.

Magnet Text

Letters are pulled toward the cursor with falloff — close letters attract strongly, distant letters barely tug. Springs return them to the line.Live customizer

Text Start Indent

Text colourKicker colourDrop-cap colourBody font size28pxFontWeight500Line height1.55Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.