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

Text Split Reveal

Heading splits into two halves that slide apart to reveal a secondary line between them — the curtain-pull pattern.

ReactFont#split#reveal#typography

Usage

import TextSplitReveal from '@crazygl/hero-textsplitreveal';

export default function Hero() {
  return (
    <TextSplitReveal
      topLine="DESIGN"
      bottomLine="STUDIO"
      between="EST. 2026"
      splitGap={80}
      duration={2.4}
    />
  );
}

Customise

  • Content — topLine, bottomLine, and the between text revealed in the gap.
  • Motion — splitGap (how far the lines travel), duration (seconds), loopAnimation (ping-pong forever vs. open once and hold).
  • Typography — textColor, betweenColor, fontSize, headingFontFamily (Google Font), headingFontWeight.
  • Backdrop — transparentBackground toggle and bgColor.

Best for

  • Brand / studio landing pages where a wordmark needs a memorable entrance.
  • Portfolio and agency sites that want a kinetic-typography header.
  • Event or launch pages where the revealed middle line carries a date or tagline.
01 · Install the package

One command, zero config.

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

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

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

Text Reveal

Heading wiped in from a single direction via a hard clip-path mask, with a small per-letter delay — the foundational reveal everyone needs.

Text Hover Reveal

Each item shows a default heading; on hover the heading scrolls up and a secondary line scrolls in from below — list-of-services interaction.

Hover Text Reveal

A row of phrases where hovering one expands a stagger-typed paragraph beside it — the kind of FAQ heading-list interaction premium SaaS sites use.

Mask Text Reveal

Text revealed as a moving circular mask sweeps across — the headline appears only where the image-shaped mask uncovers it.

Cursor Reveal Text

Two stacked paragraphs — a primary line shown in the surface colour, and a secret reveal line shown only inside a cursor-following spotlight that grows on hover.

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.Live customizer

Text Split Reveal

Split gap (px)80pxDuration (s)2.4sLoop animationLoop on: ping-pong open → close → open forever. Loop off: run the open animation once and hold.Lines colourBetween colourFont size160pxFontWeight800Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.