Draggable film strip

Draggable film strip of portrait cards.

Usage

import { TeamFilmStrip } from '@/components/blocks/team-02'


<TeamFilmStrip />


// Bring your own people
<TeamFilmStrip
  eyebrow="Our team"
  heading="The people behind the product"
  initialIndex={0}
  members={[
    { name: 'Jane Doe', role: 'Founder', photo: 'https://example.com/jane.jpg', href: '/team/jane' },
    { name: 'Sam Lee', role: 'Engineer', photo: 'https://example.com/sam.jpg' },
  ]}
  onActiveChange={(index, member) => console.log(index, member.name)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/team-02

npx shadcn@latest add @pastaui-pro/team-02

yarn dlx shadcn@latest add @pastaui-pro/team-02

bunx --bun shadcn@latest add @pastaui-pro/team-02

Source

Props

Draggable film strip props
Prop	Type	Default	Description
eyebrow	string	= 'The crew'	Small label above the heading. Pass an empty string to hide it.
heading	string	= 'The people behind every frame'	Section heading, rendered as an h2 that also names the carousel.
description	string	= A short intro line	Supporting text under the heading. Pass an empty string to hide it.
members	{ name: string; role: string; photo: string; href?: string }[]	= 8 sample people	People on the strip. Tall photos (about 4:5) crop best, and the alt text is "Portrait of" plus the name. An href turns the centred card's name into a profile link.
initialIndex	number	= 2	Zero-based index of the card that starts in the centre.
onActiveChange	(index: number, member: FilmStripMember) => void	= —	Called whenever a different card reaches the centre, including mid-drag.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.