# Team Values And Photos — React Team Section

> A numbered values list that advances on a timer beside a collage of gradient photo tiles; the tiles tied to the active value lift forward while the rest recede.

- Category: [Team & About](https://pixelpapa.com/components/team.md)
- Tags: team, values, collage, about, autoplay
- Dependencies: motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/team/team-values-and-photos

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/team-values-and-photos
```

The file is written to `components/pixelpapa/team-values-and-photos.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/team/team-values-and-photos.

## AI prompt

```text
Add the "Team Values And Photos" component from PixelPapa UI to this project.

What it is: A numbered values list that advances on a timer beside a collage of gradient photo tiles; the tiles tied to the active value lift forward while the rest recede.
Category: Team & About. Depends on: motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/team-values-and-photos
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/team-values-and-photos.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/team-values-and-photos.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/team-values-and-photos" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More team & about

- [About Story Timeline](https://pixelpapa.com/components/team/about-story-timeline.md): Company milestones alternate either side of a centre line that fills as you scroll; each year lights its node and slides its card in from its own side.
- [Team Grid Hover Bio](https://pixelpapa.com/components/team/team-grid-hover-bio.md): A grid of drawn gradient portraits; hovering or focusing a person slides a frosted bio panel up over the portrait while the silhouette drifts back.
- [Team Leadership Rows](https://pixelpapa.com/components/team/team-leadership-rows.md): Leadership as large typographic rows between hairlines; the hovered or focused row springs open to show a portrait, a quote and a few facts.