GitHub Stars

Stargazer list fly-through with a synced odometer counter — renders standalone from sample data or accepts live stargazer props

Installation

$ pnpm dlx shadcn@latest add @remocn/github-stars

Usage

Standalone in a Remotion <Composition> — uses the built-in sample stargazers so the video renders immediately after install:

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GitHubStars } from "@/components/remocn/github-stars";
 
const GitHubStarsScene = () => (
  <GitHubStars
    repo="remotion-dev/remotion"
    totalStars={24813}
    accentColor="#f5a623"
    orientation="horizontal"
    speed={1}
    theme="light"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GitHubStars"
    component={GitHubStarsScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

With live data

Pass fetched stargazers to replace the built-in sample data. Each entry in stargazers drives one row in the fly-through:

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GitHubStars } from "@/components/remocn/github-stars";
 
// Shape returned by your fetch (e.g. from /api/stargazers)
const stargazers = [
  {
    login: "octocat",
    avatarUrl: "https://avatars.githubusercontent.com/u/583231",
    starredAt: "2021-03-15T10:00:00Z",
  },
  // … more entries
];
 
const GitHubStarsScene = () => (
  <GitHubStars
    repo="remotion-dev/remotion"
    totalStars={24813}
    stargazers={stargazers}
    orientation="horizontal"
    accentColor="#f5a623"
    speed={1}
    theme="light"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GitHubStars"
    component={GitHubStarsScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props7

Prop	Type	Default
repo	string"remotion-dev/remotion" Repository shown in the heading (owner/name format)
totalStars	number24813 Total star count the odometer counts up to
stargazers	Stargazer[]SAMPLE_STARGAZERS Array of stargazer objects that populate the fly-through list. Falls back to built-in sample data when omitted.
orientation	"horizontal" \| "vertical""horizontal" Layout orientation — horizontal is 1280x720 (16:9), vertical is 720x1280 (9:16)
accentColor	string"#f5a623" Accent color used for the star icon and counter highlight
speed	number1 Multiplier for the overall animation speed — higher values compress the fly-through
theme	"light" \| "dark""light" Color theme for the composition background and text

repostring
Repository shown in the heading (owner/name format)
Default"remotion-dev/remotion"
totalStarsnumber
Total star count the odometer counts up to
Default24813
stargazersStargazer[]
Array of stargazer objects that populate the fly-through list. Falls back to built-in sample data when omitted.
DefaultSAMPLE_STARGAZERS
orientation"horizontal" | "vertical"
Layout orientation — horizontal is 1280x720 (16:9), vertical is 720x1280 (9:16)
Default"horizontal"
accentColorstring
Accent color used for the star icon and counter highlight
Default"#f5a623"
speednumber
Multiplier for the overall animation speed — higher values compress the fly-through
Default1
theme"light" | "dark"
Color theme for the composition background and text
Default"light"

Stargazer shape

Each item in the stargazers array must conform to this shape:

Prop	Type	Default
login	string— GitHub username displayed in the list row
avatarUrl	string— Full URL to the user's GitHub avatar (must be CORS-accessible for MP4 export)
starredAt	string— ISO 8601 timestamp of when the user starred the repo (e.g. "2021-03-15T10:00:00Z")

loginstring
GitHub username displayed in the list row
avatarUrlstring
Full URL to the user's GitHub avatar (must be CORS-accessible for MP4 export)
starredAtstring
ISO 8601 timestamp of when the user starred the repo (e.g. "2021-03-15T10:00:00Z")