Team Grid
A team arriving person by person — the avatar springs up first, the name and role follow it into place.
SceneScenes
$ npx remotion-ui@latest add team-gridEach tile lands as one object: the avatar springs up, its ring closes from a thin stroke to a full one, and the name and role follow about a tenth of a second behind. Fading all three together is the version that looks like a placeholder loading; staggering them inside the tile is what gives the arrival depth.
The stagger runs in reading order rather than by row or column. A grid of any width then feels like a list being read out, where a row-by-row wipe feels like a slide transition applied to people.
Initials are derived from the name — first letters of the first two words —
which is right for most Latin names and wrong for enough others that
initials is worth passing by hand when it matters. Avatar colours cycle
through avatarColors by index, so a longer team keeps varying without you
assigning a colour to each person.
Four columns at 1080p keeps names on one line. Past eight or so people, drop to
columns={5} and shorten the roles before you shrink the type.
Initials are the first letters of the first two words — right for most Latin names and wrong for enough others that `initials` is worth passing by hand. The avatar springs up ahead of its name and role so each tile lands as one object with depth rather than three elements agreeing to fade.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/team-grid- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: members, title, subtitle, columns, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { TeamGrid } from "@/remotion/scenes/team-grid";
<TeamGrid
title="The people behind it"
subtitle="Eight of us, four timezones."
members={[
{ name: "Ada Okonjo", role: "Founder" },
{ name: "Piotr Nowak", role: "Rendering" },
{ name: "Dai Nakamura", role: "Design systems" },
]}
columns={4}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| members | TeamMember[] | 8 sample people | Name, role, optional avatar tint and hand-written initials. |
| title | string | "The people behind it" | Heading above the grid. Omit to drop it. |
| subtitle | string | "Eight of us, four timezones." | Line under the heading. |
| columns | number | 4 | Members per row. Four keeps names on one line at 1080p. |
| startAtSeconds | number | 0.4 | Second the first avatar arrives. |
| staggerSeconds | number | 0.2 | Seconds between members, in reading order. |
| holdSeconds | number | - | Seconds the settled grid holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Role line on the first member — the one you want read first. |
| avatarColors | string[] | 6 tints | Cycled by index for members with no colour of their own. |
| backgroundColor | string | - | Page behind the grid. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |