片長 90 秒、1920×1080、30fps、無旁白、字幕燒在畫面裡、全程示意圖不露產品介面。 主張:法規越來越多,合規不能再靠人力堆。 路線:壓力 → 秩序。 主軸是「平台把工作接過去」:拆解派工、檢測、延續、報告。AI 只在操作紀錄裡出現一次,當輔助。
| 秒數 | 段落 | 觀眾該有的感覺 |
|---|---|---|
| 0–14 | 法規接連而來 | 「怎麼這麼多」 |
| 14–26 | 人力在堆 | 「這就是我們公司的樣子」,壓力到頂 |
| 26–37 | 翻轉 | 鬆一口氣。品牌此時才出場 |
| 37–73 | 改變(四拍) | 每 9 秒一個「原來可以這樣」 |
| 73–82 | 信任 | 「交給它不會出事」 |
| 82–90 | 收尾 | 記住一句話 |
| 秒 | 畫面 | 字幕 |
|---|---|---|
| 0 | 第一格就有畫面:雷達圈與掃描扇面、地面透視格線(第一格是社群播放器的縮圖) | — |
| 0.8–4.4 | 雷達掃描旋轉,法規名稱逐字從模糊浮出,每個名稱出現時打一圈回波 | 公司越做越大,是好事。 |
| 4.9–9.0 | 出現間隔從 1.4 秒縮到 0.15 秒,16 個名稱擠滿畫面,部分是琥珀色(EU CRA、NIS2、DORA⋯) | 只是每個大客戶,都帶著自己的資安標準來。 |
| 9.9–14.4 | 名稱壓暗模糊;三個滾輪數字一直滾不停、帶殘影(不指定哪一套的幾條,只講數不完);下方逐字浮出「條,還在增加」 | 每一套幾百條要求,每一條都要拿得出證據。 |
不點名任何一套框架的條數:客戶不一定導 CMMC,數字滾不停才對每一種客戶都成立。
| 秒 | 畫面 | 字幕 |
|---|---|---|
| 14.4–18.4 | 24 張文件帶著 3D 翻轉從四面八方砸進中央,越來越快、越疊越歪 | 證據呢?散在同事的電腦、信箱和記憶裡。 |
| 18.6–22.6 | 檔名膠囊散落四周(密碼政策_final_final.docx、IMG_2291.HEIC⋯);右上角「距離稽核 92 天」數字帶往上捲;畫面染暖、地面格線變暗 |
於是每年稽核前,整個公司都在找東西。 |
| 22.9–25.8 | 倒數捲到 3 天,整疊文件震動 | 過了。明年,再來一次。 |
| 秒 | 畫面 | 字幕 |
|---|---|---|
| 26.3–27 | 檔名與倒數壓灰 | — |
| 27–29.6 | 全畫面閃一下,一道帶殘光的豎光從左掃到右;被掃到的文件依序翻轉 360 度、歸位成 6×4 格子並亮藍框;畫面轉冷色、地面格線亮起 | — |
| 29.7–33.9 | 整齊格子靜止 | 我們決定,把這件事一次做對。 |
| 33.4–35.5 | 格子從中心往外退暗;「Guidant AI」逐字浮出(照系統:Guidant 白、AI 藍綠漸層、無圖示無副標),橫向光條掃過、全畫面閃光 | — |
| 35.6–37 | 品牌縮到左上角,陪到 82 秒 | — |
| 拍 | 秒 | 畫面 | 字幕 |
|---|---|---|---|
| 拆解派工 | 37–46 | 一片小方塊從中心往外炸開成格子;五個部門欄(資訊部、管理部、人資、法務、研發)浮出,方塊依部門變色飛進各欄;每欄下方出現到期日 | 我們把每一條要求,變成有人負責、有期限的任務。/你的團隊,第一天就知道該做什麼。 |
| 檢測 | 46–55 | 中央六角形「Agent」、外圈掃描環旋轉;連線長出、光點沿線打到 8 台主機、主機依序亮起;四張報告從主機飛進下方「證據」框 | 弱點掃描,由 Agent 在你的環境裡自己跑完。/跑完的那一刻,證據已經在對的位置上。 |
| 延續 | 55–64 | 2025、2026、2027 三張帶 3D 角度的卡;光束把去年的列帶到今年,只有變動的列亮琥珀色 | 去年累積的一切,今年完整帶著走。/你只需要處理,真正變了的地方。 |
| 報告 | 64–73 | 文件外框、六個章節由左滑入,一道掃描光由上往下掃過,蓋上「定稿」印並閃光 | 稽核結束那天,結案報告已經在等你。/不是草稿,是可以直接交出去的版本。 |
| 秒 | 畫面 | 字幕 |
|---|---|---|
| 73.4–77.4 | 發光圍籬框住三座機櫃,資料光點只在圍籬內移動;上方鎖頭扣上、發光 | 全部裝在你自己的機房,資料從不需要離開。 |
| 77.7–81.8 | 圍籬整組上移縮小,下方五行操作紀錄逐字打出:王小姐上傳證據、AI 建議歸類並由王小姐確認、Agent 完成掃描、林經理核准、外部稽核判定符合 | 誰看過、誰改過、什麼時候,每一步都記得。 |
| 秒 | 畫面 | 字幕 |
|---|---|---|
| 82.2–83.6 | 左上角品牌回到中央放大,光條再掃一次 | — |
| 86.3–89 | 標誌下方逐字浮出一句;87.2 秒下方小字淡入公司署名「BILLOWS TECHNOLOGY」 | 從應付稽核,到隨時審核。 |
| 88.6–90 | 淡出至黑 | — |
Pixabay 的 Ambient Technology(AlexGrohl,2:29,Pixabay Content License 可商用免標註,Content ID 已登記)。曲子 0~16 秒鋪底、16.5 秒加一層、32.5 秒鼓點全進,120 BPM。從曲子第 5.5 秒開始取,讓 32.5 秒的大跳升落在影片 27 秒那道光掃過的瞬間、16.5 秒那層落在滾輪數字出現時。頭 2 秒淡入、尾 3.5 秒淡出,整體 -15 LUFS、峰值 -1.5 dB、48kHz。
上傳 YouTube 可能被 Content ID 標記,要照 Pixabay 說明申請解除;發表會播放與寄送 mp4 不受影響。
產品經理站在台上對股東與客戶講話:對著「你」說、先承認客戶的處境是真的(「公司越做越大,是好事」),翻轉時「我們」站出來一次(「我們決定,把這件事一次做對」),中段每一拍都是「我們做了什麼,所以你得到什麼」,講結果不講功能名。專業感來自講得出具體結果(「不是草稿,是可以直接交出去的版本」),不靠術語堆疊;不用對仗、不用四字口號、不用「守護」「永遠」這類宣示字眼。結尾「從應付稽核,到隨時審核」一句講完轉變:前半是第二段的處境,後半是產品帶來的狀態。
#070b10 深藍黑、主色 #4fc3f7(產品既有主色)、輔色 #7fdccd、壓力段用琥珀 #e8a95c 與暖色罩。不用紅色,避免像警報。品牌字照系統頂欄與登入頁:Guidant 白、AI 用 #4fc3f7 → #81c784 漸層,不放盾牌圖示(那只是瀏覽器 favicon)。@font-face local() 宣告);檔名與紀錄用等寬字。v2/ 是 HyperFrames 專案(HTML+CSS+GSAP 時間軸)。index.html 放全片底層、場景容器、品牌、字幕;js/ 下每個場景一支腳本往同一條時間軸加動畫。prototype/ 是最早的手寫時間軸雛形,畫面與文案以 v2/ 為準。
| 動作 | 指令(在 v2/ 下) |
|---|---|
| 檢查(排版、對比、文字停留) | npm run check |
| 抽幾個時刻截圖 | npx hyperframes snapshot --at 6,31,48,86 |
| 輸出無聲成片 | npm run render -- --output ../render/GuidantAI-brand-v2-silent.mp4 --fps 30 --quality high |
| 合配樂 | zsh mix-music.sh <音樂檔> 5.5(音樂檔不入版控,從 Pixabay 下載) |
寫動畫的陷阱:不能用 Math.random()/Date.now()(逐格輸出會每格不同),亂數一律用 js/lib.js 的 H.rnd();3D 翻轉要把 perspective 掛在被翻元素的直接父層。