Hero made by @ybouane.

@crazygl/hero-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.

Demo

Kinetic Split Typography

Install

npm install @crazygl/hero-kinetic-split-typography

Usage

import KineticSplitTypography from '@crazygl/hero-kinetic-split-typography';

export default function Page() {
  return (
    <KineticSplitTypography
      heading="FUTURES IN MOTION"
      sliceCount={10}
      ctaLabel="View the work"
      onCTAClick="/work"
    />
  );
}

onCTAClick takes either a URL string or a function (e) => void under the same prop; leave it empty for a non-navigating button, or drop ctaLabel to hide the button.

Customise

• Content — heading (the sliced word), subheading, ctaLabel, onCTAClick.
• Slicing — sliceCount, sliceMaxOffset (settled stagger), headingY (vertical position).
• Animation — loadStagger, loadDuration (slide-in timing).
• Parallax — pointerParallax, depthRange (front/back stratification).
• Colors / Type — textColor, bgColor, transparentBackground, headingFontFamily, headingFontWeight.

Best for

• Independent design and motion studios.
• Fashion and editorial brands.
• Portfolio and agency landing pages.
• Product or campaign launch sites wanting a confident typographic statement.

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.