{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "render-sdk", "title": "render-sdk — One render API", "description": "remocn demo composition \"render-sdk — One render API\" — installs the full Remotion composition. Generated with AI from the prompt in demos/render-sdk/prompt.md.", "dependencies": [ "@remotion/google-fonts", "@remotion/transitions", "culori", "lucide-react", "remotion" ], "registryDependencies": [ "https://remocn.dev/r/backdrop.json", "https://remocn.dev/r/blur-in.json", "https://remocn.dev/r/logo-enter.json", "https://remocn.dev/r/remocn-ui.json", "https://remocn.dev/r/shared-axis-z.json", "https://remocn.dev/r/terminal-simulator.json" ], "files": [ { "path": "src/components/remocn/glass-code-block.tsx", "content": "\"use client\";\n\nimport {\n Sequence,\n interpolate,\n useCurrentFrame,\n useVideoConfig,\n} from \"remotion\";\n\nexport interface GlassCodeBlockProps {\n code?: string;\n title?: string;\n width?: number;\n height?: number;\n fontSize?: number;\n glassColor?: string;\n staggerFrames?: number;\n showTrafficLights?: boolean;\n /** The soft cyan/purple gradient glow behind the glass. On by default. */\n aura?: boolean;\n /**\n * Reveal the first line as a left-to-right typewriter (with a block cursor)\n * instead of the default fade-up; the remaining lines then stagger in only\n * after the first line finishes typing. Off by default.\n */\n typeFirstLine?: boolean;\n /** Typing speed (characters/second) when `typeFirstLine` is on. */\n firstLineCps?: number;\n speed?: number;\n className?: string;\n}\n\n/** Frames the first-line typewriter takes — exported so a caller can sync a\n * camera move to the moment typing completes. */\nexport function firstLineTypeFrames(\n firstLine: string,\n firstLineCps: number,\n fps: number,\n): number {\n return Math.ceil((firstLine.length / firstLineCps) * fps);\n}\n\nconst FONT_MONO =\n \"var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace\";\n\nconst DEFAULT_CODE = `import { motion } from \"remotion\";\n\n// Generate a hero scene\nexport function Hero() {\n const frame = useCurrentFrame();\n const opacity = frame / 30;\n return

Hello

;\n}`;\n\n// Minimal regex tokenizer. NOT a real syntax highlighter — just enough to\n// give the eye color anchors. Order matters: comments → strings → keywords.\nconst KEYWORDS = new Set([\n \"import\",\n \"from\",\n \"export\",\n \"function\",\n \"const\",\n \"let\",\n \"var\",\n \"return\",\n \"if\",\n \"else\",\n \"for\",\n \"while\",\n \"new\",\n \"class\",\n \"extends\",\n \"default\",\n \"true\",\n \"false\",\n \"null\",\n \"undefined\",\n]);\n\ntype Token = {\n text: string;\n kind: \"code\" | \"comment\" | \"string\" | \"keyword\" | \"number\";\n};\n\nfunction tokenizeLine(line: string): Token[] {\n // Whole-line comment.\n const trimmed = line.trimStart();\n if (trimmed.startsWith(\"//\")) {\n return [{ text: line, kind: \"comment\" }];\n }\n\n const tokens: Token[] = [];\n // Split keeping delimiters: words, strings, numbers, everything else.\n const re = /(\"[^\"]*\"|'[^']*'|`[^`]*`|\\b\\d+\\b|\\b[A-Za-z_$][\\w$]*\\b|[^\\w\"']+)/g;\n let match: RegExpExecArray | null;\n while ((match = re.exec(line)) !== null) {\n const t = match[0];\n const first = t[0];\n if (first === '\"' || first === \"'\" || first === \"`\") {\n tokens.push({ text: t, kind: \"string\" });\n } else if (/^\\d+$/.test(t)) {\n tokens.push({ text: t, kind: \"number\" });\n } else if (/^[A-Za-z_$][\\w$]*$/.test(t) && KEYWORDS.has(t)) {\n tokens.push({ text: t, kind: \"keyword\" });\n } else {\n tokens.push({ text: t, kind: \"code\" });\n }\n }\n return tokens;\n}\n\nconst TOKEN_COLORS: Record = {\n code: \"#e4e4e7\",\n comment: \"#52525b\",\n string: \"#86efac\",\n keyword: \"#c4b5fd\",\n number: \"#fcd34d\",\n};\n\nexport function GlassCodeBlock({\n code = DEFAULT_CODE,\n title = \"hero.tsx\",\n width = 760,\n height = 460,\n fontSize = 16,\n glassColor = \"rgba(10, 10, 10, 0.6)\",\n staggerFrames = 4,\n showTrafficLights = true,\n aura = true,\n typeFirstLine = false,\n firstLineCps = 30,\n speed = 1,\n className,\n}: GlassCodeBlockProps) {\n const { fps } = useVideoConfig();\n const lines = code.split(\"\\n\");\n // When the first line types, every later line waits until typing is done.\n const typeDur = typeFirstLine\n ? firstLineTypeFrames(lines[0] ?? \"\", firstLineCps, fps)\n : 0;\n\n return (\n \n {/* Animated background hint behind the glass so the blur has something\n to chew on. Pure CSS — no extra deps. */}\n {aura && }\n\n {/* 1px gradient ring acting as a microborder */}\n \n \n {/* Chrome */}\n \n {showTrafficLights && (\n <>\n \n \n \n \n )}\n \n {title}\n \n \n\n {/* Code body */}\n \n {lines.map((line, i) => {\n if (typeFirstLine && i === 0) {\n return (\n \n \n \n );\n }\n const baseFrom = typeFirstLine\n ? typeDur + (i - 1) * staggerFrames\n : i * staggerFrames;\n return (\n \n \n \n );\n })}\n \n \n \n \n );\n}\n\nfunction Light({ color }: { color: string }) {\n return (\n \n );\n}\n\nfunction CodeLine({\n line,\n index,\n fontSize,\n}: {\n line: string;\n index: number;\n fontSize: number;\n}) {\n const frame = useCurrentFrame();\n const opacity = interpolate(frame, [0, 8], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const ty = interpolate(frame, [0, 8], [4, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n\n const tokens = tokenizeLine(line);\n // Render an empty line as a half-height spacer so blank lines still take\n // visual space without collapsing the gap.\n if (tokens.length === 0) {\n return
;\n }\n return (\n \n \n {String(index + 1).padStart(2, \" \")}\n \n \n {tokens.map((t, i) => (\n \n {t.text}\n \n ))}\n \n
\n );\n}\n\nfunction TypedCodeLine({\n line,\n index,\n fontSize,\n cps,\n fps,\n speed,\n}: {\n line: string;\n index: number;\n fontSize: number;\n cps: number;\n fps: number;\n speed: number;\n}) {\n const frame = useCurrentFrame() * speed;\n const len = line.length;\n const revealed = Math.floor(\n interpolate(frame, [0, (len / cps) * fps], [0, len], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }),\n );\n const visible = line.substring(0, revealed);\n const done = revealed >= len;\n // 2 Hz blink at any framerate.\n const cursorOn = Math.floor((frame / fps) * 2) % 2 === 0;\n const tokens = tokenizeLine(visible);\n\n return (\n \n \n {String(index + 1).padStart(2, \" \")}\n \n \n {tokens.map((t, i) => (\n \n {t.text}\n \n ))}\n {!done && cursorOn && (\n \n )}\n \n \n );\n}\n\nfunction BackdropAura() {\n // Slow, low-amplitude blob behind the glass so the backdrop blur has\n // perceptible content to refract.\n const frame = useCurrentFrame();\n const t = frame / 60;\n const x = 50 + Math.sin(t) * 20;\n const y = 50 + Math.cos(t * 0.7) * 15;\n return (\n \n );\n}\n", "type": "registry:component", "target": "components/remocn/glass-code-block.tsx" }, { "path": "src/demos/render-sdk/index.tsx", "content": "import React, { type CSSProperties, type ReactNode } from \"react\";\nimport { AbsoluteFill, Easing, Series, interpolate, interpolateColors, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { demoAsset } from \"@/lib/demo-assets\";\nimport {\n TransitionSeries,\n linearTiming,\n type TransitionPresentation,\n type TransitionPresentationComponentProps,\n} from \"@remotion/transitions\";\nimport { loadFont as loadSans } from \"@remotion/google-fonts/Manrope\";\nimport { loadFont as loadMono } from \"@remotion/google-fonts/GeistMono\";\n\nimport { RemocnUIProvider } from \"@/lib/remocn-ui\";\nimport { Backdrop } from \"@/components/remocn/backdrop\";\nimport { GlassCodeBlock } from \"@/components/remocn/glass-code-block\";\nimport { SharedAxisZ } from \"@/components/remocn/shared-axis-z\";\nimport { LogoEnter, type Logo } from \"@/components/remocn/logo-enter\";\nimport { useBlurInTransition } from \"@/components/remocn/use-blur-in-transition\";\nimport { BlurIn } from \"@/components/remocn/blur-in\";\nimport { TerminalSimulator } from \"@/components/remocn/terminal-simulator\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\n// Bind both fonts to the CSS variables the remocn components read.\nconst { fontFamily: SANS_FAMILY } = loadSans(\"normal\", {\n subsets: [\"latin\"],\n weights: [\"400\", \"500\", \"600\", \"700\", \"800\"],\n});\nconst { fontFamily: MONO_FAMILY } = loadMono(\"normal\", {\n subsets: [\"latin\"],\n weights: [\"400\", \"700\"],\n});\n\nconst SANS =\n \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO = \"var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace\";\n\n// Render-engine palette — Remotion blue primary, cyan secondary.\nconst BLUE = \"#5b9dff\";\nconst CYAN = \"#34d9e6\";\nconst INK = \"#fafafa\";\nconst FAINT = \"rgba(250,250,250,0.42)\";\n\n// ---------------------------------------------------------------------------\n// Scene timings (frames @ 30fps), one per beat. Transitions overlap.\n// ---------------------------------------------------------------------------\nconst S_INTRO = 140; // three questions via shared-axis-z\nconst S_STOP = 46; // STOP — scale-down-fade\nconst S_ONEAPI = 70; // One API, different providers\nconst S_ADAPTERS = 85; // render + lambda cards\nconst S_INSTALL = 72; // terminal install\nconst S_CODE = 135; // code example (GlassCodeBlock)\nconst S_WORKING = 80; // working with — logo-enter\nconst S_OUTRO = 100; // render-sdk + install pill\n\nconst T_ZOOM = 18; // intro → stop (punch in)\nconst T_X = 14; // generic crossfade\nconst T_BLUR = 16; // adapters → install (background clash)\nconst T_OUT = 20; // working → outro\n\nexport const RENDER_SDK_DURATION =\n S_INTRO +\n S_STOP +\n S_ONEAPI +\n S_ADAPTERS +\n S_INSTALL +\n S_CODE +\n S_WORKING +\n S_OUTRO -\n (T_ZOOM + T_X + T_X + T_BLUR + T_X + T_X + T_OUT);\n\n// ---------------------------------------------------------------------------\n// Reveal — blur-in wrapper driven by useBlurInTransition.\n// ---------------------------------------------------------------------------\nconst Reveal: React.FC<{\n children: ReactNode;\n delay?: number;\n distance?: number;\n blur?: number;\n duration?: number;\n display?: CSSProperties[\"display\"];\n}> = ({\n children,\n delay = 0,\n distance = 16,\n blur = 10,\n duration = 20,\n display = \"block\",\n}) => {\n const style = useBlurInTransition(\n [{ at: delay, state: \"revealed\", duration }],\n { direction: \"up\", distance, blur },\n );\n return (\n \n {children}\n \n );\n};\n\n// ---------------------------------------------------------------------------\n// Mark — inline marker swipe behind a phrase.\n// ---------------------------------------------------------------------------\nconst Mark: React.FC<{\n children: string;\n color?: string;\n startFrame?: number;\n}> = ({ children, color = BLUE, startFrame = 8 }) => {\n const frame = useCurrentFrame();\n const { fps } = useVideoConfig();\n const scaleX = spring({\n frame: frame - startFrame,\n fps,\n config: { damping: 15, mass: 0.8 },\n });\n const textColor = interpolateColors(\n interpolate(scaleX, [0.45, 0.85], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }),\n [0, 1],\n [INK, \"#0a0a0a\"],\n );\n return (\n \n \n \n {children}\n \n \n );\n};\n\n// ===========================================================================\n// Scene 1 — Intro. Three pain questions, each entering via shared-axis-z, in a\n// single accent color. A Series resets the frame so each transition plays clean.\n// ===========================================================================\nconst Q1 = \"Building a render queue?\";\nconst Q2 = \"Two renderers — self-hosted and Lambda?\";\nconst Q3 = \"Reusing render code across projects?\";\n\nconst IntroScene: React.FC = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n// ===========================================================================\n// Scene 2 — STOP. scale-down-fade settles a single hard word, then lets it go.\n// ===========================================================================\nconst StopScene: React.FC = () => (\n \n \n \n);\n\n// ===========================================================================\n// Scene 3 — One API, different providers.\n// ===========================================================================\nconst OneApiScene: React.FC = () => (\n \n \n \n Use Render SDK\n \n \n \n \n \n One API\n {\" \"}\n Different providers\n \n \n \n);\n\n// ===========================================================================\n// Scene 4 — Adapters: render + lambda cards.\n// ===========================================================================\nconst AdapterCard: React.FC<{\n accent: string;\n title: string;\n pkg: string;\n desc: string;\n call: string;\n delay: number;\n}> = ({ accent, title, pkg, desc, call, delay }) => (\n \n \n
\n \n \n {title}\n \n
\n \n {pkg}\n \n \n {desc}\n \n \n {call}\n \n \n \n);\n\nconst AdaptersScene: React.FC = () => (\n \n \n \n Two adapters, one interface\n \n \n
\n \n \n
\n \n);\n\n// ===========================================================================\n// Scene 5 — Install (no heading). terminal-cursor-zoom dollies across the typed\n// install command.\n// ===========================================================================\nconst InstallScene: React.FC = () => (\n \n \n \n);\n\n// ===========================================================================\n// Scene 6 — Code Example (from the docs), shown in a GlassCodeBlock.\n// ===========================================================================\nconst CODE_EXAMPLE = `import { RenderSdk } from \"@remocn/render-sdk\";\nimport { serverAdapter } from \"@remocn/render-sdk/server\";\n\nconst sdk = new RenderSdk({ adapter: serverAdapter() });\n\nconst renderId = await sdk.start({\n compositionId: \"MyVideo\",\n inputProps: { title: \"Hello\" },\n});\n\nawait sdk.waitForCompletion(renderId, {\n onProgress: (p) => console.log(p),\n});\n\nconst url = await sdk.getUrl(renderId);`;\n\nconst CodeScene: React.FC = () => (\n \n \n \n From start to{\" \"}\n \n URL\n \n \n \n \n
\n \n
\n \n \n);\n\n// ===========================================================================\n// Scene 7 — Working with. Framework brand chips spring in via logo-enter.\n// ===========================================================================\nconst NextMark: React.FC = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst ReactMark: React.FC = () => (\n \n \n \n \n \n \n);\n\nconst RemixMark: React.FC = () => (\n \n \n \n);\n\nconst RouterMark: React.FC = () => (\n \n \n \n \n \n \n);\n\nconst FRAMEWORK_LOGOS: Logo[] = [\n { mark: , bg: \"#000000\" },\n { mark: , bg: \"#0A0A0A\" },\n { mark: , bg: \"#1A1A1A\" },\n { mark: , bg: \"#FFFFFF\" },\n];\n\nconst WorkingScene: React.FC = () => (\n \n \n \n Works with your stack\n \n \n
\n \n
\n \n);\n\n// ===========================================================================\n// Scene 8 — Outro. A box mark draws itself on (typography-style stroke draw),\n// then the wordmark, version, and tagline settle with tight spacing.\n// ===========================================================================\nconst BoxIcon: React.FC<{ size?: number }> = ({ size = 78 }) => {\n const frame = useCurrentFrame();\n const appear = interpolate(frame, [0, 8], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const draw1 = interpolate(frame, [2, 34], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.inOut(Easing.cubic),\n });\n const draw2 = interpolate(frame, [18, 44], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.inOut(Easing.cubic),\n });\n const draw3 = interpolate(frame, [26, 50], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.inOut(Easing.cubic),\n });\n return (\n \n \n \n \n \n );\n};\n\nconst InstallPill: React.FC<{\n command: string;\n delay: number;\n copyAt: number;\n}> = ({ command, delay, copyAt }) => {\n const frame = useCurrentFrame();\n const enter = interpolate(frame, [delay, delay + 16], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.bezier(0.22, 1, 0.36, 1),\n });\n const copied = frame >= copyAt;\n const pop = interpolate(frame - copyAt, [0, 8], [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 {command}\n \n {copied ? : }\n \n \n );\n};\n\nconst OutroScene: React.FC = () => (\n \n \n \n \n \n \n \n render-sdk\n \n \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\nconst BlurCrossfade: React.FC<\n TransitionPresentationComponentProps\n> = ({ children, presentationProgress, presentationDirection }) => {\n const entering = presentationDirection === \"entering\";\n const p = presentationProgress;\n const style: React.CSSProperties = entering\n ? {\n opacity: p,\n transform: `scale(${0.96 + p * 0.04})`,\n filter: p < 1 ? `blur(${(1 - p) * 14}px)` : undefined,\n }\n : {\n opacity: 1 - p,\n transform: `scale(${1 + p * 0.04})`,\n filter: p > 0 ? `blur(${p * 14}px)` : undefined,\n };\n return {children};\n};\nconst blurCrossfade = (): TransitionPresentation => ({\n component: BlurCrossfade,\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.84 + p * 0.16})`,\n filter: p < 1 ? `blur(${(1 - p) * 20}px)` : undefined,\n }\n : {\n opacity: 1 - p,\n transform: `translateY(${-p * rise}px) scale(${1 + p * 0.22})`,\n filter: p > 0 ? `blur(${p * 20}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 RenderSdkDemo: React.FC = () => {\n return (\n \n \n {/* Persistent image background for the whole video. */}\n \n {/* Scrim to deepen contrast for foreground content. */}\n \n\n \n {/* 1 — Intro questions */}\n \n \n \n \n\n {/* 2 — STOP */}\n \n \n \n \n\n {/* 3 — One API, different providers */}\n \n \n \n \n\n {/* 4 — Adapters cards */}\n \n \n \n \n\n {/* 5 — Install (terminal-cursor-zoom) */}\n \n \n \n \n\n {/* 6 — Code example */}\n \n \n \n \n\n {/* 7 — Working with */}\n \n \n \n \n\n {/* 8 — Outro */}\n \n \n \n \n \n \n );\n};\n", "type": "registry:component", "target": "demos/render-sdk/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/render-sdk/prompt.md", "content": "\n\nMake a launch video for @remocn/render-sdk. Open with a few pain questions about juggling different render provider APIs, hit a hard \"Stop.\" beat, then land \"One API, different providers\" and show cards for the render and lambda adapters. Zoom into a terminal install (bun install @remocn/render-sdk), pop open a glass code block with a short usage example, and build out a logo wall of the frameworks it works with — Next.js, React, Remix, React Router. Close with a simple drawn-on box mark, the render-sdk wordmark, the v1.0.0 tag, and the tagline. Keep it clean and technical, built with remocn components.\n", "type": "registry:file", "target": "demos/render-sdk/prompt.md" } ], "docs": "Register the composition in your Remotion Root:\n\n import { RenderSdkDemo } from \"@/demos/render-sdk\";\n \n\nRequires Tailwind v4 wired into Remotion (@remotion/tailwind-v4).\nRender locally: npx remotion render render-sdk out/render-sdk.mp4", "type": "registry:block" }