CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/textfill

Text Fill

Headline that fills bottom-up with a progress colour — like a loading bar disguised as type. The fill loops 0 → 100% on a configurable cycle.

ReactFont#fill#progress#typography

Usage

import TextFill from '@crazygl/hero-textfill';

export default function Hero() {
	return (
		<TextFill
			heading="LOADING"
			cycleSec={3.4}
			fillColor="#5b8def"
		/>
	);
}

Customise

  • Content — heading.
  • Fill — cycleSec (fill duration), holdAtFullSec, loopAnimation (loop forever vs fill once and hold).
  • Colours — outlineColor, fillColor, plus fontSize, strokeWidth, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground or a solid bgColor.

Best for

  • Loading / progress-themed headlines and splash screens.
  • Launch and coming-soon pages wanting a kinetic outlined wordmark.
  • Bold, sporty or technical brand headers.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-textfill
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 TextFill from '@crazygl/hero-textfill';

export default function Landing() {
  return (
    <TextFill />
  );
}
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 TextFill from '@crazygl/hero-textfill';

export default function Page() {
  return (
    <section>
      <TextFill
        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

Dynamic Fill Nav

A nav bar where each link reveals a coloured fill on hover — left-to-right wipe behind a flat-coloured label.

Gradient Text

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

Blurry Text FX

Each word starts heavily blurred and resolves into focus on a stagger. Plays once on load or loops with a configurable hold.

Kinetic Text

Stacked lines where each word is timed independently — bounce in, rotate, scale, on a choreographed sequence. Pick whether the show plays on load, follows scroll, or loops forever.

Text Masking

Headline acts as a window onto a slowly drifting photograph — large letterforms, the photograph showing through them, a clean colored hero around the cut-out.

Blend Text

A heading with CSS mix-blend-mode applied so it changes appearance against whatever sits behind it — picks the inverse colour of the backdrop pixel, like ink on a poster.Live customizer

Text Fill

Fill cycle (s)3.4sHold at full (s)0.8sLoop animationLoop on: fill repeats 0 → 100 → hold → 0 forever. Loop off: fill once and hold at 100.Outline colourFill colourFont size200pxStroke width (px)1.5pxFontWeight900Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.