{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-skills", "title": "Agent Skills — Claude Code makes the video", "description": "remocn demo composition \"Agent Skills — Claude Code makes the video\" — installs the full Remotion composition. Generated with AI from the prompt in demos/agent-skills/prompt.md.", "dependencies": [ "@remotion/google-fonts", "@remotion/transitions", "culori", "date-fns", "remotion" ], "registryDependencies": [ "https://remocn.dev/r/alert-dialog.json", "https://remocn.dev/r/backdrop.json", "https://remocn.dev/r/blur-in.json", "https://remocn.dev/r/button.json", "https://remocn.dev/r/caret.json", "https://remocn.dev/r/checkbox.json", "https://remocn.dev/r/confetti.json", "https://remocn.dev/r/drawer.json", "https://remocn.dev/r/github-stars.json", "https://remocn.dev/r/kinetic-center-build.json", "https://remocn.dev/r/number-wheel.json", "https://remocn.dev/r/remocn-ui.json", "https://remocn.dev/r/select-item.json", "https://remocn.dev/r/select.json", "https://remocn.dev/r/sheet.json", "https://remocn.dev/r/short-slide-down.json", "https://remocn.dev/r/spinner.json", "https://remocn.dev/r/terminal-simulator.json" ], "files": [ { "path": "src/components/remocn/claude-code.tsx", "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/JetBrainsMono\";\nimport {\n AbsoluteFill,\n interpolate,\n spring,\n useCurrentFrame,\n useVideoConfig,\n} from \"remotion\";\nimport { Caret } from \"@/components/remocn/caret\";\nimport { useTypewriter } from \"@/lib/remocn-ui\";\n\nconst { fontFamily: MONO_FAMILY } = loadFont();\n\nexport interface ClaudeCodeProps {\n title?: string;\n userName?: string;\n model?: string;\n cwd?: string;\n placeholder?: string;\n prompt?: string;\n accentColor?: string;\n speed?: number;\n /**\n * When true, the prompt is \"submitted\" after it finishes typing and the CLI\n * enters a thinking phase — a pulsing status line (spinner + cycling verb +\n * elapsed/token counters) over a stream of activity lines. Off by default so\n * existing usage of the welcome screen is unchanged.\n */\n thinking?: boolean;\n /**\n * Effective frame at which the thinking phase begins. Defaults to just after\n * the typewriter finishes (derived from `prompt`, `TYPING_START_FRAME` and\n * `TYPING_CPS`).\n */\n thinkingStartFrame?: number;\n /** Status verbs cycled in the thinking line (one every ~0.8s). */\n thinkingVerbs?: string[];\n /** Activity lines streamed in one-by-one beneath the status line. */\n thinkingActivity?: string[];\n /** Frames between each streamed activity line. */\n thinkingLineStagger?: number;\n}\n\ninterface Theme {\n page: string;\n windowBar: string;\n windowBody: string;\n fg: string;\n fgMuted: string;\n fgDim: string;\n boxBorder: string;\n}\n\nexport const THEMES: Record<\"light\" | \"dark\", Theme> = {\n light: {\n page: \"#E8E5DD\",\n windowBar: \"#D8D3CA\",\n windowBody: \"#FBFAF7\",\n fg: \"#1F1E1D\",\n fgMuted: \"#73726C\",\n fgDim: \"#A3A097\",\n boxBorder: \"#D97757\",\n },\n dark: {\n page: \"#2B2A28\",\n windowBar: \"#3A3633\",\n windowBody: \"#1B1A18\",\n fg: \"#E8E5DD\",\n fgMuted: \"#8A857C\",\n fgDim: \"#6B6660\",\n boxBorder: \"#D97757\",\n },\n};\n\nexport const TYPING_START_FRAME = 48;\n\nexport const TYPING_CPS = 18;\n\nexport const WHATS_NEW: string[] = [\n \"/agents to create subagents\",\n \"/security-review for review agent\",\n \"ctrl+b to background bashes\",\n];\n\n// Pulsing star used by the thinking status line — cycles outward then back so\n// it \"breathes\" in place rather than spinning.\nconst THINKING_GLYPHS = [\"·\", \"✢\", \"✳\", \"✶\", \"✺\", \"✶\", \"✳\", \"✢\"];\n\nexport const DEFAULT_THINKING_VERBS: string[] = [\n \"Thinking\",\n \"Composing\",\n \"Animating\",\n \"Rendering\",\n \"Polishing\",\n];\n\nexport const DEFAULT_THINKING_ACTIVITY: string[] = [\n \"Loading skill: remocn\",\n \"Reading components catalog\",\n \"Composing scenes — backdrop, titles, code\",\n \"Wiring kinetic transitions\",\n \"✓ Created the composition\",\n];\n\n/** Format a token count as Claude Code does: \"1.2k\". */\nfunction formatTokens(n: number): string {\n if (n < 1000) return String(Math.round(n));\n return `${(n / 1000).toFixed(1)}k`;\n}\n\nfunction introBounceIn(\n frame: number,\n fps: number,\n): { translateY: number; scale: number } {\n const s = spring({\n fps,\n frame,\n config: { damping: 14, stiffness: 110, mass: 0.7 },\n });\n const translateY = interpolate(s, [0, 1], [28, 0]);\n const scale = interpolate(s, [0, 1], [0.97, 1]);\n return { translateY, scale };\n}\n\nfunction fadeUpAt(\n frame: number,\n range: [number, number],\n): { opacity: number; translateY: number } {\n const opts = {\n extrapolateLeft: \"clamp\" as const,\n extrapolateRight: \"clamp\" as const,\n };\n return {\n opacity: interpolate(frame, range, [0, 1], opts),\n translateY: interpolate(frame, range, [12, 0], opts),\n };\n}\n\nfunction Mascot({ accent, size = 96 }: { accent: string; size?: number }) {\n return (\n \n Claude Code\n \n \n );\n}\n\ninterface ThinkingStreamProps {\n /** Effective frames elapsed since the thinking phase began (>= 0). */\n local: number;\n fps: number;\n prompt: string;\n accentColor: string;\n theme: Theme;\n verbs: string[];\n activity: string[];\n lineStagger: number;\n}\n\nfunction ThinkingStream({\n local,\n fps,\n prompt,\n accentColor,\n theme,\n verbs,\n activity,\n lineStagger,\n}: ThinkingStreamProps) {\n const glyph = THINKING_GLYPHS[Math.floor(local / 4) % THINKING_GLYPHS.length];\n const verb = verbs[Math.floor(local / 24) % verbs.length];\n const seconds = Math.max(0, Math.floor(local / fps));\n // Tokens ramp up smoothly while thinking, easing toward a plausible total.\n const tokens = formatTokens(interpolate(local, [0, 150], [120, 3400], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }));\n\n return (\n
\n {/* The submitted command, echoed back as a sent message. */}\n \n {\"> \"}\n {prompt}\n
\n\n {/* Status line: breathing star + cycling verb + meta. */}\n \n \n {glyph}\n \n {verb}…\n \n {`(esc to interrupt · ${seconds}s · ↑ ${tokens} tokens)`}\n \n \n\n {/* Streamed activity lines, each fading up as it arrives. */}\n \n {activity.map((line, i) => {\n const at = (i + 1) * lineStagger;\n const fade = fadeUpAt(local, [at, at + 14]);\n const done = line.trimStart().startsWith(\"✓\");\n return (\n \n \n {done ? \"⎿ \" : \"⎿ \"}\n \n \n {line}\n \n \n );\n })}\n \n \n );\n}\n\nexport function ClaudeCode({\n title = \"Claude Code v2.0.0\",\n userName = \"Meaghan\",\n model = \"Opus 4.8 • Max 20x\",\n cwd = \"/users/meaghan/code/apps\",\n placeholder = 'Try \"edit to ...\"',\n prompt = \"edit src/theme.ts to add a dark mode toggle\",\n accentColor = \"#D97757\",\n speed = 1,\n thinking = false,\n thinkingStartFrame,\n thinkingVerbs = DEFAULT_THINKING_VERBS,\n thinkingActivity = DEFAULT_THINKING_ACTIVITY,\n thinkingLineStagger = 22,\n}: ClaudeCodeProps) {\n const frame = useCurrentFrame();\n const { width, height, fps } = useVideoConfig();\n const t = THEMES.dark;\n\n const refW = 1280;\n const refH = 720;\n const stageScale = Math.min(width / refW, height / refH);\n\n const tw = useTypewriter(prompt, {\n cps: TYPING_CPS,\n speed,\n startFrame: TYPING_START_FRAME,\n });\n const showText = tw.count > 0;\n\n // Effective (speed-adjusted) frame, and when the thinking phase kicks in —\n // by default right after the typewriter finishes the prompt.\n const effFrame = frame * speed;\n const typingDoneFrame =\n TYPING_START_FRAME + (prompt.length / TYPING_CPS) * fps;\n const thinkStart = thinkingStartFrame ?? typingDoneFrame + 12;\n const isThinking = thinking && effFrame >= thinkStart;\n // Once thinking begins, fade the welcome box back so the stream is the focus.\n const welcomeDim = thinking\n ? interpolate(effFrame, [thinkStart, thinkStart + 16], [1, 0.22], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n })\n : 1;\n\n const intro = introBounceIn(frame * speed, fps);\n const leftFade = fadeUpAt(frame * speed, [6, 22]);\n const rightFade = fadeUpAt(frame * speed, [12, 30]);\n const promptFade = fadeUpAt(frame * speed, [18, 36]);\n\n const border = accentColor;\n\n const winLeft = 90;\n const winTop = 40;\n const winWidth = 1100;\n const winHeight = 620;\n const barHeight = 40;\n\n return (\n \n \n \n \n \n \n \n \n\n \n \n \n {title}\n \n\n
\n \n \n Welcome back {userName}!\n
\n
\n \n
\n \n \n {model}\n \n \n {cwd}\n \n \n \n\n \n
\n \n What's new\n
\n \n {WHATS_NEW.map((line) => (\n \n {line}\n \n ))}\n \n ... /help for more\n \n \n \n \n \n \n\n
\n\n \n \n {isThinking ? (\n \n ) : (\n \n {\"> \"}\n {showText ? (\n \n {tw.text}\n \n \n \n \n ) : (\n \n \n \n \n {placeholder}\n \n )}\n
\n )}\n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/claude-code.tsx" }, { "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/components/remocn/input.tsx", "content": "\"use client\";\n\nimport { mixOklch, type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport type InputState =\n | \"idle\"\n | \"hover\"\n | \"active\"\n | \"typing\"\n | \"blur\"\n | \"invalid\";\n\ntype InputSize = \"sm\" | \"default\" | \"lg\";\n\nexport interface InputProps {\n state?: InputState;\n style?: InputStyle;\n placeholder?: string;\n value?: string;\n size?: InputSize;\n theme?: Partial;\n primary?: string;\n mode?: \"light\" | \"dark\";\n fullWidth?: boolean;\n className?: string;\n}\n\nconst FIELD_WIDTH = 320;\n\nconst SIZE_STYLES: Record<\n InputSize,\n { height: number; padding: number; fontSize: number }\n> = {\n sm: { height: 36, padding: 12, fontSize: 13 },\n default: { height: 40, padding: 14, fontSize: 15 },\n lg: { height: 48, padding: 16, fontSize: 17 },\n};\n\nexport interface InputStyle {\n borderColor: string;\n ringColor: string;\n ringWidth: number;\n background: string;\n caretOpacity: number;\n valueReveal: number;\n placeholderOpacity: number;\n}\n\nexport interface InputStyleContext {\n idleBorder: string;\n hoverBorder: string;\n activeBorder: string;\n invalidBorder: string;\n ring: string;\n invalidRing: string;\n background: string;\n hoverBackground: string;\n foreground: string;\n mutedForeground: string;\n}\n\nexport function inputStyleContext(theme: RemocnTheme): InputStyleContext {\n return {\n idleBorder: theme.input,\n hoverBorder: mixOklch(theme.input, theme.foreground, 0.18),\n activeBorder: theme.ring,\n invalidBorder: theme.destructive,\n ring: mixOklch(theme.background, theme.ring, 0.5),\n invalidRing: mixOklch(theme.background, theme.destructive, 0.4),\n background: theme.background,\n hoverBackground: mixOklch(theme.background, theme.muted, 0.4),\n foreground: theme.foreground,\n mutedForeground: theme.mutedForeground,\n };\n}\n\nexport function inputStyle(\n state: InputState,\n ctx: InputStyleContext,\n): InputStyle {\n switch (state) {\n case \"hover\":\n return {\n borderColor: ctx.hoverBorder,\n ringColor: ctx.ring,\n ringWidth: 0,\n background: ctx.hoverBackground,\n caretOpacity: 0,\n valueReveal: 0,\n placeholderOpacity: 1,\n };\n case \"active\":\n return {\n borderColor: ctx.activeBorder,\n ringColor: ctx.ring,\n ringWidth: 3,\n background: ctx.background,\n caretOpacity: 1,\n valueReveal: 0,\n placeholderOpacity: 1,\n };\n case \"typing\":\n return {\n borderColor: ctx.activeBorder,\n ringColor: ctx.ring,\n ringWidth: 3,\n background: ctx.background,\n caretOpacity: 1,\n valueReveal: 1,\n placeholderOpacity: 0,\n };\n case \"blur\":\n return {\n borderColor: ctx.idleBorder,\n ringColor: ctx.ring,\n ringWidth: 0,\n background: ctx.background,\n caretOpacity: 0,\n valueReveal: 1,\n placeholderOpacity: 0,\n };\n case \"invalid\":\n return {\n borderColor: ctx.invalidBorder,\n ringColor: ctx.invalidRing,\n ringWidth: 3,\n background: ctx.background,\n caretOpacity: 0,\n valueReveal: 1,\n placeholderOpacity: 0,\n };\n default:\n return {\n borderColor: ctx.idleBorder,\n ringColor: ctx.ring,\n ringWidth: 0,\n background: ctx.background,\n caretOpacity: 0,\n valueReveal: 0,\n placeholderOpacity: 1,\n };\n }\n}\n\nexport function Input({\n state = \"idle\",\n style,\n placeholder = \"you@example.com\",\n value = \"remotion@remocn.dev\",\n size = \"default\",\n theme: themeOverride,\n primary,\n mode,\n fullWidth = false,\n className,\n}: InputProps) {\n const theme = useRemocnTheme(\n { ...themeOverride, ...(primary ? { primary } : {}) },\n mode,\n );\n\n const sizeStyle = SIZE_STYLES[size];\n const ctx = inputStyleContext(theme);\n const v = style ?? inputStyle(state, ctx);\n const revealed = value.slice(0, Math.round(value.length * v.valueReveal));\n\n return (\n \n \n {}\n 0 ? 0 : v.placeholderOpacity,\n pointerEvents: \"none\",\n whiteSpace: \"nowrap\",\n }}\n >\n {placeholder}\n \n {}\n
\n \n {revealed}\n \n 0 ? 4 : 0,\n }}\n />\n
\n \n \n );\n}\n", "type": "registry:component", "target": "components/remocn/input.tsx" }, { "path": "src/components/remocn/use-input-transition.ts", "content": "\"use client\";\n\nimport {\n easings,\n mixOklch,\n type RemocnTheme,\n type Step,\n useRemocnTheme,\n useStateTransition,\n} from \"@/lib/remocn-ui\";\nimport {\n inputStyle,\n inputStyleContext,\n type InputState,\n type InputStyle,\n} from \"@/components/remocn/input\";\n\nexport const DEFAULT_DURATION = 8;\n\nexport function tweenInputStyle(\n a: InputStyle,\n b: InputStyle,\n t: number,\n): InputStyle {\n return {\n ringWidth: a.ringWidth + (b.ringWidth - a.ringWidth) * t,\n caretOpacity: a.caretOpacity + (b.caretOpacity - a.caretOpacity) * t,\n valueReveal: a.valueReveal + (b.valueReveal - a.valueReveal) * t,\n placeholderOpacity:\n a.placeholderOpacity + (b.placeholderOpacity - a.placeholderOpacity) * t,\n borderColor: mixOklch(a.borderColor, b.borderColor, t),\n ringColor: mixOklch(a.ringColor, b.ringColor, t),\n background: mixOklch(a.background, b.background, t),\n };\n}\n\nexport interface InputTransitionOptions {\n theme?: Partial;\n mode?: \"light\" | \"dark\";\n primary?: string;\n speed?: number;\n defaultDuration?: number;\n}\n\nexport function useInputTransition(\n steps: Step[],\n opts: InputTransitionOptions = {},\n): InputStyle {\n const {\n theme: themeOverride,\n mode,\n primary,\n speed = 1,\n defaultDuration = DEFAULT_DURATION,\n } = opts;\n const theme = useRemocnTheme(\n { ...themeOverride, ...(primary ? { primary } : {}) },\n mode,\n );\n const ctx = inputStyleContext(theme);\n const { from, to, progress } = useStateTransition(\n steps,\n \"idle\",\n speed,\n defaultDuration,\n );\n const t = easings.out(progress);\n return tweenInputStyle(inputStyle(from, ctx), inputStyle(to, ctx), t);\n}\n", "type": "registry:component", "target": "components/remocn/use-input-transition.ts" }, { "path": "src/components/remocn/x-followers-overview.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { loadFont as loadSans } from \"@remotion/google-fonts/Manrope\";\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: \"#fff\",\n fgMuted: \"#fff\",\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.dark;\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\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 transform: `translateX(${avatarX}px)`,\n }}\n >\n \n \n 0 ? `blur(${handleIn.blur}px)` : \"none\",\n transform: `translateX(${handleX}px)`,\n }}\n >\n @{handle}\n \n \n\n 0 ? `blur(${countIn.blur}px)` : \"none\",\n transform: `translateY(${countIn.translateY}px) 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" }, { "path": "src/demos/agent-skills/index.tsx", "content": "import React, { type ReactNode } from \"react\";\nimport { AbsoluteFill, Easing, Sequence, interpolate, 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 { ClaudeCode } from \"@/components/remocn/claude-code\";\nimport { Backdrop } from \"@/components/remocn/backdrop\";\nimport { KineticCenterBuild } from \"@/components/remocn/kinetic-center-build\";\nimport { ShortSlideDown } from \"@/components/remocn/short-slide-down\";\nimport { TerminalSimulator } from \"@/components/remocn/terminal-simulator\";\nimport { GlassCodeBlock } from \"@/components/remocn/glass-code-block\";\nimport {\n BlurIn,\n type BlurInDirection,\n} from \"@/components/remocn/blur-in\";\nimport { useBlurInTransition } from \"@/components/remocn/use-blur-in-transition\";\nimport { Checkbox } from \"@/components/remocn/checkbox\";\nimport { useCheckboxTransition } from \"@/components/remocn/use-checkbox-transition\";\nimport { Input } from \"@/components/remocn/input\";\nimport { useInputTransition } from \"@/components/remocn/use-input-transition\";\nimport { Drawer } from \"@/components/remocn/drawer\";\nimport { useDrawerTransition } from \"@/components/remocn/use-drawer-transition\";\nimport { AlertDialog } from \"@/components/remocn/alert-dialog\";\nimport { useAlertDialogTransition } from \"@/components/remocn/use-alert-dialog-transition\";\nimport { Select } from \"@/components/remocn/select\";\nimport { useSelectTransition } from \"@/components/remocn/use-select-transition\";\nimport { Sheet } from \"@/components/remocn/sheet\";\nimport { useSheetTransition } from \"@/components/remocn/use-sheet-transition\";\nimport { GitHubStars, SAMPLE_STARGAZERS } from \"@/components/remocn/github-stars\";\nimport { XFollowersOverview } from \"@/components/remocn/x-followers-overview\";\n\n// Bind the fonts the remocn components read from CSS variables.\nconst { fontFamily: SANS } = loadSans(\"normal\", {\n subsets: [\"latin\"],\n weights: [\"400\", \"600\", \"700\", \"800\"],\n});\nconst { fontFamily: MONO } = loadMono(\"normal\", {\n subsets: [\"latin\"],\n weights: [\"400\", \"700\"],\n});\n\n// ---------------------------------------------------------------------------\n// Palette — remocn dark with the Claude terracotta as the through-line tying\n// the \"request\" frame to the video it produces.\n// ---------------------------------------------------------------------------\nconst ACCENT = \"#D97757\";\nconst INK = \"#FAFAFA\";\nconst PAGE = \"#0B0B0C\";\n\n// ---------------------------------------------------------------------------\n// Scene timings (frames @ 30fps). Transitions overlap consecutive scenes.\n// ---------------------------------------------------------------------------\nconst S_PROMPT = 292; // Claude Code: type request → think → \"produce\" the video\nconst S_TERMINAL = 82; // zoomed terminal typing the install command\nconst S_CODE = 134; // glass code block — scan top→bottom, pull back, then hold\nconst S_DIV = 58; // text divider between product blocks\nconst S_SHOWCASE = 228; // six component examples, blur-in transitions\nconst S_AI = 110; // \"works with your AI\" — stacked avatar group\nconst S_GH = 130; // github-stars fly-through\nconst S_XF = 300; // x-followers overview — trimmed to exit just after the total settles (no dead air)\nconst S_OUTRO = 120; // closing wordmark + install pill (from the typography demo)\n\nconst T_HANDOFF = 24; // CC → video: \"render complete, here it is\"\nconst T_FADE = 16;\nconst T_BF = 16; // blur-fade between the back-half scenes\nconst T_RISE = 18;\n\nexport const AGENT_SKILLS_DURATION =\n S_PROMPT +\n S_TERMINAL +\n S_CODE +\n S_DIV +\n S_SHOWCASE +\n S_AI +\n S_DIV +\n S_GH +\n S_DIV +\n S_XF +\n S_OUTRO -\n (T_HANDOFF + T_FADE + 7 * T_BF + T_RISE);\n\n// ===========================================================================\n// Shared helpers\n// ===========================================================================\n\n// ===========================================================================\n// Scene 1 — the request: Claude Code types the skill command, then thinks and\n// \"produces\" the video. The thinking phase is the new feature being demoed.\n// ===========================================================================\nconst PromptScene: React.FC = () => (\n \n \n \n);\n\n// ===========================================================================\n// Scene 2 — install: a zoomed terminal typing the shadcn command. The camera\n// is pinned to the typing cursor — it starts on the left of the line and dollies\n// right as each character appears.\n// ===========================================================================\nconst INSTALL_CMD = \"npx shadcn add @remocn/terminal-simulator\";\n\nconst TerminalZoomScene: React.FC = () => {\n const frame = useCurrentFrame();\n\n // Terminal geometry (matches terminal-simulator's internal 900×480 window,\n // centred on the 1280×720 stage).\n const TERM_FONT = 20;\n const CHAR_W = TERM_FONT * 0.6; // monospace advance ≈ 0.6em\n const WIN_LEFT = (1280 - 900) / 2; // 190\n const WIN_TOP = (720 - 480) / 2; // 120\n const TEXT_START_X = WIN_LEFT + 20 + (CHAR_W + 8); // content pad + \"$ \"\n const LINE_HEIGHT = Math.round(TERM_FONT * 1.6); // 32\n const CURSOR_Y = WIN_TOP + 40 + 20 + LINE_HEIGHT / 2; // chrome + pad + half line\n const LINE_START = 10; // terminal-simulator's first line begins at frame 10\n const CHARS_PER_FRAME = 1;\n\n // Camera: maximum zoom, cursor pinned to a fixed screen point.\n const Z = 2.8;\n const TARGET_X = 640; // screen X the cursor rides on\n const TARGET_Y = 360;\n\n const revealed = interpolate(\n frame,\n [LINE_START, LINE_START + INSTALL_CMD.length / CHARS_PER_FRAME],\n [0, INSTALL_CMD.length],\n { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n );\n const cursorX = TEXT_START_X + revealed * CHAR_W;\n const tx = TARGET_X - Z * cursorX;\n const ty = TARGET_Y - Z * CURSOR_Y;\n\n return (\n \n \n \n \n \n );\n};\n\n// ===========================================================================\n// Scene 3b — the component's code in a glass block (no gradient aura behind it,\n// so the photographic backdrop refracts through the glass instead).\n// ===========================================================================\nconst COMPONENT_CODE = `import { TerminalSimulator } from \"@/components/remocn\";\n\nexport function BuildScene() {\n return (\n \n );\n}`;\n\nconst CodeScene: React.FC = () => {\n const frame = useCurrentFrame();\n\n const codeLines = COMPONENT_CODE.split(\"\\n\");\n const n = codeLines.length;\n const STAGGER = 10; // frames between each line's reveal\n const PULL = 24; // zoom-out duration\n\n // Glass-block geometry on the 1280×720 stage (880×420, centred).\n const BLOCK_LEFT = (1280 - 880) / 2; // 200\n const BLOCK_TOP = (720 - 420) / 2; // 150\n const BODY_TOP = BLOCK_TOP + 1 + 40 + 20; // ring + chrome + body padding\n const LINE_FS = 18;\n const GAP = 4;\n const lineH = (l: string) =>\n l.trim() === \"\" ? LINE_FS * 0.8 : LINE_FS * 1.55;\n\n // Per-line vertical centres, accounting for the short blank-line spacer.\n const lineCenters: number[] = [];\n let yy = BODY_TOP;\n for (const l of codeLines) {\n lineCenters.push(yy + lineH(l) / 2);\n yy += lineH(l) + GAP;\n }\n\n const ANCHOR_WORLD_X = BLOCK_LEFT + 25; // start of the line-number gutter\n const ANCHOR_SCREEN_X = 110;\n const TARGET_Y = 360;\n const Z_IN = 2.6;\n\n // Camera scans top→bottom, tracking the line currently revealing, and holds\n // on the second-to-last line (index n-2).\n const lp = interpolate(frame, [0, (n - 2) * STAGGER], [0, n - 2], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const i0 = Math.floor(lp);\n const i1 = Math.min(i0 + 1, n - 1);\n const currentLineY =\n lineCenters[i0] + (lineCenters[i1] - lineCenters[i0]) * (lp - i0);\n\n const pinnedX = ANCHOR_SCREEN_X - Z_IN * ANCHOR_WORLD_X;\n const pinnedY = TARGET_Y - Z_IN * currentLineY;\n\n // On the second-to-last line, pull the zoom back to the standard centred view.\n const qPull = interpolate(\n frame,\n [(n - 2) * STAGGER, (n - 2) * STAGGER + PULL],\n [0, 1],\n {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.inOut(Easing.cubic),\n },\n );\n const scale = Z_IN + qPull * (1 - Z_IN);\n const tx = (1 - qPull) * pinnedX;\n const ty = (1 - qPull) * pinnedY;\n\n return (\n \n \n \n \n \n \n \n );\n};\n\n// ===========================================================================\n// Divider scenes — white text between the product blocks (no accent colour),\n// alternating kinetic-center-build and short-slide-down.\n// ===========================================================================\nconst DividerScrim: React.FC = () => (\n \n);\n\nconst useDividerFadeOut = (): number => {\n const frame = useCurrentFrame();\n return interpolate(frame, [S_DIV - 10, S_DIV], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n};\n\nconst DividerKinetic: React.FC<{ text: string }> = ({ text }) => (\n \n \n \n \n);\n\nconst DividerSlide: React.FC<{ text: string }> = ({ text }) => (\n \n \n \n \n);\n\n// ===========================================================================\n// Showcase — six component examples on a light \"app card\", each revealed with a\n// dynamic blur-in (no captions). The blur-in carries the transition.\n// ===========================================================================\nconst SHOW_STEP = 36; // frames between each component's entrance\nconst SHOW_PER = 48; // each component's on-screen window\n\nconst AppCard: React.FC<{ children: ReactNode }> = ({ children }) => (\n \n {children}\n \n);\n\nconst BlurItem: React.FC<{ dir: BlurInDirection; children: ReactNode }> = ({\n dir,\n children,\n}) => {\n const style = useBlurInTransition(\n [\n { at: 2, state: \"revealed\", duration: 14 },\n { at: SHOW_PER - 16, state: \"hidden\", duration: 14 },\n ],\n { direction: dir, distance: 44, blur: 16 },\n );\n return (\n \n \n {children}\n \n \n );\n};\n\n// Each example drives its own state animation via its transition hook (the\n// checkbox checks, the input types, the drawer/sheet/dialog/select open), and\n// the whole card blurs in/out around it.\nconst OPEN_AT = 6;\nconst OPEN_DUR = 18;\n\nconst ShowCheckbox: React.FC = () => {\n const style = useCheckboxTransition([\n { at: 0, state: \"unchecked\" },\n { at: 10, state: \"checked\", duration: 16 },\n ]);\n return (\n \n
\n \n
\n \n );\n};\n\nconst ShowInput: React.FC = () => {\n const frame = useCurrentFrame();\n const full = \"hello@remocn.dev\";\n const revealed = Math.floor(\n interpolate(frame, [OPEN_AT, OPEN_AT + 22], [0, full.length], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n }),\n );\n const style = useInputTransition([\n { at: 0, state: \"idle\" },\n { at: 3, state: \"active\", duration: 6 },\n { at: 9, state: \"typing\", duration: 8 },\n ]);\n return (\n \n \n
\n \n
\n \n \n );\n};\n\nconst ShowDrawer: React.FC = () => {\n const style = useDrawerTransition([\n { at: 0, state: \"closed\" },\n { at: OPEN_AT, state: \"opened\", duration: OPEN_DUR },\n ]);\n return (\n \n \n \n );\n};\n\nconst ShowAlertDialog: React.FC = () => {\n const style = useAlertDialogTransition([\n { at: 0, state: \"closed\" },\n { at: OPEN_AT, state: \"opened\", duration: OPEN_DUR },\n ]);\n return (\n \n \n \n );\n};\n\nconst ShowSelect: React.FC = () => {\n const style = useSelectTransition([\n { at: 0, state: \"closed\" },\n { at: OPEN_AT, state: \"opened\", duration: OPEN_DUR },\n ]);\n return (\n \n \n \n );\n};\n\nconst ShowSheet: React.FC = () => {\n const style = useSheetTransition([\n { at: 0, state: \"closed\" },\n { at: OPEN_AT, state: \"opened\", duration: OPEN_DUR },\n ]);\n return (\n \n \n \n );\n};\n\nconst SHOW_ITEMS: { Comp: React.FC; dir: BlurInDirection }[] = [\n { Comp: ShowCheckbox, dir: \"up\" },\n { Comp: ShowInput, dir: \"right\" },\n { Comp: ShowDrawer, dir: \"down\" },\n { Comp: ShowAlertDialog, dir: \"left\" },\n { Comp: ShowSelect, dir: \"up\" },\n { Comp: ShowSheet, dir: \"right\" },\n];\n\nconst ShowcaseScene: React.FC = () => (\n \n {SHOW_ITEMS.map(({ Comp, dir }, i) => (\n \n \n \n \n \n ))}\n \n);\n\n// ===========================================================================\n// Works with your AI — a stacked avatar group of AI-tool marks, staggered in.\n// ===========================================================================\nconst ClaudeMark: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\nconst CodexMark: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\nconst CursorMark: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\nconst GrokMark: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n \n);\n\nconst AI_TOOLS: { Mark: React.FC<{ size: number }>; bg: string }[] = [\n { Mark: ClaudeMark, bg: \"#F0EEE6\" },\n { Mark: CodexMark, bg: \"#0A0A0A\" },\n { Mark: CursorMark, bg: \"#0A0A0A\" },\n { Mark: GrokMark, bg: \"#0A0A0A\" },\n];\n\nconst AVATAR_D = 118; // avatar diameter\nconst AVATAR_OVERLAP = 38; // px the avatars tuck under each other\nconst AVATAR_STAGGER = 7; // frames between each avatar springing in\n\nconst AIToolsScene: React.FC = () => {\n const frame = useCurrentFrame();\n const { fps } = useVideoConfig();\n const heading = interpolate(frame, [AI_TOOLS.length * AVATAR_STAGGER + 6, AI_TOOLS.length * AVATAR_STAGGER + 24], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.out(Easing.cubic),\n });\n\n return (\n \n \n \n {/* Stacked avatar group */}\n
\n {AI_TOOLS.map(({ Mark, bg }, i) => {\n const s = spring({\n fps,\n frame: frame - i * AVATAR_STAGGER,\n config: { damping: 13, stiffness: 130, mass: 0.8 },\n });\n const scale = interpolate(s, [0, 1], [0.5, 1]);\n const translateY = interpolate(s, [0, 1], [22, 0]);\n return (\n \n \n
\n );\n })}\n \n\n {/* Caption */}\n \n Works with your AI\n \n \n \n );\n};\n\n// ===========================================================================\n// GitHub stars — fly-through of the repo's stargazers locking on the total.\n// ===========================================================================\nconst GitHubStarsScene: React.FC = () => (\n \n \n \n);\n\n// ===========================================================================\n// X followers — notification cycle into the total follower count.\n// ===========================================================================\nconst XFollowersScene: React.FC = () => (\n \n \n \n);\n\n// ===========================================================================\n// Scene 6 — outro: closing wordmark + install pill, ported from the typography\n// demo. The whole group lifts away and blurs out at the very end.\n// ===========================================================================\nconst CopyIcon: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n \n);\n\nconst CheckIcon: React.FC<{ size: number }> = ({ size }) => (\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\n return (\n \n $\n {command}\n \n {copied ? : }\n \n \n );\n};\n\nconst OutroScene: React.FC = () => {\n const frame = useCurrentFrame();\n\n const word = interpolate(frame, [6, 30], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.bezier(0.22, 1, 0.36, 1),\n });\n\n // The whole closing group lifts away and blurs out at the very end.\n const exit = interpolate(frame, [S_OUTRO - 18, S_OUTRO], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.in(Easing.cubic),\n });\n\n return (\n 0.001 ? `blur(${exit * 16}px)` : undefined,\n }}\n >\n \n \n \n remocn\n \n\n \n \n \n );\n};\n\n// ===========================================================================\n// Transition: CC → video. The request frame scales up + blurs away while the\n// rendered video arrives from slightly behind — \"here's the video I made\".\n// ===========================================================================\nconst HandoffPresentation: React.FC<\n TransitionPresentationComponentProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\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\n const style: React.CSSProperties = entering\n ? {\n opacity: p,\n transform: `scale(${interpolate(p, [0, 1], [0.92, 1])})`,\n filter: p < 1 ? `blur(${(1 - p) * 14}px)` : undefined,\n }\n : {\n opacity: 1 - p,\n transform: `scale(${interpolate(p, [0, 1], [1, 1.08])})`,\n filter: p > 0 ? `blur(${p * 16}px)` : undefined,\n };\n\n return {children};\n};\n\nconst handoff = (): TransitionPresentation> => ({\n component: HandoffPresentation,\n props: {},\n});\n\n// Closing rise: outro descends, un-blurs and settles; outgoing dissolves.\nconst RisePresentation: React.FC<\n TransitionPresentationComponentProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\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 filter: p < 1 ? `blur(${(1 - p) * 14}px)` : undefined,\n transform: `translateY(${-(1 - p) * 70}px)`,\n }\n : {\n opacity: 1 - p,\n filter: p > 0 ? `blur(${p * 14}px)` : undefined,\n };\n return {children};\n};\n\nconst rise = (): TransitionPresentation> => ({\n component: RisePresentation,\n props: {},\n});\n\n// Blur-fade between the back-half scenes — dynamic, in keeping with the\n// component blur-ins.\nconst BlurFadePresentation: React.FC<\n TransitionPresentationComponentProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\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 ? { opacity: p, filter: p < 1 ? `blur(${(1 - p) * 16}px)` : undefined }\n : { opacity: 1 - p, filter: p > 0 ? `blur(${p * 16}px)` : undefined };\n return {children};\n};\nconst blurFade = (): TransitionPresentation> => ({\n component: BlurFadePresentation,\n props: {},\n});\n\n// Fade-THROUGH (not a crossfade): the outgoing scene fades out fully before the\n// incoming one fades in, so two zoomed scenes never overlap as a double-exposure.\nconst FadeThroughPresentation: React.FC<\n TransitionPresentationComponentProps>\n> = ({ children, presentationProgress, presentationDirection }) => {\n const entering = presentationDirection === \"entering\";\n const opacity = entering\n ? interpolate(presentationProgress, [0.5, 1], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.out(Easing.cubic),\n })\n : interpolate(presentationProgress, [0, 0.5], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.in(Easing.cubic),\n });\n return {children};\n};\nconst fadeThrough = (): TransitionPresentation> => ({\n component: FadeThroughPresentation,\n props: {},\n});\n\n// ===========================================================================\n// Composition root\n// ===========================================================================\nexport const AgentSkillsDemo: React.FC = () => {\n return (\n \n \n {/* Persistent photographic backdrop behind every scene. */}\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 \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 \n\n \n \n \n\n \n\n \n \n \n \n \n \n );\n};\n", "type": "registry:component", "target": "demos/agent-skills/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/agent-skills/prompt.md", "content": "\n\nMake a meta demo video about the remocn agent skill itself — the pitch is basically \"you ask Claude Code to make a video and it does.\" Show it as if Claude Code just received a prompt like \"/remocn make a great demo video\", briefly working through the skill, and then producing a polished remocn showcase as the result: a zoomed-in terminal typing the install command, the component's source getting scanned top to bottom in a glass code block, then a handful of component examples blurring in one after another — checkbox, input, drawer, alert-dialog, select, sheet. Add a GitHub stars beat and a quick X followers overview, use plain white text dividers between sections, and close on the remocn wordmark. Build the whole thing with remocn components.\n", "type": "registry:file", "target": "demos/agent-skills/prompt.md" } ], "docs": "Register the composition in your Remotion Root:\n\n import { AgentSkillsDemo } from \"@/demos/agent-skills\";\n \n\nRequires Tailwind v4 wired into Remotion (@remotion/tailwind-v4).\nRender locally: npx remotion render agent-skills out/agent-skills.mp4", "type": "registry:block" }