发布视频 — 液态玻璃产品展示

使用液态玻璃美学制作电影级产品发布视频：黑暗虚空、3D浮动面板、粒子效果、弹簧动画，以及自信的节奏。

复合技能

技能	作用
`/remotion-best-practices`	合成结构、`spring()`、`<Sequence>`、渲染管线
`/content-creation`	AI资产生成（Imagen 4.0, Veo 3.1）
`/arcan-glass`	BroomVA品牌令牌（AI Blue, dark-first palette）
`/google-veo`	电影级B-roll生成提示词
`/blog-post`	分发管线（发布到 X、LinkedIn、Instagram）

液态玻璃美学

核心视觉原则

黑暗虚空背景 — 纯黑（#000000）或接近纯黑（#0A0A0A）。基底无渐变。内容悬浮于黑暗中。
3D透视面板 — 截图和UI渲染以8-15°倾斜，并使用perspective(1200px)。绝不平面。始终浮动。
玻璃材质 — 面板具有磨砂边缘、微妙的反射、带发光的圆角、半透明边框。
粒子场 — 微小的浮动粒子（2-4px，低不透明度，缓慢漂移）填充虚空。营造深度和生机感。
弹簧运动 — 所有进入/退出使用Remotion spring()。绝不使用CSS过渡。绝不线性。自然、自信。
自信的节奏 — 每个场景至少持续3-5秒。无快速剪辑。让每个画面有呼吸的空间。
极简排版 — 无衬线字体（Inter、SF Pro或系统默认），白字黑底，居中。每个标题卡最多8个单词。

调色板

令牌	值	用途
`void`	`#000000`	背景
`panel-bg`	`rgba(20, 20, 25, 0.85)`	玻璃面板填充
`panel-border`	`rgba(255, 255, 255, 0.08)`	玻璃边缘
`panel-glow`	`rgba(59, 130, 246, 0.15)`	边缘发光（AI Blue）
`text-primary`	`#FFFFFF`	标题文本
`text-secondary`	`rgba(255, 255, 255, 0.6)`	字幕、URL
`accent`	`#3B82F6`	AI Blue高亮
`success`	`#22C55E`	勾选标记、积极状态
`particle`	`rgba(255, 255, 255, 0.15)`	背景粒子

3D面板CSS（Remotion）

const panelStyle: React.CSSProperties = {
  perspective: '1200px',
  transform: `rotateY(-8deg) rotateX(5deg)`,
  borderRadius: 16,
  border: '1px solid rgba(255, 255, 255, 0.08)',
  boxShadow: `
    0 25px 50px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05)
  `,
  background: 'rgba(20, 20, 25, 0.85)',
  backdropFilter: 'blur(20px)',
  overflow: 'hidden',
};

弹簧配置

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

// 标准进入
const entrance = spring({
  frame,
  fps,
  config: { damping: 15, stiffness: 80, mass: 0.8 },
});

// 微妙漂移（用于浮动面板）
const drift = spring({
  frame: frame - delay,
  fps,
  config: { damping: 200, stiffness: 10, mass: 2 },
  durationInFrames: 120,
});

场景类型

1. 标题卡

时长: 3-4秒内容: 产品名称或标语，居中，白字黑底动画: 淡入，并带有细微的缩放弹簧（0.95 → 1.0）示例: "使用Gemini构建您的创意"

2. 提示词 / 输入场景

时长: 4-6秒内容: 聊天输入或终端提示词，倾斜的3D面板动画: 面板从下方弹簧进入，文本打字机效果技术: 使用带有3D CSS变换的<Img>截图，通过基于帧的字符串切片实现打字机效果

3. 分屏面板场景

时长: 4-5秒内容: 两个并排的UI面板（例如，提示词 + 代码输出）动画: 面板从相反两侧弹簧进入，粒子在它们之间技术: 两个带有相反rotateY变换的<Img>组件

4. 产品演示场景

时长: 5-8秒内容: 完整的用户界面作为浮动玻璃面板动画: 缓慢漂移旋转（微妙的rotateY振荡），电影级缩放技术: 使用带有动画scale和rotateY的<Img>或<OffthreadVideo>

5. 细节缩放场景

时长: 3-4秒内容: 放大到特定的UI元素或功能动画: 从完整视图到裁剪细节的弹簧缩放技术: 面板图像上的动画scale + translate

6. CTA / 品牌卡

时长: 3-4秒内容: 标志 + URL 或安装命令动画: 淡入，保持，淡出技术: 居中文本，品牌图标，微妙发光

7. AI电影帧（Imagen 4.0）

时长: 3-5秒内容: 在GlassPanel内展示AI生成的英雄渲染或概念艺术动画: 弹簧进入，缓慢漂移旋转，微妙缩放技术: 通过Imagen 4.0生成，放入public/目录，在GlassPanel内使用带有3D变换的<Img src={staticFile('render.png')} /> 何时使用: 抽象概念、架构图、情绪视觉——任何受益于AI生成图像而非截图的内容

<GlassPanel rotateY={-10} rotateX={6} delay={5}>
  <Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>

8. AI视频B-roll（Veo 3.1）

时长: 4-8秒内容: 电影级AI生成视频片段，作为过渡或氛围动画: 在GlassPanel后面或内部播放，可选择叠加文字技术: 通过Veo 3.1生成，使用ffmpeg -movflags +faststart预处理，在Remotion中使用<OffthreadVideo>

