發佈影片 — 液態玻璃產品展示是做什麼的？

使用液態玻璃美學製作電影級產品發佈影片：黑暗虛空、3D 浮動面板、粒子效果、彈簧動畫與自信的節奏。

複合技能

技能	角色
`/remotion-best-practices`	合成結構、`spring()`、`<Sequence>`、渲染管線
`/content-creation`	AI 素材生成（Imagen 4.0、Veo 3.1）
`/arcan-glass`	BroomVA 品牌標記（AI 藍色、暗色優先調色板）
`/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 藍色）
`text-primary`	`#FFFFFF`	標題文字
`text-secondary`	`rgba(255, 255, 255, 0.6)`	副標題、網址
`accent`	`#3B82F6`	AI 藍色強調色
`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 transform 的 <Img> 螢幕截圖，透過基於影格的字串切割實現打字機效果

3. 分割面板場景

持續時間：4-5 秒內容：兩個並排的 UI 面板（例如：提示詞 + 程式碼輸出）動畫：面板從對側彈入，粒子在之間飄浮技法：兩個使用相反 rotateY 變換的 <Img> 元件

4. 產品展示場景

持續時間：5-8 秒內容：完整產品 UI 作為浮動玻璃面板動畫：緩慢的飄移旋轉（微妙的 rotateY 震盪）、電影級縮放技法：使用具有動畫 scale 和 rotateY 的 <Img> 或 <OffthreadVideo>

5. 細節放大場景

持續時間：3-4 秒內容：放大到特定的 UI 元素或功能動畫：從全貌縮放到裁切細節的彈簧縮放技法：對面板圖片進行動畫 scale + translate

6. CTA / 品牌卡

持續時間：3-4 秒內容：Logo + 網址或安裝指令動畫：淡入、停留、淡出技法：置中文字、品牌圖示、微發光

7. AI 電影級影格（Imagen 4.0）

持續時間：3-5 秒內容：AI 生成的英雄渲染圖或概念藝術，置於 GlassPanel 內動畫：彈簧進場、緩慢飄移旋轉、微縮放技法：透過 Imagen 4.0 生成，放入 public/ 目錄，在帶有 3D 變換的 GlassPanel 內使用 <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 合成
   - 使用 <Sequence> 搭配 premountFor 進行預載
   - 圖片使用 <Img> + staticFile() (絕不使用 <img>)
   - Veo 片段使用 <OffthreadVideo> + staticFile() (絕不使用 <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

發佈影片 — 液態玻璃產品展示是做什麼的？