Auto Play Tabs

An autoplay tab strip with a GSAP progress bar, per-tab visibility gating, a custom cyberpunk cursor on content hover, and an optional "more orgs" WorkListWithPreview panel.

AutoplayTabs renders a sticky, horizontally-scrollable tab strip that auto-advances on a configurable interval. Each tab reveals a two-column panel: text + highlights on the left, a lazy-loaded hero image on the right. A custom cursor (AnimatedCyberpunkCursor) appears when hovering navigable content. Tabs with visibility: 'inert' display a "soon" badge; 'hidden' tabs are excluded from the strip. A special "more-orgs" tab can render a WorkListWithPreview instead.

Installation

npx shadcn@latest add @adv/auto-play-tabs

Usage

import { AutoplayTabs } from '@/components/autoPlayTabs/AutoplayTabs';

<AutoplayTabs
  tabs={tabs}
  autoplayConfig={{ enabled: true, interval: 5000 }}
  shouldStartAutoplay
  onSelect={(tab) => router.push(tab.href!)}
/>

Example

Props

Prop	Type	Default	Description
`tabs`	`AutoplayTab[]`	—	Tab definitions (see below).
`autoplayConfig`	`AutoplayTabsConfig`	`{ enabled: true, interval: 5000, pauseOnHover: true }`	Autoplay settings.
`shouldStartAutoplay`	`boolean`	`true`	Delay autoplay start (e.g. until hero animation completes).
`className`	`string`	`""`	Outer wrapper className.
`onSelect`	`(tab) => void`	`window.location.href = tab.href`	Navigation callback for content panel clicks.
`moreOrgsData`	`MoreOrgsTabData`	—	Data for the "more-orgs" tab panel (WorkListWithPreview).
`moreOrgsTabId`	`string`	`"more-orgs"`	Id of the tab that triggers the WorkListWithPreview layout.

AutoplayTab

Field	Type	Default	Description
`id`	`string`	—	Unique tab id.
`title`	`string`	—	Short label in the tab strip.
`subtitle`	`string`	—	Small subtitle under the title.
`description`	`string`	—	H3 heading in the content panel.
`content`	`string`	—	Body text in the content panel.
`image`	`string`	—	Hero image URL (lazy-loaded).
`role`	`string`	—	Role label (e.g. "Lead Product Designer").
`companyType`	`string`	—	Company type label (e.g. "B2B").
`highlights`	`string[]`	`[]`	Badge chips shown as "Worked On".
`href`	`string`	—	Navigation target when content panel is clicked.
`visibility`	`'visible' \| 'inert' \| 'hidden'`	`'visible'`	Gating state.
`ctaText`	`string`	`"View Projects"`	CTA button label.