remotion-claude-agent-demo 0.1.0

package/templates/.claude/skills/remotion-components/SKILL.md

@@ -0,0 +1,453 @@
+---
+name: remotion-components
+version: 1.0.0
+description: Remotion组件库。提供标准化的动画背景、代码编辑器、终端、卡片等可复用组件。
+triggers:
+  - remotion组件
+  - 动画组件
+  - 视频组件
+  - components
+tools:
+  - Read
+  - Write
+---
+
+# Remotion 组件库 (Remotion Components)
+
+提供一套标准化、可复用的Remotion视频组件，确保视频风格统一、动画流畅。
+
+## 组件清单
+
+1. **AnimatedBackground** - 动画背景（粒子、渐变、网格）
+2. **CodeEditor** - 代码编辑器（打字效果、语法高亮）
+3. **Terminal** - 终端命令行
+4. **FeatureCard** - 特性卡片
+5. **FlowDiagram** - 流程图
+6. **Subtitles** - 字幕组件
+7. **SceneTransition** - 场景过渡
+
+## 1. AnimatedBackground 动画背景
+
+```tsx
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+
+interface AnimatedBackgroundProps {
+  variant?: "default" | "code" | "energetic";
+  particleCount?: number;
+  primaryColor?: string;
+}
+
+export const AnimatedBackground: React.FC<AnimatedBackgroundProps> = ({
+  variant = "default",
+  particleCount = 20,
+  primaryColor = "#D97706",
+}) => {
+  const frame = useCurrentFrame();
+
+  // 渐变背景
+  const gradients = {
+    default: "linear-gradient(135deg, #0F172A 0%, #1E293B 100%)",
+    code: "linear-gradient(135deg, #0F172A 0%, #1a1a2e 50%, #16213e 100%)",
+    energetic: "linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%)",
+  };
+
+  // 动态光晕
+  const glowX = 50 + Math.sin(frame * 0.02) * 20;
+  const glowY = 50 + Math.cos(frame * 0.015) * 20;
+
+  // 粒子生成
+  const particles = Array.from({ length: particleCount }, (_, i) => {
+    const seed = (42 * (i + 1) * 9301 + 49297) % 233280 / 233280;
+    return {
+      x: seed * 100,
+      y: (seed * (i + 1) * 7) % 100,
+      size: 2 + seed * 4,
+      speed: 0.5 + seed * 1.5,
+      delay: i * 10,
+    };
+  });
+
+  return (
+    <AbsoluteFill style={{ background: gradients[variant], overflow: "hidden" }}>
+      {/* 动态光晕 */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(circle at ${glowX}% ${glowY}%, ${primaryColor}20 0%, transparent 50%)`,
+        }}
+      />
+
+      {/* 浮动粒子 */}
+      {particles.map((p, i) => {
+        const yOffset = ((frame + p.delay) * p.speed) % 120;
+        const opacity = interpolate(yOffset, [0, 20, 100, 120], [0, 0.6, 0.6, 0]);
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: `${p.x}%`,
+              top: `${p.y - yOffset + 100}%`,
+              width: p.size,
+              height: p.size,
+              borderRadius: "50%",
+              backgroundColor: primaryColor,
+              opacity: opacity * 0.5,
+              boxShadow: `0 0 ${p.size * 2}px ${primaryColor}`,
+            }}
+          />
+        );
+      })}
+
+      {/* 网格图案 */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+          `,
+          backgroundSize: "50px 50px",
+          opacity: 0.5,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+```
+
+## 2. CodeEditor 代码编辑器
+
+```tsx
+import { AbsoluteFill, interpolate, useCurrentFrame, spring, useVideoConfig } from "remotion";
+
+interface CodeLine {
+  text: string;
+  color?: string;
+  delay: number; // 开始显示的帧数
+}
+
+interface CodeEditorProps {
+  title?: string;
+  lines: CodeLine[];
+  showLineNumbers?: boolean;
+  typeEffect?: boolean;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({
+  title = "code.py",
+  lines,
+  showLineNumbers = true,
+  typeEffect = true,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 编辑器弹入动画
+  const editorSpring = spring({ frame, fps, config: { damping: 15, stiffness: 80 } });
+
+  // 光标闪烁
+  const showCursor = frame % 20 < 10;
+
+  // 当前正在打字的行
+  const currentLineIndex = lines.findIndex(
+    (line, i) => frame >= line.delay && (i === lines.length - 1 || frame < lines[i + 1].delay + 15)
+  );
+
+  return (
+    <div
+      style={{
+        opacity: editorSpring,
+        transform: `translateY(${interpolate(editorSpring, [0, 1], [30, 0])}px)`,
+        backgroundColor: "rgba(30, 41, 59, 0.95)",
+        borderRadius: 16,
+        overflow: "hidden",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+        border: "1px solid rgba(71, 85, 105, 0.5)",
+      }}
+    >
+      {/* 标题栏 */}
+      <div
+        style={{
+          backgroundColor: "#0F172A",
+          padding: "12px 20px",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <div style={{ width: 12, height: 12, borderRadius: "50%", backgroundColor: "#EF4444" }} />
+        <div style={{ width: 12, height: 12, borderRadius: "50%", backgroundColor: "#F59E0B" }} />
+        <div style={{ width: 12, height: 12, borderRadius: "50%", backgroundColor: "#22C55E" }} />
+        <span style={{ color: "#64748B", marginLeft: 20, fontSize: 14 }}>{title}</span>
+      </div>
+
+      {/* 代码内容 */}
+      <div style={{ padding: 24, position: "relative" }}>
+        {/* 行号 */}
+        {showLineNumbers && (
+          <div
+            style={{
+              position: "absolute",
+              left: 24,
+              color: "#475569",
+              fontFamily: "JetBrains Mono, monospace",
+              fontSize: 18,
+              lineHeight: 1.8,
+            }}
+          >
+            {lines.map((_, i) => <div key={i}>{i + 1}</div>)}
+          </div>
+        )}
+
+        {/* 代码 */}
+        <pre
+          style={{
+            fontFamily: "JetBrains Mono, monospace",
+            fontSize: 18,
+            lineHeight: 1.8,
+            margin: 0,
+            paddingLeft: showLineNumbers ? 50 : 0,
+          }}
+        >
+          {lines.map((line, i) => {
+            const lineOpacity = interpolate(
+              frame,
+              [line.delay, line.delay + 12],
+              [0, 1],
+              { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+            );
+
+            const isCurrentLine = i === currentLineIndex;
+
+            return (
+              <div
+                key={i}
+                style={{
+                  opacity: lineOpacity,
+                  color: line.color || "#F1F5F9",
+                  backgroundColor: isCurrentLine ? "rgba(217, 119, 6, 0.1)" : "transparent",
+                  marginLeft: -8,
+                  paddingLeft: 8,
+                  borderRadius: 4,
+                }}
+              >
+                {line.text || " "}
+                {isCurrentLine && showCursor && typeEffect && (
+                  <span style={{ color: "#22D3EE" }}>|</span>
+                )}
+              </div>
+            );
+          })}
+        </pre>
+      </div>
+    </div>
+  );
+};
+```
+
+## 3. Terminal 终端组件
+
+```tsx
+interface TerminalLine {
+  text: string;
+  isCommand?: boolean;
+  color?: string;
+  delay: number;
+}
+
+interface TerminalProps {
+  title?: string;
+  lines: TerminalLine[];
+}
+
+export const Terminal: React.FC<TerminalProps> = ({
+  title = "Terminal",
+  lines,
+}) => {
+  const frame = useCurrentFrame();
+  const showCursor = frame % 20 < 10;
+
+  const currentLineIndex = lines.findIndex(
+    (line, i) => frame >= line.delay && (i === lines.length - 1 || frame < lines[i + 1].delay)
+  );
+
+  return (
+    <div
+      style={{
+        backgroundColor: "rgba(15, 23, 42, 0.95)",
+        borderRadius: 16,
+        overflow: "hidden",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+      }}
+    >
+      {/* 标题栏 */}
+      <div
+        style={{
+          backgroundColor: "#1E293B",
+          padding: "12px 20px",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <div style={{ width: 12, height: 12, borderRadius: "50%", backgroundColor: "#EF4444" }} />
+        <div style={{ width: 12, height: 12, borderRadius: "50%", backgroundColor: "#F59E0B" }} />
+        <div style={{ width: 12, height: 12, borderRadius: "50%", backgroundColor: "#22C55E" }} />
+        <span style={{ color: "#64748B", marginLeft: 20, fontSize: 14 }}>{title}</span>
+      </div>
+
+      {/* 终端内容 */}
+      <div style={{ padding: 24 }}>
+        {lines.map((line, i) => {
+          const opacity = interpolate(
+            frame,
+            [line.delay, line.delay + 12],
+            [0, 1],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+          );
+
+          if (!line.text) return <div key={i} style={{ height: 12 }} />;
+
+          const isCurrentLine = i === currentLineIndex;
+
+          return (
+            <div
+              key={i}
+              style={{
+                opacity,
+                fontFamily: "JetBrains Mono, monospace",
+                fontSize: 20,
+                color: line.color || "#F1F5F9",
+                marginBottom: 8,
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              {line.isCommand && (
+                <span style={{ color: "#22C55E", marginRight: 12, fontWeight: 700 }}>$</span>
+              )}
+              {line.text}
+              {isCurrentLine && showCursor && line.isCommand && (
+                <span style={{ color: "#22D3EE", marginLeft: 2 }}>|</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+```
+
+## 4. FeatureCard 特性卡片
+
+```tsx
+interface FeatureCardProps {
+  icon: string;
+  title: string;
+  description: string;
+  color: string;
+  delay: number;
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({
+  icon,
+  title,
+  description,
+  color,
+  delay,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const cardSpring = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 12, stiffness: 100 },
+  });
+
+  const floatY = Math.sin(frame * 0.04) * 4;
+
+  return (
+    <div
+      style={{
+        opacity: cardSpring,
+        transform: `scale(${cardSpring}) translateY(${floatY}px)`,
+        backgroundColor: "rgba(30, 41, 59, 0.9)",
+        borderRadius: 16,
+        padding: 28,
+        border: `3px solid ${color}`,
+        boxShadow: `0 0 20px ${color}30`,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 15, marginBottom: 12 }}>
+        <span style={{ fontSize: 40 }}>{icon}</span>
+        <span style={{ fontSize: 28, fontWeight: 700, color }}>{title}</span>
+      </div>
+      <div style={{ fontSize: 18, color: "#94A3B8" }}>{description}</div>
+    </div>
+  );
+};
+```
+
+## 5. 标准动画参数
+
+```typescript
+// 推荐的 Spring 配置
+export const SPRING_CONFIGS = {
+  // 快速弹入
+  snappy: { damping: 10, stiffness: 120, mass: 0.5 },
+  // 平滑过渡
+  smooth: { damping: 15, stiffness: 80, mass: 0.8 },
+  // 弹性效果
+  bouncy: { damping: 8, stiffness: 150, mass: 0.3 },
+  // 缓慢优雅
+  gentle: { damping: 20, stiffness: 60, mass: 1 },
+};
+
+// 标准色板
+export const COLORS = {
+  primary: "#D97706",    // 橙色 - 主色调
+  success: "#22C55E",    // 绿色 - 成功
+  info: "#22D3EE",       // 青色 - 信息
+  warning: "#F59E0B",    // 黄色 - 警告
+  error: "#EF4444",      // 红色 - 错误
+  purple: "#8B5CF6",     // 紫色
+  pink: "#EC4899",       // 粉色
+  blue: "#3B82F6",       // 蓝色
+
+  text: "#F1F5F9",       // 主文字
+  textMuted: "#94A3B8",  // 次要文字
+  background: "#0F172A", // 背景
+  surface: "#1E293B",    // 表面
+  border: "#334155",     // 边框
+};
+```
+
+## 使用示例
+
+```tsx
+import { AnimatedBackground, CodeEditor, Terminal, FeatureCard } from "./components";
+import { SPRING_CONFIGS, COLORS } from "./constants";
+
+export const MyScene: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <AnimatedBackground variant="code" primaryColor={COLORS.primary} />
+
+      <CodeEditor
+        title="agent.py"
+        lines={[
+          { text: "from claude_agent_sdk import query", delay: 0, color: "#C792EA" },
+          { text: "", delay: 10 },
+          { text: "async for msg in query(...):", delay: 20, color: "#89DDFF" },
+        ]}
+      />
+    </AbsoluteFill>
+  );
+};
+```