Tab Wipe

A centered hero stage. Slides wipe over each other on a clip-path edge while the incoming shot settles out of a slight scale and drift, so the change reads as one movement rather than a crossfade. The thumbnail strip below is a real tablist — click a shot to jump to it, and the stage autoplays again between clicks. GSAP + CustomEase.

New tab

Open in

PreviewCode

Installation#

pnpm dlx shadcn@latest add @tween-ui/tab-wipe

Usage#

import TabWipe from '@/components/tweenui/tab-wipe';
 
export default function Page() {
  return <TabWipe />;
}

Pass your own screens:

import TabWipe from '@/components/tweenui/tab-wipe';
 
export default function Page() {
  return (
    <TabWipe
      slides={[
        { image: '/shots/board.png', alt: 'Workflow board' },
        {
          image: '/shots/reports.png',
          alt: 'Performance dashboard',
          tabImage: '/shots/reports-thumb.png',
        },
        { image: '/shots/team.png', alt: 'Team planning' },
      ]}
    />
  );
}

Drop your own copy above it — the stage brings no heading of its own:

<section className="space-y-10 text-center">
  <h1 className="text-5xl font-medium">Manage everything. Grow faster.</h1>
  <TabWipe className="py-0" />
</section>

Props#

Extends native <section> attributes (className, style, …).

TabWipeSlide#

Accessibility#