Team Section

Component 79

About

Team section showcasing staff members with multiple scroll animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Team Section to your project and fits it to your theme.

Code

How Team Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollAnimation,
  ScrollScale,
  ScrollTranslateX,
  ScrollTranslateY } from "@/components/ui/team-section";
import Image from 'next/image';
import { cn } from '@/lib/utils';

interface TeamMember {
  avatar: string;
  name: string;
  role: string;
}
const TEAM_MEMBERS: TeamMember[] = [
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/ca/ca39ffeb331678eeb00adcce52e269648b9da66dff11caf7b330ab05b7bb0752.jpg',
    name: 'Magdalina',
    role: 'CEO',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/86/863d75f3ed4f120b30453d72ecc53289c9052f5d508d8974bdd505e4f71a2ee2.jpg',
    name: 'Jamie',
    role: 'CTO',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/3f/3f3ec33e5a7f65696c380dcb4ed3ce4d6ec22ed979f345c0d02ad706dcf5d593.jpg',
    name: 'Emilio',
    role: 'CTO',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/49/49b616f261054c96e462a1ee72396347709aa5061cd4c24e2f22227f6b3eb41b.jpg',
    name: 'Samia',
    role: 'COO',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/b3/b365f638914ecaeaf1a2330dc3a74a4590f3b169afd813fa73c12cb36e36ddec.jpg',
    name: 'Alex',
    role: 'Engineer',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/50/50d05ce115ef6c3bf24e3336fb0c834f99a02a32559fcfe82d08ec6f812be253.jpg',
    name: 'Ema',
    role: 'Head of Product',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/ff/ff891e2e59b61db0c6bb3467f3c32fe25f067daf40d883b9ebab3815abe92943.jpg',
    name: 'Carlos',
    role: 'Engineer',
  },
  {
    avatar:
      'https://cdn.21st.dev/assets/mirror/b3/b36a916cf48e0c67651a07ac58a018ec80cd89c1dcfd84816958335cf06d5283.jpg',
    name: 'Campos',
    role: 'Engineer',
  },
];

export function TeamCard({
  member,
  className,
  ...props
}: React.ComponentProps<'div'> & { member: TeamMember }) {
  return (
    <div className={cn('space-y-6', className)} {...props}>
      <Image
        src={member.avatar}
        alt={member.name}
        width={200}
        height={200}
        className="aspect-square w-full"
      />

      <div className="space-y-1 pb-4 px-4">
        <h3 className="text-xl font-medium">{member.name}</h3>
        <h4>{member.role}</h4>
      </div>
    </div>
  );
}

export default function DemoOne() {
  return (
     <ScrollAnimation className="overflow-hidden">
      <ScrollTranslateY className="min-h-svh flex flex-col justify-center items-center gap-6">
        <div className="w-full ">
          <ScrollTranslateX
            xRange={['-200%', '0%']}
            inputRange={[0.4, 0.9]}
            className="origin-bottom flex flex-nowrap gap-4"
          >
            {TEAM_MEMBERS.map((member, index) => (
              <TeamCard
                className="min-w-[48vw] md:min-w-[20vw] bg-card border"
                key={index}
                member={member}
              />
            ))}
          </ScrollTranslateX>
        </div>
        <ScrollScale
          inputRange={[0, 0.5]}
          scaleRange={[1.4, 1]}
          className="w-10/12 flex flex-col justify-center text-center items-center mx-auto origin-center"
        >
          <h2 className="text-4xl md:text-5xl font-bold">
            Compact team of <span className="text-indigo-500">strategists</span>
          </h2>
        </ScrollScale>
        <div className="w-full ">
          <ScrollTranslateX
            inputRange={[0.4, 0.9]}
            xRange={['100%', '-50%']}
            className="flex flex-nowrap gap-4"
          >
            {TEAM_MEMBERS.map((member, index) => (
              <TeamCard
                className="min-w-[48vw] md:min-w-[20vw] bg-card border"
                key={index}
                member={member}
              />
            ))}
          </ScrollTranslateX>
        </div>
      </ScrollTranslateY>
    </ScrollAnimation>
  )
}