Hero made by @ybouane.

@crazygl/hero-scrolltextfx

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

Demo

Scroll Text FX

Install

npm install @crazygl/hero-scrolltextfx

Usage

import ScrollTextFx from '@crazygl/hero-scrolltextfx';

export default function Hero() {
  return (
    <ScrollTextFx
      heading="letters earn their weight"
      peakColor="#ffffff"
      baseColor="#5a5f6c"
    />
  );
}

Customise

• Content — heading.
• Effect — windowSize (active band width %), peakScale, peakRotate.
• Scroll window — scrollStart, scrollEnd (scroll progress mapped to the sweep).
• Typography — baseColor, peakColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Editorial and type-forward landing pages.
• Long-scroll narrative sections wanting a kinetic headline.
• Portfolio / studio intros.

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.