# GitHub Sponsors
URL: https://remocn.dev/docs/social/github-sponsors

Animated GitHub Sponsors lockup — a self-drawing heart that docks to a header, every sponsor avatar blur-staggering into a grid, then a thank-you headline and a CTA

- Install: `npx shadcn@latest add @remocn/github-sponsors`
- Vibe: social
- Natural length: 270f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/github-sponsors
```

## Usage

Standalone in a Remotion `<Composition>` — renders immediately from built-in sample sponsors so the video works right after install.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GitHubSponsors } from "@/components/remocn/github-sponsors";

const GitHubSponsorsScene = () => (
  <GitHubSponsors
    account="remotion-dev"
    accentColor="#db61a2"
    speed={1}
    theme="light"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GitHubSponsors"
    component={GitHubSponsorsScene}
    durationInFrames={270}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### With live data

Pass a `sponsors` array of `{ login, avatarUrl }` to replace the built-in sample. Every sponsor in the array is shown — the grid sizes itself to the count, and the "Powered by N sponsors" line uses the array length.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GitHubSponsors } from "@/components/remocn/github-sponsors";

const sponsors = [
  {
    login: "octocat",
    avatarUrl: "https://avatars.githubusercontent.com/u/583231",
  },
  // …
];

const GitHubSponsorsScene = () => (
  <GitHubSponsors
    account="remotion-dev"
    sponsors={sponsors}
    accentColor="#db61a2"
    speed={1}
    theme="light"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GitHubSponsors"
    component={GitHubSponsorsScene}
    durationInFrames={270}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `account` | `string` | `"remotion-dev"` | GitHub account shown in the lockup (github.com/sponsors/account) |
| `sponsors` | `Sponsor[]` | `SAMPLE_SPONSORS` | Every entry is shown — avatars blur-stagger into a grid that sizes to the array. Falls back to built-in sample data when omitted. |
| `accentColor` | `string` | `"#db61a2"` | Accent for the heart and the CTA pill (GitHub Sponsors pink) |
| `speed` | `number` | `1` | Animation speed multiplier (minimum 1; the headline and CTA must land before the final frame) |
| `theme` | `"light" \| "dark"` | `"light"` | Color theme for background and text |

### Sponsor shape

| Prop | Type | Default | Description |
|---|---|---|---|
| `login` | `string` | — | GitHub username (used for the avatar fallback initial) |
| `avatarUrl` | `string` | — | Full URL to the avatar image (must be CORS-accessible for MP4 export) |

## Use when
- A thank-you beat for funders — the heart draws itself, docks upward, and every sponsor avatar blur-staggers into a grid beneath it.
- An OSS funding ask needs to end on the "Become a sponsor" pill and the github.com/sponsors/<account> line.
- You want the card to size itself to a live sponsor list, since the grid columns and the "Powered by N sponsors" line both derive from the array length.

## Don't use when
- The milestone is a star count rather than funding — use `github-stars`, whose odometer counts up to a total.
- The subject is one person's profile instead of a group of supporters — use `x-follow-card`.
- You need a neutral partner or integration lineup without the Sponsors heart and pink CTA — use `logo-enter`.