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

Installation

$ pnpm dlx 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.

// 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}
  />
);

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.

// 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

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)

GitHub Sponsors

Installation

Usage

With live data

Props

Sponsor shape