Animated Team Section

A scroll-pinned team section that reveals member portraits and roles with staggered GSAP transitions between two headline beats.

Open in

animated-team-section-demo

The People Behind the Work

S

( Founder & Design Lead )

Sasha Verne

E

( Head of Engineering )

Elias Marsh

C

( Creative Director )

Camille Roux

Building Things That Last

components/ui/animated-team-section-demo.tsx

import { AnimatedTeamSection } from "@/registry/tween/animated-team-section"

export function AnimatedTeamSectionDemo() {
  return <AnimatedTeamSection />
}

Installation


pnpm dlx shadcn@latest add https://tween-www.vercel.app/r/animated-team-section.json

Usage

import { AnimatedTeamSection } from "@/components/ui/animated-team-section"

<AnimatedTeamSection
  intro="Faces Behind the Frame"
  outro="Where Vision Becomes Work"
  members={[
    {
      initial: "C",
      img: "/c.jpg",
      role: "( Creative Director )",
      firstName: "Clara",
      lastName: "Mendel",
    },
    {
      initial: "E",
      img: "/e.jpg",
      role: "( Lead Engineer )",
      firstName: "Elias",
      lastName: "Park",
    },
    {
      initial: "L",
      img: "/l.jpg",
      role: "( Motion Designer )",
      firstName: "Lena",
      lastName: "Voss",
    },
  ]}
/>

The section pins while you scroll and plays out in two beats. Phase 1 holds the intro headline as each member card slides in with a staggered fade, building the roster one portrait at a time. Phase 2 transitions the focus to the outro headline, letting the team fall back so the closing message lands cleanly. Pass your own members array to swap names, roles, and portraits, and tune pinDistance to control how long the section stays locked to the viewport.

Props

Prop	Type	Default	Description
`members`	`AnimatedTeamMember[]`	3 default members	Each member is `{ initial, img, role, firstName, lastName, imgAlt? }`.
`intro`	`ReactNode`	`"Faces Behind the Frame"`	Headline before the team section.
`outro`	`ReactNode`	`"Where Vision Becomes Work"`	Headline after the team section.
`accent`	`string`	`"#fc694c"`	Accent color used for headings and initials.
`ink`	`string`	`"#171717"`	Background ink color.
`cream`	`string`	`"#f2f5ea"`	Card background color.
`pinDistance`	`number`	`2`	Pin duration as a multiple of the section's height.
`scroller`	`HTMLElement \| string \| null`	—	Optional ScrollTrigger scroller; defaults to the ambient preview scroller.
`className`	`string`	—	Extra classes on the outer container.

Scroll SVG Stroke Model Reveal Hero

On This Page

Installation Usage Props

Contribute