Stars

4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T79c2,"use client"; import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono"; import { loadFont as loadSans } from "@remotion/google-fonts/Manrope"; import { format, parseISO } from "date-fns"; import { memo, useMemo, useState } from "react"; import { AbsoluteFill, Easing, Img, interpolate, useCurrentFrame, useVideoConfig, } from "remotion"; import { Odometer } from "@/components/remocn/number-wheel"; export interface Stargazer { login: string; avatarUrl: string; /** ISO date string, e.g. "2021-03-04" */ starredAt: string; } export interface GitHubStarsProps { repo?: string; totalStars?: number; stargazers?: Stargazer[]; orientation?: "horizontal" | "vertical"; accentColor?: string; speed?: number; theme?: "light" | "dark"; repoAvatarUrl?: string; } /** * Built-in mock stargazers so the composition renders immediately from defaults * (own-your-code: no external data needed after `shadcn add`). Real low-id GitHub * avatar URLs are CORS-ok, so the docs preview shows round photos. */ const RAW_SAMPLE_STARGAZERS: Stargazer[] = [ { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, { login: "mojombo", avatarUrl: "https://avatars.githubusercontent.com/u/1?v=4", starredAt: "2021-03-04", }, { login: "defunkt", avatarUrl: "https://avatars.githubusercontent.com/u/2?v=4", starredAt: "2021-06-12", }, { login: "pjhyett", avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4", starredAt: "2021-09-21", }, { login: "wycats", avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4", starredAt: "2021-12-08", }, { login: "ezmobius", avatarUrl: "https://avatars.githubusercontent.com/u/14?v=4", starredAt: "2022-03-17", }, { login: "ivey", avatarUrl: "https://avatars.githubusercontent.com/u/18?v=4", starredAt: "2022-06-29", }, { login: "evanphx", avatarUrl: "https://avatars.githubusercontent.com/u/25?v=4", starredAt: "2022-09-14", }, { login: "vanpelt", avatarUrl: "https://avatars.githubusercontent.com/u/26?v=4", starredAt: "2022-12-23", }, { login: "wayneeseguin", avatarUrl: "https://avatars.githubusercontent.com/u/28?v=4", starredAt: "2023-03-09", }, { login: "brynary", avatarUrl: "https://avatars.githubusercontent.com/u/30?v=4", starredAt: "2023-07-19", }, { login: "kevinclark", avatarUrl: "https://avatars.githubusercontent.com/u/31?v=4", starredAt: "2023-11-02", }, { login: "technoweenie", avatarUrl: "https://avatars.githubusercontent.com/u/21?v=4", starredAt: "2024-02-15", }, ]; export const SAMPLE_STARGAZERS: Stargazer[] = (() => { const occurrences = new Map(); return RAW_SAMPLE_STARGAZERS.map((stargazer) => { const occurrence = (occurrences.get(stargazer.login) ?? 0) + 1; occurrences.set(stargazer.login, occurrence); return occurrence === 1 ? stargazer : { ...stargazer, login: `${stargazer.login}-${occurrence}` }; }); })(); // Load fonts INSIDE the composition (via @remotion/google-fonts, which waits for // the font with delayRender before rendering frames). Server renders run in a // bare headless Chromium with no app CSS / `--font-*` vars, so without this the // MP4 falls back to the default sans-serif. Manrope for UI text, JetBrains Mono // for the numeric star counter (odometer). const { fontFamily: SANS_FAMILY } = loadSans(); const { fontFamily: MONO_FAMILY } = loadMono(); const FONT_FAMILY = SANS_FAMILY; interface Theme { bg: string; bgSubtle: string; fg: string; fgMuted: string; border: string; } const THEMES: Record<"light" | "dark", Theme> = { light: { bg: "#ffffff", bgSubtle: "#fafafa", fg: "#171717", fgMuted: "#737373", border: "#ededed", }, dark: { bg: "#0a0a0a", bgSubtle: "#111113", fg: "#fafafa", fgMuted: "#a1a1aa", border: "#262626", }, }; // --- Pure helpers (unit-tested) ------------------------------------------- /** * Clamp a stargazer list to at most `max` evenly-sampled keyframe rows while * always preserving the first and last entry. Safety net for callers that pass * a huge array straight into the composition. */ export function downsampleStargazers( stargazers: Stargazer[], max = 60, ): Stargazer[] { const len = stargazers.length; if (len <= max) return stargazers; if (max <= 1) return len ? [stargazers[0]] : []; const out: Stargazer[] = []; for (let i = 0; i < max; i++) { out.push(stargazers[Math.round((i * (len - 1)) / (max - 1))]); } return out; } const MAX_ELASTIC_OVERSHOOT = 0.0658; // Easing.elastic(1) peak−1 (true ≈0.0657267), rounded UP for use as a safety bound const SCROLL_OVERSHOOT = 1 + MAX_ELASTIC_OVERSHOOT; // ≈1.0658 const MASK_SOLID_FRACTION = 0.88; // bottom fade mask is solid until 88% of viewport height const COUNT_PORTION = 0.8; /** Monotonic counter ramp — mirrors the reference StarCount easing. Drives the * odometer, which must stay monotonic or the digit wheels roll backward. */ export function computeCounterProgress({ frame, speed = 1, durationInFrames, }: { frame: number; speed?: number; durationInFrames: number; }): number { return interpolate( frame * speed, [0, durationInFrames * COUNT_PORTION], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.5, 1, 0.5, 1), }, ); } /** Elastic scroll ramp — mirrors the reference avatar slide. NON-monotonic: * overshoots to ~SCROLL_OVERSHOOT near t≈0.63 and settles to exactly 1 at t=1. * Drives only scrollY (never the odometer). */ export function computeScrollProgress({ frame, speed = 1, durationInFrames, }: { frame: number; speed?: number; durationInFrames: number; }): number { return interpolate(frame * speed, [0, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.elastic(0.8), }); } /** Empty rows appended below the last stargazer so the elastic recoil never * lifts real content off the mask-solid zone, revealing a void. Single source * of truth shared with isScrollContained so the two cannot drift. */ export function computeSpacerRows({ N, rowH, viewportH, visibleRows, }: { N: number; rowH: number; viewportH: number; visibleRows: number; }): number { const D = Math.max(0, (N - visibleRows + 1) * rowH); const needPx = MASK_SOLID_FRACTION * viewportH - N * rowH + SCROLL_OVERSHOOT * D; return Math.max(0, Math.ceil(needPx / rowH)); } /** True when, at the elastic overshoot peak, content still fills the mask-solid * zone (no void revealed). True by construction given computeSpacerRows. */ export function isScrollContained({ N, rowH, viewportH, visibleRows, }: { N: number; rowH: number; viewportH: number; visibleRows: number; }): boolean { const D = Math.max(0, (N - visibleRows + 1) * rowH); const spacerPx = computeSpacerRows({ N, rowH, viewportH, visibleRows }) * rowH; return ( N * rowH + spacerPx - SCROLL_OVERSHOOT * D >= MASK_SOLID_FRACTION * viewportH ); } /** The running counter value for a given scroll progress. Locks at totalStars. */ export function getStarCount( scrollProgress: number, totalStars: number, ): number { return Math.round(scrollProgress * totalStars); } // --- Sub-components -------------------------------------------------------- function StarGlyph({ size, fill }: { size: number; fill: string }) { return ( ); } function Avatar({ login, avatarUrl, size, theme, }: { login: string; avatarUrl: string; size: number; theme: Theme; }) { const [errored, setErrored] = useState(false); const ringStyle = { width: size, height: size, borderRadius: 9999, border: `1px solid ${theme.border}`, flexShrink: 0, } as const; if (errored || !avatarUrl) { return (

