Tween UITween UI
7

Blocks

Team Scatter Focus

A team collage whose cards fly in from their own directions, then blur away from the one you hover.

A ready-made team section. Cards sit on a scattered collage rather than a grid, each flying in from its own direction. Hover one and the rest blur and shrink back, so a single face holds the frame. Below lg the collage would overlap, so the same cards fall into a stacked grid. GSAP-driven, pointer-only.

New tab

The people who make it happen

Each member brings deep expertise and a shared focus — building solutions that are not only beautiful but built to perform.

John Smith in the studio

John Smith

CEO & Founder

John Lacker reviewing artwork

John Lacker

Creative Director

William Finley at his desk

William Finley

Lead Designer

Micheal Jordan on a client call

Micheal Jordan

Account Director

Jack Lavis pairing on code

Jack Lavis

Senior Developer

Installation

pnpm dlx shadcn@latest add @tween-ui/team-scatter-focus

Usage

app/page.tsx
app/page.tsx
import TeamScatterFocus from '@/components/tweenui/team-scatter-focus';
 
export default function Page() {
  return <TeamScatterFocus />;
}

Pass your own people:

app/page.tsx
app/page.tsx
import TeamScatterFocus from '@/components/tweenui/team-scatter-focus';
 
export default function Page() {
  return (
    <TeamScatterFocus
      title="Meet the studio"
      members={[
        {
          name: 'John Smith',
          role: 'CEO & Founder',
          image: '/team/john.jpg',
          href: '/team/john-smith',
          social: 'https://x.com/john',
        },
        {
          name: 'William Finley',
          role: 'Lead Designer',
          image: '/team/william.jpg',
          href: '/team/william-finley',
        },
      ]}
    />
  );
}

Placing the cards

Every member can carry its own position (absolute Tailwind classes) and direction. Leave them out and the component uses its five built-in scatter slots in order, so an arbitrary list still lands as a collage instead of a stack:

<TeamScatterFocus
  members={[
    {
      name: 'John Smith',
      role: 'CEO & Founder',
      image: '/team/john.jpg',
      position: 'z-2 left-[3%] top-[84px] xl:left-0',
      direction: 'left',
    },
  ]}
/>

Props

PropTypeDefaultDescription
titleReactNodesample headingSection heading.
descriptionstringsample lineSupporting line under the heading.
membersTeamScatterFocusMember[]five peoplePeople in the collage.

Extends native <section> attributes (className, style, …).

TeamScatterFocusMember

FieldTypeDescription
name · rolestringShown under the portrait.
image · imageAltstringPortrait; imageAlt falls back to name.
hrefstringMember page. Defaults to #.
socialstringAdds the corner button. Omit it and no button renders.
positionstringAbsolute placement classes. Falls back by index.
direction'left' | 'right' | 'up' | 'down'Where the card travels in from. Falls back by index.

Accessibility

Each social button is labelled with the member's name, and portraits fall back to that name for alt text. The blur-and-shrink runs only for (hover: hover) and (pointer: fine) pointers, so touch users get a plain collage. Under prefers-reduced-motion: reduce nothing animates — no fly-in, no blur — and every card renders at its final position.