{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "x-followers-overview", "title": "X Followers Overview", "description": "X follow notifications cycle through as 3D flipping text — ' followed you · 7h' — then the total follower count pops in with a confetti burst. Hardcoded sample list (X API ready). Light/dark, horizontal or vertical.", "dependencies": ["remotion", "@remotion/google-fonts"], "registryDependencies": ["@remocn/confetti"], "files": [ { "path": "registry/remocn/x-followers-overview/index.tsx", "content": "\"use client\";\n\nimport { loadFont as loadSans } from \"@remotion/google-fonts/Manrope\";\nimport { useState } from \"react\";\nimport {\n AbsoluteFill,\n Img,\n interpolate,\n spring,\n useCurrentFrame,\n useVideoConfig,\n} from \"remotion\";\nimport { Confetti } from \"@/components/remocn/confetti\";\n\nexport interface FollowerNotification {\n name: string;\n verified: boolean;\n /** Relative time label, e.g. \"7h\", \"1d\". */\n time: string;\n}\n\nexport interface XFollowersOverviewProps {\n notifications?: FollowerNotification[];\n totalFollowers?: number;\n handle?: string;\n avatarUrl?: string;\n accentColor?: string;\n orientation?: \"horizontal\" | \"vertical\";\n speed?: number;\n}\n\nconst { fontFamily: SANS_FAMILY } = loadSans();\nconst FONT_FAMILY = SANS_FAMILY;\n\ninterface Theme {\n bg: string;\n fg: string;\n fgMuted: string;\n border: string;\n}\n\nconst THEMES: Record<\"light\" | \"dark\", Theme> = {\n light: {\n bg: \"#ffffff\",\n fg: \"#0f1419\",\n fgMuted: \"#536471\",\n border: \"#eff3f4\",\n },\n dark: {\n bg: \"#0a0a0a\",\n fg: \"#e7e9ea\",\n fgMuted: \"#71767b\",\n border: \"#2f3336\",\n },\n};\n\n/**\n * Hardcoded sample notifications so the composition renders immediately from\n * defaults. A future revision swaps this for live X API data.\n */\nexport const SAMPLE_FOLLOWERS: FollowerNotification[] = [\n { name: \"Andre Vitorio\", verified: true, time: \"7h\" },\n { name: \"Sarah Chen\", verified: true, time: \"7h\" },\n { name: \"marcus\", verified: false, time: \"8h\" },\n { name: \"Lena Powell\", verified: true, time: \"9h\" },\n { name: \"dev_jay\", verified: false, time: \"10h\" },\n { name: \"Priya Nair\", verified: true, time: \"11h\" },\n { name: \"Tomás Rivera\", verified: true, time: \"13h\" },\n { name: \"hana.eth\", verified: false, time: \"15h\" },\n { name: \"Will Carter\", verified: true, time: \"18h\" },\n { name: \"Yuki Tanaka\", verified: true, time: \"21h\" },\n { name: \"benoit\", verified: false, time: \"23h\" },\n { name: \"Amara Okafor\", verified: true, time: \"1d\" },\n { name: \"Leo Martins\", verified: true, time: \"1d\" },\n { name: \"sol\", verified: false, time: \"2d\" },\n];\n\n// --- Pure helpers (unit-tested) -------------------------------------------\n\n/** Map an effective frame to the active notification index + in-slot fraction. */\nexport function slotProgress(\n fc: number,\n slotFrames: number,\n count: number,\n): { idx: number; frac: number } {\n if (slotFrames <= 0 || count <= 0) return { idx: 0, frac: 0 };\n const pos = fc / slotFrames;\n const idx = Math.max(0, Math.min(Math.floor(pos), count - 1));\n const frac = Math.max(0, Math.min(pos - idx, 1));\n return { idx, frac };\n}\n\n/** Smoothstep flip ramp: rest for `hold` of the slot, then flip 0→1. */\nexport function flipEase(frac: number, hold: number): number {\n if (hold >= 1) return 0;\n const raw = (frac - hold) / (1 - hold);\n const c = Math.max(0, Math.min(raw, 1));\n return c * c * (3 - 2 * c);\n}\n\nexport function blurIn(\n frame: number,\n start: number,\n end: number,\n): { blur: number; opacity: number; translateY: number } {\n const range: [number, number] = [start, end];\n const opts = {\n extrapolateLeft: \"clamp\" as const,\n extrapolateRight: \"clamp\" as const,\n };\n return {\n blur: interpolate(frame, range, [10, 0], opts),\n opacity: interpolate(frame, range, [0, 1], opts),\n translateY: interpolate(frame, range, [12, 0], opts),\n };\n}\n\n// --- Sub-components --------------------------------------------------------\n\nfunction VerifiedBadge({ accent, size }: { accent: string; size: number }) {\n return (\n \n Verified\n \n \n );\n}\n\nfunction Avatar({\n avatarUrl,\n handle,\n size,\n theme,\n}: {\n avatarUrl: string;\n handle: string;\n size: number;\n theme: Theme;\n}) {\n const [errored, setErrored] = useState(false);\n const ringStyle = {\n width: size,\n height: size,\n borderRadius: 9999,\n border: `1px solid ${theme.border}`,\n flexShrink: 0,\n } as const;\n\n if (errored || !avatarUrl) {\n return (\n \n {handle.charAt(0).toUpperCase()}\n \n );\n }\n\n return (\n setErrored(true)}\n style={{ ...ringStyle, objectFit: \"cover\" }}\n />\n );\n}\n\n/** Username + verified badge — the only part that flips. Absolutely overlaid\n * and centered inside a slot sized to the active name, so the line as a whole\n * stays centered while names swap. */\nfunction NameBlock({\n item,\n fontSize,\n height,\n theme,\n accent,\n deg,\n opacity,\n}: {\n item: FollowerNotification;\n fontSize: number;\n height: number;\n theme: Theme;\n accent: string;\n deg: number;\n opacity: number;\n}) {\n return (\n \n \n {item.name}\n \n {item.verified && (\n \n )}\n \n );\n}\n\n// --- Main composition ------------------------------------------------------\n\nexport function XFollowersOverview({\n notifications = SAMPLE_FOLLOWERS,\n totalFollowers = 1709,\n handle = \"remocn\",\n avatarUrl = \"/logo.svg\",\n accentColor = \"#1d9bf0\",\n orientation = \"horizontal\",\n speed = 1,\n}: XFollowersOverviewProps) {\n const frame = useCurrentFrame();\n const { durationInFrames, width, height, fps } = useVideoConfig();\n const t = THEMES.light;\n const isVertical = orientation === \"vertical\";\n\n const refW = isVertical ? 720 : 1280;\n const refH = isVertical ? 1280 : 720;\n const stageScale = Math.min(width / refW, height / refH);\n\n const notifSize = isVertical ? 38 : 46;\n const countNum = isVertical ? 92 : 110;\n const countLabel = isVertical ? 40 : 46;\n const perspective = isVertical ? 1000 : 1200;\n const stageH = isVertical ? 160 : 180;\n const lineH = notifSize * 1.4;\n // Fast cadence: ~0.43s per username at speed 1; flip occupies the back half.\n const SLOT = 13;\n const HOLD = 0.45;\n\n const fc = frame * speed;\n const items = notifications.length > 0 ? notifications : SAMPLE_FOLLOWERS;\n const count = items.length;\n\n // Notifications cycle first, then the total blurs in. The reveal starts once\n // the list is exhausted, capped so it always fits before the timeline ends.\n const revealStart = Math.min(\n count * SLOT,\n Math.round(durationInFrames * 0.82),\n );\n\n const { idx, frac } = slotProgress(fc, SLOT, count);\n const flipP = flipEase(frac, HOLD);\n const hasNext = idx + 1 < count;\n\n const current = items[idx];\n const next = hasNext ? items[idx + 1] : undefined;\n const activeItem = flipP >= 0.5 && next ? next : current;\n\n const currentDeg = hasNext ? -90 * flipP : 0;\n const currentOpacity = hasNext\n ? interpolate(flipP, [0, 0.55], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n })\n : 1;\n const nextDeg = 90 * (1 - flipP);\n const nextOpacity = interpolate(flipP, [0.45, 1], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n\n const notifOpacity = interpolate(\n fc,\n [revealStart - 4, revealStart + 8],\n [1, 0],\n { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n );\n const countIn = blurIn(fc, revealStart + 4, revealStart + 28);\n // Dynamic pop: spring overshoot on the total as it blurs in.\n const revealSpring = spring({\n fps,\n frame: fc - (revealStart + 2),\n config: { damping: 10, stiffness: 170, mass: 0.8 },\n });\n const revealScale = interpolate(revealSpring, [0, 1], [0.5, 1]);\n\n // Avatar + handle reveal in sync with the total: same window as countIn,\n // avatar sliding in from the left, handle from the right.\n const avatarSize = isVertical ? 72 : 64;\n const handleSize = isVertical ? 30 : 34;\n const avatarIn = blurIn(fc, revealStart + 4, revealStart + 28);\n const handleIn = avatarIn;\n const slideOpts = {\n extrapolateLeft: \"clamp\" as const,\n extrapolateRight: \"clamp\" as const,\n };\n const avatarX = interpolate(\n fc,\n [revealStart + 4, revealStart + 28],\n [-36, 0],\n slideOpts,\n );\n const handleX = interpolate(\n fc,\n [revealStart + 4, revealStart + 28],\n [36, 0],\n slideOpts,\n );\n\n // Confetti fires on the real frame the reveal begins (sync across speeds),\n // centered on the canvas.\n const confettiStart = Math.round((revealStart + 2) / speed);\n const confettiColors = [\n accentColor,\n \"#ff5da2\",\n \"#ffd23f\",\n \"#22c55e\",\n \"#a855f7\",\n ];\n\n return (\n \n \n \n
\n {/* Cycling notifications — only the username flips in 3D, the\n \"followed you ·
\n \n {next && (\n \n )}\n \n \n followed you · {activeItem.time}\n \n \n\n {/* Total reveal: avatar + handle above the count */}\n \n \n 0 ? `blur(${avatarIn.blur}px)` : \"none\",\n translate: `${avatarX}px`,\n }}\n >\n \n \n 0 ? `blur(${handleIn.blur}px)` : \"none\",\n translate: `${handleX}px`,\n }}\n >\n @{handle}\n \n \n\n 0 ? `blur(${countIn.blur}px)` : \"none\",\n translate: `0 ${countIn.translateY}px`,\n scale: `${revealScale}`,\n }}\n >\n \n {totalFollowers.toLocaleString(\"en-US\")}\n \n \n Followers\n \n \n \n \n \n \n\n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/x-followers-overview.tsx" } ], "type": "registry:component" }