科技動態圖形編碼器

科技動態圖形編碼器 是做什麼的？

生成符合工業科技美學、深色模式、可直接用於製作的程式化動態圖形與互動式動畫程式碼。

摘要

將文字腳本、技術架構或資料點轉換為自包含的 HTML/JS/CSS 或 React/Remotion 動畫程式碼，特色包括深色碳纖維網格背景、高對比霓虹強調色、HUD 角括號和彈簧物理過渡。

使用時機

• 使用者想要產生基於程式碼的動畫（HTML、React、Framer Motion、GSAP、Motion Canvas 或 Node.js Remotion），用於影片製作或技術簡報。
• 使用者提及科技解說風格（例如：矽谷101、Apple Keynote 深色模式、HUD 硬體分解）。
• 使用者需要晶片/硬體架構、流程時間軸、資料比較或多步驟工作流程的動態視覺化。

視覺與美學規範

在所有生成的程式碼中套用以下確切設計標記：

1. 背景與表面：

   • 基礎畫布：#0D0E11 至 #141518，帶有細微的 CSS 點陣或碳纖維網格（radial-gradient(#2A2D35 1px, transparent 1px) 搭配 background-size: 16px 16px）。
   • 卡片表面：rgba(255, 255, 255, 0.03) 搭配 backdrop-filter: blur(8px) 以及 1px solid rgba(255, 255, 255, 0.12)。

2. 色彩調色盤：

   • 主要強調色（作用中/高亮）：#FF5500（工業橘）帶有光暈 0 0 16px rgba(255, 85, 0, 0.35)。
   • 次要強調色（資料/運算）：#38BDF8（青色）。
   • 文字層級：主要 #F3F4F6，次要 #9CA3AF，靜音/非作用中 #4B5563。

3. 字體與 HUD 元素：

   • 標題與內文：Inter、HarmonyOS Sans SC 或 PingFang SC，關鍵要點使用粗體。
   • 數字、年份與規格：JetBrains Mono 或 Share Tech Mono（font-variant-numeric: tabular-nums）。
   • 裝飾性 HUD：在主要容器上添加 6px x 6px 的 L 形角括號（border-top + border-left 等），並在章節標題旁放置橘色垂直藥丸指示器（width: 4px; background: #FF5500）。

核心動畫原型

根據使用者的內容選擇合適的原型：

1. 滑動時間軸（[Timeline]）：

   • 水平虛線軌道（border-bottom: 2px dashed #374151）。
   • 作用中節點放大至 1.1x，帶有 #FF5500 邊框和發光節點圓點；歷史節點向左移動、縮放至 0.85x 並變暗至 opacity: 0.4。
   • 呼叫規格以垂直交錯方式進入（translateY(12px) 到 0，stagger: 120ms）。

2. 硬體/系統架構（[Architecture]）：

   • 分割畫面或巢狀 Bento 網格，顯示巨集觀模組（左）與微觀內部管線（右）。
   • 資料封包以發光 #FF5500 藥丸或 SVG stroke-dasharray 脈衝表示，在子模組之間移動（例如：任務 -> 核心 -> 共享快取）。
   • 包含即時更新的計數器或狀態徽章，以對比舊版與次世代效能。

3. 動態資料與指標卡片（[DataChart]）：

   • SVG 折線圖或長條圖，帶有 stroke-dashoffset 繪製動畫。
   • 預測區段以虛線 #FF5500 線條呈現。
   • 3 欄 Bento 摘要卡片，帶有編號標題（01、02、03）和動畫水平進度條，比較基線（#4B5563）與目標（#FF5500）。

執行步驟

1. 分析內容並選擇原型：

   • 將使用者的輸入分解為離散的場景或關鍵影格（步驟 1、步驟 2、步驟 3...）。
   • 將每個場景映射到 [Timeline]、[Architecture] 或 [DataChart]。

2. 選擇技術棧：

   • 預設（零配置預覽）：使用 Tailwind CSS (CDN)、GSAP 或 Anime.js (CDN) 以及原生 JS 狀態控制器，輸出單一自包含的 index.html。
   • 影片渲染（當要求 Node.js/Remotion 時）：使用 remotion（useCurrentFrame、spring、interpolate）或 framer-motion 輸出模組化的 React 元件。

3. 實作播放與錄製控制：

   • 始終包含右下角或鍵盤驅動的控制項（Space 播放/暫停，ArrowRight/ArrowLeft 步進關鍵影格，R 重播）。
   • 提供可切換的「乾淨畫布模式」（按下 H 隱藏 UI 控制項），讓使用者可以在 1920x1080 (16:9) 解析度下無干擾地錄製螢幕。

4. 強制執行運動物理：

   • 從不為 UI 移動使用線性過渡。使用 cubic-bezier(0.22, 1, 0.36, 1) 或彈簧物理（stiffness: 120, damping: 18）。
   • 將視覺狀態變化與清晰的步驟標籤同步，使動畫符合旁白節奏。

注意事項

• 避免雜亂：螢幕上最多同時保留 3 個資料維度。聚焦於特定子元件時，將非作用中模組調暗（opacity: 0.35）。
• 長寬比：將主要舞台容器鎖定為 16:9（aspect-ratio: 16/9、max-width: 1920px），並在視口中置中，確保佈局在影片擷取時不會跑版。
• 無外部圖片依賴：使用純 CSS 形狀、內聯 SVG 和字體，而不是可能載入失敗的外部圖片 URL。