Masked Text Carousel

A big heading sits behind a product image; where the image overlaps the words the text shows only its outline (or inverts, or ghosts) while the rest stays solid — the product literally masks the type. Swipeable, with a floating, pointer-reactive product and smooth slide transitions.

React

Image

Interactive

Font

#carousel

#text

#mask

#outline

#product

#typography

#slider

#swipe

Usage

import MaskedTextCarousel from '@crazygl/hero-masked-text-carousel';

export default function Hero() {
  return (
    <MaskedTextCarousel
      slideCount={2}
      slide1Image="/sneaker-1.png"
      slide1Heading="VELOCITY"
      slide1Caption="01 — Aero"
      slide2Image="/sneaker-2.png"
      slide2Heading="MOMENTUM"
      maskEffect="outline"
    />
  );
}

Customise

Slides — slideCount (1–5) and per-slide slideNImage (transparent PNG), slideNHeading, slideNCaption.
Mask effect — maskEffect (outline / invert / ghost), strokeColor, strokeWidth.
Motion — transition (fade/slide/zoom), duration, easing, imageFloat, pointerParallax, autoplay, interval.
Style — bgTop/bgBottom, textColor, accentColor, headingFont, headingWeight, showArrows, showDots, showCaption.

Best for

Sneaker / product launches and e-commerce hero sliders.
Fashion and lifestyle brands with bold one-word headlines.
Portfolio / lookbook carousels where the product is the focus.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-masked-text-carousel

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

import MaskedTextCarousel from '@crazygl/hero-masked-text-carousel';

export default function Landing() {
  return (
    <MaskedTextCarousel />
  );
}

03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import MaskedTextCarousel from '@crazygl/hero-masked-text-carousel';

export default function Page() {
  return (
    <section>
      <MaskedTextCarousel
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}