\n ))}\n \n \n);\n\n// Charts — the real star-history chart wiping on left to right, so the\n// curve draws itself across the beat.\nconst ChartsBeat: React.FC = () => {\n const frame = useCurrentFrame();\n const wipe = interpolate(frame, [8, 44], [100, 0], {\n ...clampOpts,\n easing: Easing.inOut(Easing.cubic),\n });\n return (\n \n \n
\n \n
\n \n \n );\n};\n\n// Headers — the real graph header, holding under a slow push-in.\nconst HeadersBeat: React.FC = () => {\n const frame = useCurrentFrame();\n const { durationInFrames } = useVideoConfig();\n const zoomP = interpolate(frame, [0, durationInFrames], [1, 1.03], clampOpts);\n return (\n \n \n \n \n \n );\n};\n\nconst WhatScene: React.FC = () => (\n \n \n \n \n \n This is Shieldcn\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n// ===========================================================================\n// Scene 3 — The news. The announcement lands, and a green sync arc draws\n// itself once beside the key phrase. One rotation of ink, then stillness.\n// ===========================================================================\nconst SyncGlyph: React.FC<{ size: number; at: number }> = ({ size, at }) => {\n const frame = useCurrentFrame();\n const draw = (start: number) =>\n interpolate(frame, [at + start, at + start + 20], [1, 0], {\n ...clampOpts,\n easing: Easing.inOut(Easing.cubic),\n });\n const tip = (start: number) =>\n interpolate(frame, [at + start + 16, at + start + 24], [0, 1], clampOpts);\n return (\n \n );\n};\n\nconst NEWS_GLYPH_AT = 16;\n\nconst NewsScene: React.FC = () => {\n const frame = useCurrentFrame();\n // Once the arcs have finished drawing, the glyph makes one full\n // confirming turn — the sync visibly happens.\n const spin = interpolate(\n frame,\n [NEWS_GLYPH_AT + 36, NEWS_GLYPH_AT + 66],\n [0, 360],\n { ...clampOpts, easing: Easing.inOut(Easing.cubic) },\n );\n const word: React.CSSProperties = {\n fontFamily: SANS,\n fontWeight: 400,\n fontSize: 46,\n color: INK,\n };\n return (\n \n
\n \n Now it has accounts\n \n \n \n \n \n with sync\n \n
\n \n );\n};\n\n// ===========================================================================\n// Scene 5 — Meet shieldcn Plus. The real shield mark draws itself on, the\n// wordmark settles beside it, and \"Plus\" lands in green.\n// ===========================================================================\n// The lockup assembles in three moves: the shield draws itself alone in the\n// center, then the wordmark drives in from the right and pushes the mark\n// left into the lockup, and the subtitle settles tight beneath the pair.\n// The shield glyph fills only ~42% of its 512 viewBox height, so the box is\n// sized up until the VISIBLE glyph matches the wordmark's height (~61px at\n// 78px Sora); the gap compensates for the box's transparent padding.\nconst MEET_MARK_W = 144;\nconst MEET_WORD_W = 330; // \"shieldcn\" at 78px Sora 500, measured from stills\nconst MEET_GAP = 4;\nconst MEET_LOCKUP_W = MEET_MARK_W + MEET_GAP + MEET_WORD_W;\nconst MEET_MARK_X = -(MEET_LOCKUP_W / 2) + MEET_MARK_W / 2;\nconst MEET_WORD_X = MEET_LOCKUP_W / 2 - MEET_WORD_W / 2;\nconst MEET_SLIDE_AT = 40; // the name arrives once the shield has drawn\n// At the final lockup the word's center sits exactly this far right of the\n// mark's; the push preserves that offset from the moment of contact, so the\n// pair moves as one rigid body and an overlap is geometrically impossible.\nconst MEET_PUSH_DIST = MEET_WORD_X - MEET_MARK_X;\n\nconst MeetPlusScene: React.FC = () => {\n const frame = useCurrentFrame();\n // One aggressive curve drives the whole move: the name flies in from the\n // right, makes contact early, PUSHES the mark through most of the flight,\n // and the hard deceleration parks them — a small impact pop sells the hit.\n const wordX = interpolate(\n frame,\n [MEET_SLIDE_AT, MEET_SLIDE_AT + 18],\n [MEET_WORD_X + 300, MEET_WORD_X],\n { ...clampOpts, easing: Easing.bezier(0.55, 0, 0.15, 1) },\n );\n // The mark's position is DERIVED from the word's: it holds the center\n // until the word reaches contact distance, then rides exactly one\n // lockup-offset ahead of it.\n const markX = Math.max(MEET_MARK_X, Math.min(0, wordX - MEET_PUSH_DIST));\n const wordOpacity = interpolate(\n frame,\n [MEET_SLIDE_AT, MEET_SLIDE_AT + 7],\n [0, 1],\n clampOpts,\n );\n const wordBlur = interpolate(\n frame,\n [MEET_SLIDE_AT, MEET_SLIDE_AT + 14],\n [8, 0],\n clampOpts,\n );\n // Impact pop on landing — the lockup compresses a hair and settles.\n const landPop = interpolate(\n frame,\n [MEET_SLIDE_AT + 18, MEET_SLIDE_AT + 23, MEET_SLIDE_AT + 34],\n [0, 1, 0],\n clampOpts,\n );\n return (\n \n \n {/* The shield draws alone in the center, then yields left */}\n \n \n \n {/* The wordmark drives in and takes its slot */}\n 0 ? `blur(${wordBlur}px)` : undefined,\n fontFamily: SANS,\n fontWeight: 500,\n fontSize: 78,\n color: INK,\n whiteSpace: \"nowrap\",\n }}\n >\n shieldcn\n \n \n \n \n For maintainers who live in their README\n \n \n \n );\n};\n\n// ===========================================================================\n// Scene 6 — 75 READMEs, synced. A dashboard library fills with miniature\n// README cards while the count rolls up to 75.\n// ===========================================================================\nconst MiniReadme: React.FC = () => (\n \n \n
\n );\n};\n\nconst SyncScene: React.FC = () => (\n \n \n {Array.from({ length: 10 }, (_, i) => (\n \n \n \n ))}\n \n \n {/* RollingNumber's root is an AbsoluteFill — it needs a positioned,\n sized box or the digits center on the whole frame. It also hardcodes\n its own mono family at weight 800; the video rule is Sora ≤ 500, so\n a scoped !important rule outbids the inline styles. */}\n \n \n \n \n \n saved READMEs\n \n \n \n synced across devices\n \n \n \n \n);\n\n// ===========================================================================\n// Scene 7 — The saved badges library. Real badges assemble into a shelf; the\n// source badge gets a green ring, and copies land in three README rows.\n// ===========================================================================\nconst SHELF_ROW_1 = [\"npm-react\", \"stars-nextjs\", \"views-shieldcn\"];\nconst SHELF_ROW_2 = [\"license-shieldcn\", \"npm-typescript\", \"npm-react-outline\"];\nconst REUSED = \"stars-nextjs\";\n\nconst LibraryScene: React.FC = () => {\n return (\n \n \n {/* The shelf */}\n \n \n {[SHELF_ROW_1, SHELF_ROW_2].map((row, r) => (\n
\n {row.map((name, i) => (\n \n \n \n ))}\n
\n ))}\n \n \n {/* Three README rows receive the same badge */}\n
\n \n \n {/* Right — the same real artifacts, re-rendered per accent,\n framed as a README rendering on GitHub */}\n \n
\n \n \n {/* GitHub's README file header, in the video's own card\n palette so it matches the ?brand token card */}\n \n \n README.md\n
\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\n// ===========================================================================\n// Scene 11 — The offer. The launch discount accumulates line by line.\n// ===========================================================================\nconst OfferScene: React.FC = () => (\n \n \n \n \n \n);\n\n// ===========================================================================\n// Scene 12 — CTA. The shield draws on once more and the wordmark settles —\n// nothing else competes with the lockup.\n// ===========================================================================\nconst CtaScene: React.FC = () => (\n \n
\n {/* The enlarged mark's viewBox padding is pulled back in, so the\n visible glyph sits one word-space from the name. */}\n \n \n \n \n \n shieldcn\n \n \n
\n {/* Two instances of the same text swap invisibly at STING_EXIT so the\n one-window glitch component can burst twice: on entry and on exit. */}\n \n \n \n \n \n \n \n Use promo code\n
\n \n \n );\n};\n\n// ===========================================================================\n// Transition presentations — the shieldcn family grammar: squeeze, pill iris,\n// zoom-blur, crossfade. Deliberately no swirl, no dither.\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// The squeeze keeps its mechanical scaleY collapse, but the deformation is\n// hidden under a blur + fade envelope: while the squash is still subtle\n// (scaleY > ~0.8) there is barely any blur, and by the time the frame is\n// visibly compressed it is already defocused and fading — the squash reads\n// as shutter motion blur, never as a cheaply stretched screenshot.\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 if (!entering) {\n const blur = interpolate(p, [0.08, 0.5], [0, 18], clampOpts);\n const opacity = interpolate(p, [0.18, 0.62], [1, 0], clampOpts);\n return (\n 0 ? `blur(${blur}px)` : undefined,\n }}\n >\n {children}\n \n );\n }\n const blur = interpolate(p, [0.5, 0.92], [18, 0], clampOpts);\n const opacity = interpolate(p, [0.38, 0.82], [0, 1], clampOpts);\n return (\n 0 ? `blur(${blur}px)` : undefined,\n }}\n >\n {children}\n \n );\n};\nconst squeeze = (): TransitionPresentation => ({\n component: SqueezePres,\n props: {},\n});\n\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 ShieldcnPlusDemo: React.FC = () => {\n return (\n \n \n {/* Living shader backdrop — the paper.design warp (checks) preset,\n recolored into a quiet zinc monochrome so it never competes with\n the content. */}\n \n \n\n \n {/* 1 — The front door assembles itself; it exits through the\n blurred squeeze, so the collapse never shows squashed content */}\n \n \n \n \n\n {/* 2 — This is shieldcn → the creed */}\n \n \n \n \n\n {/* 3 — The news: accounts, with sync */}\n \n \n \n \n\n {/* 4 — Meet shieldcn Plus */}\n \n \n \n \n\n {/* 6 — 75 saved READMEs, synced */}\n \n \n \n \n\n {/* 7 — The saved badges library */}\n \n \n \n \n\n {/* 8 — Mass migration */}\n \n \n \n \n\n {/* — Interstitial title: AI generates and polishes your READMEs */}\n \n \n \n \n\n {/* 9 — AI writes the README */}\n \n \n \n \n\n {/* 10 — One managed brand (the crown) */}\n \n \n \n \n\n {/* 11 — The offer */}\n \n \n \n \n\n {/* 12 — CTA */}\n \n \n \n\n {/* 13 — post-credits stinger: no transition on purpose; the hard\n cut over the continuous warp backdrop IS the after-credits beat */}\n \n \n \n \n \n \n );\n};\n",
"type": "registry:component",
"target": "demos/shieldcn-plus/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"
}
],
"docs": "Register the composition in your Remotion Root:\n\n import { ShieldcnPlusDemo } from \"@/demos/shieldcn-plus\";\n \n\nRequires Tailwind v4 wired into Remotion (@remotion/tailwind-v4).\nRender locally: npx remotion render shieldcn-plus out/shieldcn-plus.mp4 --gl=angle",
"type": "registry:block"
}