Hero made by @ybouane.

@crazygl/hero-launch-reveal

An editorial product-launch hero: a serif headline, a pill call-to-action and a fanned trio of device mockups that rise into place with a staggered, spring-eased reveal. Cards drift subtly with the pointer.

Demo

Launch Reveal

Install

npm install @crazygl/hero-launch-reveal

Usage

import LaunchReveal from '@crazygl/hero-launch-reveal';

export default function Hero() {
  return (
    <LaunchReveal
      label="✦ Checkout+"
      heading={'Transforming post-purchase\none upgraded customer at a time'}
      ctaLabel="Offer Customer Upgrades"
      imageCenter="https://crazygl.com/samples/launch-screen-1.png"
    />
  );
}

Customise

• Content — label, multi-line heading, subheading, ctaLabel / ctaHref.
• Mockups — imageCenter / imageLeft / imageRight (+ optional per-card links). Tall device screenshots fan best.
• Fan layout — mockupSize, sideScale, fanSpread, fanTilt, sideDrop, cardRadius, shadow.
• 3D depth — depth3d, depthAngle, depthTilt (pointer tilt), perspective.
• Reveal motion — duration, stagger, rise, loopReveal, parallax, sideParallax.
• Style & Typography — background, heading/sub/label/button colours, headingSize / headingWeight, headingFontFamily, bodyFontFamily.

Best for

• SaaS and app product launches with device screenshots.
• Editorial / brand landing pages wanting a polished entrance.
• Marketing pages where a fanned mockup trio is the focal point.

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.