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.

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

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

Props5

Prop	Type	Default
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	number1 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

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

Prop	Type	Default
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)

loginstring
GitHub username (used for the avatar fallback initial)
avatarUrlstring
Full URL to the avatar image (must be CORS-accessible for MP4 export)

Usage

With live data

Props5

Sponsor shape