Hero Section

Full-screen hero with a word-by-word typing animation, blinking cursor, "Previously at" scramble reveal, and composable AutoplayTabs + OrgsOverviewDialog slots.

HeroSection orchestrates the full-screen hero entrance: a word-by-word typing animation for primaryText and secondaryText using a BlinkingCursor, a slide-up reveal for the "Previously at" heading with a scramble effect, and slide-up entry for the AutoplayTabs slot. Audio is removed — use onReadyToStartAutoplay and onAnimationComplete callbacks to wire up any side effects. Background content is injected via the background slot.

Installation

npx shadcn@latest add @adv/hero-section

Usage

import { HeroSection } from '@/components/sections/hero-section';
import { AutoplayTabs } from '@/components/autoPlayTabs/AutoplayTabs';
import { OrgsOverviewDialog } from '@/components/autoPlayTabs/OrgsOverviewDialog';

function Page() {
  const [autoplay, setAutoplay] = useState(false);

  return (
    <HeroSection
      primaryText="Hi, I'm Alex. I'm a product designer."
      secondaryText=" I help teams ship products people love."
      onReadyToStartAutoplay={() => setAutoplay(true)}
      autoplayTabs={
        <AutoplayTabs tabs={tabs} shouldStartAutoplay={autoplay} />
      }
      previouslyAtAction={<OrgsOverviewDialog orgs={orgs} />}
    />
  );
}

Example

Props

Prop	Type	Default	Description
`primaryText`	`string`	Generic placeholder	Bold primary sentence typed first.
`secondaryText`	`string`	Generic placeholder	Secondary sentence appended after primary. Pass `""` to omit.
`previouslyAtLabel`	`string`	`"/ Previously at"`	Label for the "Previously at" heading (also scramble target).
`autoplayTabs`	`React.ReactNode`	—	Slot for `AutoplayTabs` or any other content.
`previouslyAtAction`	`React.ReactNode`	—	Slot to the right of the "Previously at" heading (e.g. `OrgsOverviewDialog`).
`background`	`React.ReactNode`	—	Full-bleed background slot (behind content).
`backgroundWrapperClassName`	`string`	—	className on the background wrapper div.
`skipAnimation`	`boolean`	`false`	Show everything immediately without animating.
`onAnimationComplete`	`() => void`	—	Called when the entrance animation finishes.
`onReadyToStartAutoplay`	`() => void`	—	Called when the AutoplayTabs section has entered — wire to `shouldStartAutoplay`.

Hero Section

Installation

Usage

Example

Props

On this page