# Staff Locker Wall Team Section with Steel Doors That Swing Open on a Taped Portrait and a Shelf of Belongings
> Team section drawn as a bank of steel lockers: each door swings open on a taped portrait and a shelf of belongings. Free React and Tailwind code, or HTML.
A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings).
- Page, with a live preview: https://shadcn.exchange/r/weinc/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings
- Screenshot: https://shadcn.exchange/shot/weinc/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings/light.png
- Registry item: https://we.inc/r/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `framer-motion`, `lucide-react`
## Files
### `components/we-inc/staff-locker-wall-team-section-with-steel-doors-that-swing-open-on-a-taped-portrait-and-a-shelf-of-belongings.tsx`
```tsx
import { useCallback, useEffect, useRef, useState } from "react";
import { motion, useReducedMotion, useSpring, useTransform, useVelocity } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";
type Shelf = "mug" | "books" | "flask" | "jar";
type Hung = "apron" | "tote" | "keys" | "towel";
/** One locker per person. `plate` is the card in the door holder, `tape` the note under the photograph. */
const team: { name: string; plate: string; role: string; tape: string; shelf: [Shelf, Shelf]; hung: Hung; tilt: number; photo: { src: string; alt: string; tone: string; focus: string } }[] = [
{
name: "Odile Marchetti",
plate: "MARCHETTI",
role: "Throws the tableware",
tape: "wheel two, mornings",
shelf: ["jar", "mug"],
hung: "apron",
tilt: -2.2,
photo: { src: "https://images.pexels.com/photos/6794113/pexels-photo-6794113.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Woman with long braids in a rust jumper against a yellow wall, hand at her neck", tone: "#e9b423", focus: "50% 22%" },
},
{
name: "Tobias Wren",
plate: "WREN",
role: "Fires both kilns",
tape: "do not open at 900",
shelf: ["flask", "books"],
hung: "keys",
tilt: 1.6,
photo: { src: "https://images.pexels.com/photos/36511044/pexels-photo-36511044.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Man with a moustache in a cream knitted jumper against a terracotta wall", tone: "#b5604d", focus: "50% 24%" },
},
{
name: "Ines Abara",
plate: "ABARA",
role: "Mixes every glaze",
tape: "celadon batch 14",
shelf: ["books", "jar"],
hung: "tote",
tilt: -1.4,
photo: { src: "https://images.pexels.com/photos/11989029/pexels-photo-11989029.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Woman in round glasses and a black roll neck against a bright green wall", tone: "#16b88a", focus: "50% 26%" },
},
{
name: "Rafa Quintero",
plate: "QUINTERO",
role: "Packs and runs the shop",
tape: "back at two",
shelf: ["mug", "flask"],
hung: "towel",
tilt: 2.4,
photo: { src: "https://images.pexels.com/photos/8801041/pexels-photo-8801041.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Smiling man with short curly hair in a pale pink sweatshirt against a pink wall", tone: "#d79aa0", focus: "50% 22%" },
},
];
const studio = "Marchetti and Wren Pottery";
// Design pixels. The whole wall is drawn at this size and scaled to fit.
const SCENE_W = 940;
const SCENE_H = 640;
const CELL = 196; // one locker, frame included
const DOOR_W = 184;
const DOOR_H = 468;
const THICK = 9; // folded edge of the door
const BANK_X = (SCENE_W - CELL * team.length) / 2;
const BANK_Y = 70;
const SWING = 96; // degrees a door opens
const PEEK = 9; // degrees a door lifts off its catch under the pointer
const PAINT = "#2f6377";
const PAINT_DARK = "#1c4252";
const chrome = "linear-gradient(180deg,#fbfcfc 0%,#b4bcc0 26%,#f1f4f5 48%,#7c868b 74%,#c9d0d3 100%)";
const chromeAcross = "linear-gradient(90deg,#8b959a 0%,#f6f8f8 30%,#aab3b7 55%,#eef1f2 72%,#6d777c 100%)";
const speckle =
"radial-gradient(circle at 22% 31%, rgba(255,255,255,0.045) 0 0.6px, rgba(0,0,0,0) 1.1px), radial-gradient(circle at 71% 64%, rgba(0,0,0,0.07) 0 0.7px, rgba(0,0,0,0) 1.2px), radial-gradient(circle at 44% 83%, rgba(255,255,255,0.035) 0 0.6px, rgba(0,0,0,0) 1.1px)";
const speckleSize = "5px 7px, 11px 9px, 13px 17px";
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
function Louvres({ top }: { top: number }) {
return (
