Hero made by @ybouane.

@crazygl/hero-gallery-slider

A full-bleed image gallery where each slide carries its own picture and copy. Image and text transition independently — fade, Ken-Burns zoom, push-slide, clip wipe or blur-morph for the image; fade, rise, clip-reveal or blur for the text. Autoplay, arrows, dots, counter, swipe.

Demo

Gallery Slider

Install

npm install @crazygl/hero-gallery-slider

Usage

import GallerySlider from '@crazygl/hero-gallery-slider';

export default function Page() {
  return (
    <GallerySlider
      slideCount={3}
      imageTransition="blur"
      textTransition="clip"
      slide1Image="/img/one.jpg"
      slide1Heading="Tiered in white sugar"
      slide1CtaLabel="Discover"
      slide1CtaHref="/products"
    />
  );
}

Customise

• Slides — slideCount (1–5) and per-slide slideNImage, slideNEyebrow, slideNHeading, slideNSubtext, slideNCtaLabel, slideNCtaHref.
• Transitions — imageTransition, textTransition, duration, easing, and ambient kenBurns.
• Playback — autoplay, interval, and toggles for showArrows, showDots, showCounter, showProgress.
• Style — textPosition, textColor, accentColor, scrim, headingFont/bodyFont, and CTA ctaColor/ctaTextColor/ctaShape.

Best for

• Hospitality, fashion, and luxury-brand landing pages that lead with photography.
• Product showcases and editorial "chapters" where each slide tells one beat of a story.
• Portfolios and case-study reels that need cinematic image-to-image transitions.

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.