Hero made by @ybouane.

@crazygl/hero-scrollsyncedtext

A series of statements that swap one at a time as the user scrolls — the heading is pinned at viewport-centre and the next statement crossfades in as you scroll through the hero's 200vh of vertical space.

Demo

Scroll Synced Text

Install

npm install @crazygl/hero-scrollsyncedtext

Usage

import ScrollSyncedText from '@crazygl/hero-scrollsyncedtext';

export default function Page() {
  return (
    <ScrollSyncedText
      statements={`We design intentional.\nWe ship ruthlessly.\nWe stay curious.`}
      fontSize={96}
    />
  );
}

Customise

• Content — statements (one line per slide).
• Typography — textColor, fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Manifesto / values sections on brand and agency sites
• Product narrative or "how it works" beats revealed on scroll
• Editorial landing pages that read as a sequence of statements

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.