Intro Gate — Case Study

A drop-in gate that plays an IntroSequence on first visit and then renders the full ItemPageLayout + ItemModalContent. Completion is persisted to localStorage.

IntroGateCaseStudy orchestrates the full case-study page lifecycle:

On first visit it plays IntroSequence (configured by workItem.intro).
Once the viewer clicks "Continue", completion is written to localStorage via markIntroCompleted.
On subsequent visits shouldShowIntro returns false and the component renders ItemPageLayout + ItemModalContent directly.

URL params let you override this logic without touching localStorage:

?intro=force — always show the intro.
?intro=disable — always skip the intro.
?intro-debug=true — attaches window.introDebug helpers.

Installation

npx shadcn@latest add @adv/intro-gate-case-study

Pulls in: @adv/intro-utils, @adv/intro-sequence, @adv/item-page-layout, @adv/item-modal-content, @adv/item-header-blocks. Also requires next.

Usage

import IntroGateCaseStudy from '@/components/IntroGateCaseStudy';
import type { WorkTheme } from '@/components/ui/ItemModalContent';
import type { DiscoverMoreItem } from '@/components/ui/DiscoverMore';

// Wrap in Suspense — uses useSearchParams internally.
<Suspense fallback={null}>
  <IntroGateCaseStudy
    workItem={workItem}
    prevItem={prevItem}
    nextItem={nextItem}
    basePath="/work/acme/case/"
    breadcrumb={[{ label: 'Work', href: '/work' }, { label: workItem.company }]}
    rightSideContent={<SidePanel />}
    backButtonId="case-study-back"
    defaultBackPath="/work"
    backButtonText="Back to Work"
    authorName="Design Team"
    theme={theme}
    discoverMoreItems={discoverItems}
  />
</Suspense>

The workItem object must include an intro field of type IntroConfig for the intro to activate:

const workItem = {
  id: 'aurora',
  title: 'Aurora Dashboard',
  // ...other WorkItemData fields...
  intro: {
    enabled: true,
    sections: [
      { type: 'meta', title: 'Aurora Dashboard', companyName: 'Acme Corp' },
      { type: 'static', content: '<p>Ready?</p>', includeContinueButton: true },
    ],
  },
};

Example

Intro Sequence

Case Study: Aurora Dashboard

The intro sequence plays here — animated text sections, horizontal scroll cards, and meta sections — driven by IntroConfig. Completed state is persisted to localStorage via intro-utils.

Props

Prop	Type	Default	Description
`workItem`	`WorkItemData`	—	Case-study data including optional `intro: IntroConfig`.
`prevItem`	`{ id; title } \| null`	—	Previous item for navigation.
`nextItem`	`{ id; title } \| null`	—	Next item for navigation.
`basePath`	`string`	—	URL prefix for pagination links.
`breadcrumb`	`BreadcrumbItem[]`	—	Breadcrumb items passed to `ItemPageLayout`.
`rightSideContent`	`React.ReactNode`	—	Content for the right-side panel in `ItemPageLayout`.
`backButtonId`	`string`	—	Element ID for the back button (used by routing).
`defaultBackPath`	`string`	—	Fallback path for the back button.
`backButtonText`	`string`	—	Label for the back button.
`authorName`	`string`	—	Fallback author name for the intro meta section when `workItem.author` is absent.
`theme`	`WorkTheme`	—	Optional dark/light theme for carousel MeshGradient colors.
`discoverMoreItems`	`DiscoverMoreItem[]`	—	Items for the Discover More section inside `ItemModalContent`.