{login.charAt(0).toUpperCase()}

); } return (

setErrored(true)} style={{ ...ringStyle, objectFit: "cover" }} /> ); } interface RowProps { stargazer: Stargazer; index: number; rowH: number; avatarSize: number; loginSize: number; dateLabel: string; accent: string; theme: Theme; isActive: boolean; settle: number; showSeparator: boolean; opacity: number; } const Row = memo(function Row({ stargazer, index, rowH, avatarSize, loginSize, dateLabel, accent, theme, isActive, settle, showSeparator, opacity, }: RowProps) { return (

{isActive && ( <>

)}

{stargazer.login}

{dateLabel}

#{index + 1}

); }); // --- Main composition ------------------------------------------------------ export function GitHubStars({ repo = "remotion-dev/remotion", totalStars = 24813, stargazers = SAMPLE_STARGAZERS, orientation = "horizontal", accentColor = "#ffbb00", speed = 1, theme = "light", repoAvatarUrl, }: GitHubStarsProps) { const frame = useCurrentFrame(); const { durationInFrames, width, height } = useVideoConfig(); const t = THEMES[theme] ?? THEMES.light; const isVertical = orientation === "vertical"; // Render at the native reference size for the orientation, then scale to fit // the actual canvas — keeps proportions at any resolution and letterboxes a // vertical layout cleanly inside a horizontal preview canvas. const refW = isVertical ? 720 : 1280; const refH = isVertical ? 1280 : 720; const stageScale = Math.min(width / refW, height / refH); const rows = useMemo(() => downsampleStargazers(stargazers), [stargazers]); const N = rows.length; // Progress drivers: monotonic counter ramp + non-monotonic elastic scroll. const counterProgress = computeCounterProgress({ frame, speed, durationInFrames, }); const pScroll = computeScrollProgress({ frame, speed, durationInFrames }); const p = Math.max(0, Math.min(1, (frame * speed) / durationInFrames)); const current = counterProgress * totalStars; // List viewport geometry (in reference px). const rowH = isVertical ? 96 : 88; const avatarSize = isVertical ? 60 : 56; const loginSize = isVertical ? 30 : 28; const dateFormat = isVertical ? "MMM yyyy" : "MMM d, yyyy"; const formattedRows = useMemo( () => rows.map((sg) => { try { return { sg, dateLabel: format(parseISO(sg.starredAt), dateFormat) }; } catch { return { sg, dateLabel: sg.starredAt }; } }), [rows, dateFormat], ); const viewport = isVertical ? { x: 48, y: 320, w: 624, h: 888, radius: 28 } : { x: 560, y: 60, w: 640, h: 600, radius: 24 }; const visibleRows = Math.floor(viewport.h / rowH); const D = Math.max(0, (N - visibleRows + 1) * rowH); const scrollY = -pScroll * D; const spacerRows = computeSpacerRows({ N, rowH, viewportH: viewport.h, visibleRows, }); const spacerPx = spacerRows * rowH; const settle = interpolate(p, [0.92, 1], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); // Counter zone type scale. const counterSize = isVertical ? 96 : 120; const starSize = isVertical ? 56 : 64; const underlineMax = isVertical ? 200 : 240; const underlineWidth = counterProgress * underlineMax; const fadeH = Math.round(viewport.h * 0.12); const listViewport = (

{formattedRows.map(({ sg, dateLabel }, i) => ( ))} {spacerPx > 0 && (

); const underline = (

); const repoOwner = repo.split("/")[0] || repo; const repoAvatarSize = isVertical ? 28 : 32; const repoAvatarSrc = repoAvatarUrl ?? `https://unavatar.io/github/${repoOwner}`; const repoSlug = (

{repo}

); const counterZone = isVertical ? (

{underline} {repoSlug}

) : (

{underline}

{repoSlug}

); return (

{counterZone} {listViewport}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remotion"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","@remotion/google-fonts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40remotion%2Fgoogle-fonts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@remotion/google-fonts"}]]}]}]]}],["$","$L4e",null,{"namespace":"@remocn","registryDependencies":["@remocn/number-wheel"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/remocn/github-stars/index.tsx","content":"$50","type":"registry:component","target":"components/remocn/github-stars.tsx"}],"className":"h-[70svh] min-h-80"}]]}]