// 全出血电影级B-roll（场景之间）
<OffthreadVideo
  src={staticFile('veo-broll-corridor.mp4')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>

// 玻璃面板内的B-roll
<GlassPanel rotateY={-5} rotateX={3}>
  <OffthreadVideo
    src={staticFile('veo-product-demo.mp4')}
    style={{ width: '100%', borderRadius: 12 }}
  />
</GlassPanel>

Veo 3.1 B-roll提示模式:

[镜头运动], [主体/环境], [动作/运动], [光照+情绪]。
深色背景，[强调色]发光。电影级，专业。[宽高比]。

何时使用: 场景组之间的过渡、氛围开场/尾声、静态截图无法满足的动感产品演示。

预处理（<OffthreadVideo> + parseMedia() 必需）:

ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4

混合合成模式

最精美的视频将三种资产类型组合在一起：

标题卡（文本）
  → GlassPanel中的Imagen帧（概念艺术）
    → Veo B-roll过渡（4秒电影级）
      → GlassPanel中的截图（产品演示）
        → Remotion动画数据（管线节点、文件树）
          → Veo B-roll尾声（氛围）
            → CTA卡（文本）

规则: Remotion控制时间、过渡和文本。AI资产提供视觉丰富度。绝不让AI控制节奏——那是Remotion的工作。

制作流水线

1. 故事板 → 定义场景（类型1-8）、持续时间和内容
2. 资产 → 生成/捕获所有视觉资产
   a. 截图 — 通过 agent-browser 或手动截取产品UI
   b. Imagen 4.0 — 英雄渲染、概念艺术、抽象视觉
      → ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
      → 保存到 public/ 目录
   c. Veo 3.1 — 电影级B-roll片段（每个4-8秒）
      → ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
      → 预处理: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
      → 保存到 public/ 目录
3. 合成 → 构建Remotion合成
   - 使用带 premountFor 的 <Sequence> 进行预加载
   - 使用 <Img> + staticFile() 处理图片（绝不使用 <img>）
   - 使用 <OffthreadVideo> + staticFile() 处理Veo片段（绝不使用 <video>）
   - 使用 GlassPanel + spring() 处理3D变换和进入动画
   - 使用 ParticleField 作为背景层
   - 使用 Subtitle 组件进行文字叠加
4. 渲染 → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. 后处理 → 如有需要，分别添加音频
   - ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. 审阅 → /creative-review 根据样式简报评分输出（目标：≥75）
7. 分发 → 通过 /blog-post 发布管线推送至平台

Remotion项目结构

launch-video/
├── src/
│   ├── Root.tsx                 # registerRoot
│   ├── Composition.tsx          # 主合成，包含场景的<Sequence>
│   ├── scenes/
│   │   ├── TitleCard.tsx        # 场景类型 1
│   │   ├── PromptScene.tsx      # 场景类型 2
│   │   ├── SplitPanel.tsx       # 场景类型 3
│   │   ├── ProductDemo.tsx      # 场景类型 4
│   │   ├── DetailZoom.tsx       # 场景类型 5
│   │   └── CTACard.tsx          # 场景类型 6
│   ├── components/
│   │   ├── GlassPanel.tsx       # 3D透视玻璃材质面板
│   │   ├── ParticleField.tsx    # 背景粒子系统
│   │   ├── TypewriterText.tsx   # 基于帧的打字机动画
│   │   └── SpringFade.tsx       # 可复用的弹簧淡入包装器
│   └── styles/
│       └── tokens.ts            # 液态玻璃颜色/间距令牌
├── public/                      # staticFile() 资产（截图、渲染）
├── package.json
└── remotion.config.ts

粒子场组件（参考）

const ParticleField: React.FC<{ count?: number }> = ({ count = 40 }) => {
  const frame = useCurrentFrame();
  const particles = useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      x: (i * 37 + 13) % 100,
      y: (i * 53 + 7) % 100,
      size: 2 + (i % 3),
      speed: 0.1 + (i % 5) * 0.05,
      opacity: 0.05 + (i % 4) * 0.04,
    })), [count]);

  return (
    <AbsoluteFill>
      {particles.map((p, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${p.x}%`,
          top: `${(p.y + frame * p.speed) % 110}%`,
          width: p.size,
          height: p.size,
          borderRadius: '50%',
          background: `rgba(255, 255, 255, ${p.opacity})`,
        }} />
      ))}
    </AbsoluteFill>
  );
};

GlassPanel组件（参考）

const GlassPanel: React.FC<{
  children: React.ReactNode;
  rotateY?: number;
  rotateX?: number;
  scale?: number;
}> = ({ children, rotateY = -8, rotateX = 5, scale = 1 }) => (
  <div style={{
    transform: `perspective(1200px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${scale})`,
    borderRadius: 16,
    border: '1px solid rgba(255, 255, 255, 0.08)',
    boxShadow: '0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05)',
    background: 'rgba(20, 20, 25, 0.85)',
    overflow: 'hidden',
    transition: 'none',
  }}>
    {children}
  </div>
);

在你喜欢的 AI 中提问

文档

发布视频 — 液态玻璃产品展示

复合技能

液态玻璃美学

核心视觉原则

调色板

3D面板CSS（Remotion）

弹簧配置

场景类型

1. 标题卡

2. 提示词 / 输入场景

3. 分屏面板场景

4. 产品演示场景

5. 细节缩放场景

6. CTA / 品牌卡

7. AI电影帧（Imagen 4.0）

8. AI视频B-roll（Veo 3.1）

混合合成模式

制作流水线

Remotion项目结构

粒子场组件（参考）

GlassPanel组件（参考）

质量检查清单

Individual skills in this repo

broomva/skills

broomva/skills

broomva/skills

broomva/skills

broomva/skills

broomva/skills

broomva/skills

相关技能

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code