地理地圖影片(TikTok,德語)
用戶是 TikTok 創作者。每部影片都完全在代碼中使用 HyperFrames 構建(先閱讀 hyperframes 技能:渲染合約、check、snapshot、render)。
語言:始終使用德語 - 腳本、旁白、字幕、標籤、回應用戶。
流程(用戶指定主題後無需追問)
- 每個容器一次:
bash ~/.claude/skills/geo-karten-video/scripts/setup.sh(瓦片、圖標、字體、本地 GSAP、邊界、Piper 語音。網路:僅 npm、PyPI 和 GitHub 開放。 Esri/NASA-GIBS/HuggingFace/jsdelivr 被封鎖,因此需要繞行。) - 專案:
bash scripts/projekt.sh <slug>->/home/user/videos/<slug> - 腳本(
skript.txt,每行一個節拍/句子)。長度:30 秒 ~ 65-70 字,60-75 秒 ~ 150-170 字。 數字需為語音拼寫,顯示使用{}:sechsundvierzig{46}。縮寫需拼寫(Lkw -> Laster)。 僅使用可靠的事實;估計值使用「約」/「大約」,思想實驗使用虛擬式。 - 旁白 + 單詞時間:
python3 scripts/voice.py skript.txt assets/audio --speed 1.05->voice.wav(48 kHz、-15 LUFS)+words.json。若用戶有自備錄音,則使用自備錄音 (單詞時間隨後透過npx hyperframes transcribe --model small --language de計算,若模型可及)。 - 地圖:
python3 scripts/map.py assets/map --bbox lon0,lon1,lat0,lat1 --laender DEU,... --staedte "柏林:13.40,52.52;..."(區域/聯邦州:--admin1 "巴伐利亞;薩克森-安哈爾特")。圖片邊長保持 <= 約 5000 像素。 - 圖標:
python3 scripts/icons.py --suche "oil"和python3 scripts/icons.py assets/icons name=HEX ... - 構建場景 - 模板:
templates/beispiel-keiner-arbeitet/(index.html、karte.html、skript.txt)。 字幕:python3 scripts/captions.py assets/audio/words.json compositions/untertitel.html --duration <s> npx hyperframes check --json->npx hyperframes snapshot --at ... -o snap(每次呼叫最多約 6 個時間點, 否則進程會被終止)-> 查看圖像 -> 修正。- 後台渲染:
npx hyperframes render -o renders/<slug>.mp4 -q delivery -w 2 --quiet(run_in_background)。之後使用 ffprobe 檢查,查看縮圖,將檔案發送給用戶。
視覺風格(從三個參考影片分析得出 - 完全按照此方式構建)
格式: 1080x1920,30 fps,30-75 秒。無片頭、無標誌,第 0 幀即為鉤子(國家著色 + 人物/圖標)。
地圖 = 舞台,連貫的鏡頭移動。 衛星圖像,海洋為深青色,陸地為自然綠色/米色。
幾乎無硬切:鏡頭在節拍之間縮放/平移(0.8 秒 power2.inOut),之間緩慢漂移。
鏡頭 = 一個 Wrapper #k-cam(transform-origin 0 0),目標透過 cam(px, py, scale) -> 地圖像素對應螢幕中心(540, 900)。
所有與地理位置相關的內容(圖標、標籤、國家)都位於地圖像素中的 CAM Wrapper 內。
大字數字和「TAG 1」標籤位於螢幕空間。
國家 作為 SVG 路徑:區域半透明(fill-opacity ~0.66,衛星紋理透出),
淺色邊框(~2.5 px),投影 drop-shadow(0 10px 10px rgba(0,0,0,.45))。顏色透過 GSAP 對 CSS fill
進行補間(非 attr,CSS 會覆蓋屬性)。每個國家固定顏色:
德國 #2f5bea(皇家藍)、土耳其/俄羅斯/伊朗 #e02424(紅色)、烏克蘭 #e5a82e(黃橙色)、
美國 #5aa9ff(淺藍色)、重點區域 #a8d82a(萊姆色)、政黨/區域高亮 #f2a41c(橙色)。
顏色變化具有敘事性(例如墜機時藍色 -> 灰色 -> 紅色)。
國名: 手寫字體 Kalam 700,白色,傾斜(-8 至 -14 度),大字,帶陰影,可被裁切。
人物/人: 去背 PNG(由用戶提供,因為無圖像生成功能)或 OpenMoji 人物,
始終帶 白色貼紙邊框 + 陰影(類別 .st:
drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(5px 9px 7px rgba(0,0,0,.45)))。
他們站在所屬國家上,彈入(back.out(2.2),0.45 秒)並縮小消失(0.22 秒 power3.in)。
圖標: 扁平風格,帶粗黑色輪廓(OpenMoji):加油機、油桶、金錢、爆炸、船隻、旗幟、投票箱…… 數量 = 多個小圖標分散在城市上,分組間隔 40-70 毫秒。
數字: Montserrat Black,白色,巨大(170-230 px),硬陰影,位於圖片上方(top ~240 px),
計數增加(1.0 秒 power2.out)。日期/天數標籤 96 px。
字幕: 每次顯示一個單詞,大寫,Montserrat Black ~68 px,白色帶深色陰影,
居中於 y ~1400(如同參考影片,下方三分之一處),每個單詞有微小彈出效果。由 captions.py 生成。
引用: 頭條/文件截圖作為斜向飛入的「便條」;偶爾使用 B-roll 照片(2-3 秒),然後返回地圖。
音效: 旁白是主導。音效(assets/sfx)節制使用:重要貼紙時使用 pop 音,鏡頭移動時使用 whoosh 音,
叉號/停止時使用 error 音,轉折點時使用 impact-bass 音。僅當用戶提供音檔時才使用音樂(此處無音樂存取權限)。
劇本結構
- 鉤子 0-3 秒:問題或突發新聞 + 立即顯示臉部/國家。
- 背景:具體數字/日期/來源。
- 逐步升級(第 1 天 / 第 3 天 / 第 7 天或事件 -> 反應 -> 後果),每 1-3 秒一個新元素。
- 轉折點/回報(數字反轉、國家變色、震動 + 重低音)。
- 結尾:拉遠鏡頭 + 向觀眾提問(評論)。無工作人員名單。
技術陷阱(經實測)
- GSAP 需本地引入(
assets/vendor/gsap.min.js),CDN 被封鎖。 - 帶有多個時間點的
snapshot會導致進程終止 -> 分批進行,每次約 6 個。 - 使用
-w 2渲染(大地圖圖片 + 濾鏡需要 RAM)。 - Piper 語音聽起來很合成(16 kHz)- 建議用戶提供自備錄音或 ElevenLabs 檔案;
然後替換
voice.wav並重新計算單詞時間。 - 圖片來源署名位於右上角小字:「圖片:NASA Blue Marble」。
- 容器是臨時的:完成的影片立即發送給用戶;技能/專案僅在推送到 Git 倉庫時才會持久保存。