\n \n {[\"MIT license\", \"Vercel OSS Program\", \"shields.io alternative\"].map(\n (chip, i) => (\n \n {chip}\n \n ),\n )}\n
\n \n {/* GitHubStars lays out for the full 1280×720 canvas — scale it down. */}\n \n \n \n \n);\n\n// ===========================================================================\n// Scene 8 — CTA. The badge ballet: ten real badges pop in at scattered spots,\n// gather into a circle, the circle makes one full turn, they fall into a row,\n// the row rides off-screen — and the outro lockup takes the stage.\n// ===========================================================================\nconst BALLET_BADGES = [\n \"npm-react\",\n \"stars-nextjs\",\n \"views-shieldcn\",\n \"license-shieldcn\",\n \"stars-shieldcn\",\n \"npm-react-secondary\",\n \"npm-react-outline\",\n \"npm-react-ghost\",\n \"npm-react-destructive\",\n \"npm-typescript\",\n];\n\n// Hand-placed \"random\" scatter (deterministic — no Math.random in Remotion).\nconst SCATTER: Array<[number, number]> = [\n [-420, -180],\n [300, -220],\n [-140, -60],\n [480, 60],\n [-500, 120],\n [120, -160],\n [420, -40],\n [-280, 220],\n [60, 190],\n [-40, -250],\n];\n\nconst BALLET_N = BALLET_BADGES.length;\nconst BALLET_R = 190; // circle radius\nconst BALLET_SLOT = 116; // row slot width\n\n// Ballet timeline (scene-local frames)\nconst B_GATHER: [number, number] = [26, 48];\nconst B_SPIN: [number, number] = [48, 100];\nconst B_ALIGN: [number, number] = [100, 122];\nconst B_EXIT: [number, number] = [124, 144];\nconst OUTRO_FROM = 146;\n\nconst BadgeBallet: React.FC = () => {\n const frame = useCurrentFrame();\n const ease = Easing.inOut(Easing.cubic);\n const gP = interpolate(frame, B_GATHER, [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: ease,\n });\n const rot = interpolate(frame, B_SPIN, [0, Math.PI * 2], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: ease,\n });\n const aP = interpolate(frame, B_ALIGN, [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: ease,\n });\n const eP = interpolate(frame, B_EXIT, [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.in(Easing.cubic),\n });\n return (\n <>\n {BALLET_BADGES.map((name, i) => {\n const base = -Math.PI / 2 + (i * 2 * Math.PI) / BALLET_N;\n const cx = Math.cos(base + rot) * BALLET_R;\n const cy = Math.sin(base + rot) * BALLET_R;\n const [sx, sy] = SCATTER[i];\n // scatter → circle (the circle itself carries the spin) → row → exit\n const gx = sx + (cx - sx) * gP;\n const gy = sy + (cy - sy) * gP;\n const rowX = (i - (BALLET_N - 1) / 2) * BALLET_SLOT;\n const x = gx + (rowX - gx) * aP - eP * 1750;\n const y = gy + (0 - gy) * aP;\n const popIn = interpolate(frame, [i * 2, i * 2 + 8], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const popScale = interpolate(frame, [i * 2, i * 2 + 12], [0.5, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.bezier(0.34, 1.56, 0.64, 1),\n });\n return (\n \n \n \n );\n })}\n \n );\n};\n\nconst CtaScene: React.FC = () => (\n \n \n \n \n \n \n shieldcn\n \n \n \n \n shieldcn.dev\n \n \n \n \n Make the first impression count.\n \n \n \n \n \n);\n\n// ===========================================================================\n// Transition presentations.\n// ===========================================================================\ntype EmptyProps = Record;\n\nconst Crossfade: React.FC> = ({\n children,\n presentationProgress,\n presentationDirection,\n}) => {\n const entering = presentationDirection === \"entering\";\n const opacity = entering ? presentationProgress : 1 - presentationProgress;\n return {children};\n};\nconst crossfade = (): TransitionPresentation => ({\n component: Crossfade,\n props: {},\n});\n\n// Squeeze — the outgoing frame compresses to a line at the top edge while the\n// incoming frame expands up from the bottom. Snappy, mechanical.\nconst SqueezePres: React.FC<\n TransitionPresentationComponentProps\n> = ({ children, presentationProgress, presentationDirection }) => {\n const entering = presentationDirection === \"entering\";\n const p = interpolate(presentationProgress, [0, 1], [0, 1], {\n easing: Easing.bezier(0.7, 0, 0.3, 1),\n });\n const style: React.CSSProperties = entering\n ? {\n transform: `scaleY(${Math.max(0.002, p)})`,\n transformOrigin: \"50% 100%\",\n opacity: Math.min(1, p * 2),\n }\n : {\n transform: `scaleY(${Math.max(0.002, 1 - p)})`,\n transformOrigin: \"50% 0%\",\n opacity: Math.min(1, (1 - p) * 2),\n };\n return {children};\n};\nconst squeeze = (): TransitionPresentation => ({\n component: SqueezePres,\n props: {},\n});\n\n// Iris — the incoming frame is revealed through an expanding badge-shaped\n// (pill) clip while the outgoing frame dims underneath.\nconst IrisPres: React.FC> = ({\n children,\n presentationProgress,\n presentationDirection,\n}) => {\n const entering = presentationDirection === \"entering\";\n if (entering) {\n const p = interpolate(presentationProgress, [0, 1], [0, 1], {\n easing: Easing.out(Easing.cubic),\n });\n const vy = (1 - p) * 46;\n const vx = (1 - p) * 38;\n const r = (1 - p) * 380;\n return (\n \n {children}\n \n );\n }\n const p = presentationProgress;\n return (\n \n {children}\n \n );\n};\nconst iris = (): TransitionPresentation => ({\n component: IrisPres,\n props: {},\n});\n\nconst ZoomBlur: React.FC<\n TransitionPresentationComponentProps<{ rise: number }>\n> = ({\n children,\n presentationProgress,\n presentationDirection,\n passedProps,\n}) => {\n const { rise } = passedProps;\n const entering = presentationDirection === \"entering\";\n const p = interpolate(presentationProgress, [0, 1], [0, 1], {\n easing: entering ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),\n });\n const style: React.CSSProperties = entering\n ? {\n opacity: p,\n transform: `translateY(${(1 - p) * rise}px) scale(${0.86 + p * 0.14})`,\n filter: p < 1 ? `blur(${(1 - p) * 18}px)` : undefined,\n }\n : {\n opacity: 1 - p,\n transform: `translateY(${-p * rise}px) scale(${1 + p * 0.18})`,\n filter: p > 0 ? `blur(${p * 18}px)` : undefined,\n };\n return {children};\n};\nconst zoomBlur = (rise = 0): TransitionPresentation<{ rise: number }> => ({\n component: ZoomBlur,\n props: { rise },\n});\n\n// ===========================================================================\n// Composition root.\n// ===========================================================================\nexport const ShieldcnDemo: React.FC = () => {\n return (\n \n \n {/* Living shader backdrop — grain gradient in the zinc register with a\n whisper of the badge green. */}\n \n {/* Vignette scrim to focus the center. */}\n \n\n \n {/* 1 — Hook */}\n \n \n \n \n\n {/* 2 — The wall of real badges */}\n \n \n \n \n\n {/* 3 — Intro: Meet → lockup → creed on the shared Z axis */}\n \n \n \n \n\n {/* — Section title: Make it yours */}\n \n \n \n \n\n {/* 4 — Variants: ?variant= morphs the live badge */}\n \n \n \n \n\n {/* — Section title: More than badges */}\n \n \n \n \n\n {/* 5 — Spatial pan across the three README artifacts */}\n \n \n \n \n\n {/* 6 — Agent skill */}\n \n \n \n \n\n {/* — Section title: Built in the open */}\n \n \n \n \n\n {/* 7 — Proof: the star card counts up */}\n \n \n \n \n\n {/* 8 — CTA: the stage clears, the lockup draws on */}\n \n \n \n \n \n \n );\n};\n",
"type": "registry:component",
"target": "demos/shieldcn/index.tsx"
},
{
"path": "src/lib/demo-assets.ts",
"content": "import { staticFile } from \"remotion\";\n\n// Demo assets are loaded from absolute URLs so a demo installed into another\n// project via the registry renders identically without copying this repo's\n// public/ directory. The same URLs are used on the site and in local renders,\n// which keeps a single code path (network access is required for rendering).\n//\n// Override with REMOTION_DEMO_ASSETS_BASE — only REMOTION_-prefixed env vars\n// reach Remotion compositions (next.config.js additionally inlines it for the\n// site's ). Two override forms:\n// - \"local\" — serve straight from this repo's public/ via staticFile();\n// works in Remotion Studio, CLI renders and the Next dev site. Set it in\n// the gitignored .env so previews never depend on pushed assets.\n// - any URL — e.g. a local static server (http://127.0.0.1:8123).\nexport const DEMO_ASSETS_BASE =\n process.env.REMOTION_DEMO_ASSETS_BASE ||\n \"https://raw.githubusercontent.com/Remocn/remocn-collections/main/public\";\n\nexport const demoAsset = (path: string): string => {\n const clean = path.replace(/^\\/+/, \"\");\n if (DEMO_ASSETS_BASE === \"local\") return staticFile(clean);\n return `${DEMO_ASSETS_BASE}/${clean}`;\n};\n",
"type": "registry:component",
"target": "lib/demo-assets.ts"
},
{
"path": "src/demos/shieldcn/prompt.md",
"content": "\n\nMake a product demo for shieldcn — it's the shields.io alternative that turns README badges, charts, and headers into real shadcn/ui components. Use the shadcn zinc look plus their badge green as the accent, and run a before/after/bridge arc: open on \"someone just opened your repo\" and a wall of dated pixel badges as the pain, then introduce shieldcn with a self-drawing shield mark and the creed. Walk through the variants, sizes, and icons grid, show a live star-history chart along with header and sponsor-wall examples, and demo installing it as an agent skill in a terminal (npx skills add jal-co/shieldcn). Add proof pills for MIT and the Vercel OSS program plus a rolling star count past 500, and close on the shield-mark lockup with shieldcn.dev. Build it with remocn components.\n",
"type": "registry:file",
"target": "demos/shieldcn/prompt.md"
}
],
"docs": "Register the composition in your Remotion Root:\n\n import { ShieldcnDemo } from \"@/demos/shieldcn\";\n \n\nRequires Tailwind v4 wired into Remotion (@remotion/tailwind-v4).\nRender locally: npx remotion render shieldcn out/shieldcn.mp4 --gl=angle",
"type": "registry:block"
}