Team section showcasing staff members with multiple scroll animations.
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>
)
}
Part of Systaliko UI — browse the full library on 21st.dev.