Intro Sequence

A multi-section intro renderer that drives animated text, horizontal scroll, meta, and static sections before gating case-study content.

IntroSequence renders an ordered list of IntroSection entries defined in an IntroConfig. It supports four section types:

meta — title card with company logo, author, published date, and tag pills, backed by a diamond WebGL background on the first section.
animated-text — wraps HTML content in AnimatedTextSection for GSAP scroll-driven word reveal.
horizontal-scroll — renders HorizontalScrollSection with a card array.
static — plain HTML content in a Section wrapper, optionally with an inline continue button.

When all sections have been shown, a sticky "Continue" button calls markIntroCompleted (via @adv/intro-utils) and fires onComplete.

Installation

npx shadcn@latest add @adv/intro-sequence

This pulls in: @adv/animated-text-section, @adv/horizontal-scroll-section, @adv/section, @adv/intro-utils.

Usage

import IntroSequence from '@/components/IntroSequence';
import type { IntroConfig } from '@/lib/intro-utils';

const intro: IntroConfig = {
  enabled: true,
  continueButtonText: 'Continue to Case Study',
  sections: [
    {
      type: 'meta',
      title: 'Aurora Dashboard',
      author: 'Design Team',
      published: '2024',
      companyName: 'Acme Corp',
      tags: ['Product Design', 'React'],
    },
    {
      type: 'animated-text',
      content: '<p>Building for the future of analytics.</p>',
    },
    {
      type: 'static',
      content: '<p>Ready to dive in?</p>',
      includeContinueButton: true,
    },
  ],
};

<IntroSequence
  itemId="aurora-dashboard"
  intro={intro}
  onComplete={() => console.log('done')}
/>

Example

Props

Prop	Type	Default	Description
`itemId`	`string`	—	Unique ID used to persist completion in `localStorage`.
`intro`	`IntroConfig`	—	Configuration object with `sections`, `enabled`, `continueButtonText`.
`onComplete`	`() => void`	—	Called after the continue button is clicked and completion is marked.
`continueButtonText`	`string`	`"Continue to Case Study"`	Override button label (lower priority than per-section `continueButtonText`).
`debug`	`boolean`	`false`	Shows a debug note below the continue button.
`meta`	`IntroMetaData`	—	Fallback metadata for `meta`-type sections if fields are omitted in the section definition.

Intro Sequence

Installation

Usage

Example

Props

On this page