/animation — 100 種即用型動畫風格
作者：Ty — BTHA System (bthasystem.io)。
讀取參數
接受的格式：
/animation glitch→ 風格glitch，使用預設文字。/animation glitch "我要動畫的文字"→ 風格 + 要動畫化的文字（傳遞給textprop）。/animation glitch 16:9或... web→ 指定格式或目標。- 僅
/animation或/animation liste→ 顯示下方目錄，按系列分組，並要求選擇一個風格。
第一個詞是 slug。每個 slug 都有其文件：references/<slug>.md（在此技能的資料夾中）。在編寫程式碼前，務必閱讀該文件：它包含技術細節、確切數值和一個 Remotion 起點元件。
未知的 Slug
如果 slug 不存在：不要默默猜測。而是提議 3 個最接近的風格（根據名稱、系列或描述的效果），附上一行描述，並詢問要使用哪一個。範例：「vhs」→ glitch、risograph、light-leak；「3d text」→ extruded-text、liquid-chrome、kinetic-type；「matrix」→ ascii、scramble、code-typing。
預設技術棧
- 影片（預設）：Remotion (React + TypeScript)，1080×1920，30 i/s（適用於 TikTok、Reels、Shorts）。預設時長：5 秒（150 影格），除非另有要求。
- Web：如果使用者想要一個網站用的動畫，則將該文件轉換為 HTML/CSS/JS（CSS keyframes、
requestAnimationFrame、canvas 或 SVG）。「位置 = 時間的函數」的邏輯保持不變。 - 其他格式：1080×1080（正方形）、1920×1080（YouTube）。在 9:16 比例中尊重安全區域：側邊約 140 像素邊距，底部 25% 區域內不要放置重要內容（TikTok 介面）。
必須遵守的 Remotion 規則：
- 一切依賴
useCurrentFrame()：不累積任何狀態在影格之間（影格是亂序且並行渲染的）。 - 僅透過
remotion的random('種子')產生隨機值，絕不使用Math.random()。 - 媒體檔案透過
staticFile()、<Img>、<OffthreadVideo>、<Audio>使用，以確保渲染等待載入完成。 - 字型：使用
@remotion/google-fonts/<字型>以保證渲染。
工作流程
- 識別 slug（或提議 3 個接近的風格）。
- 閱讀
references/<slug>.md。 - 如有需要進行釐清（僅一個整合問題，僅當未知且重要時）：格式（預設 9:16）、時長、文字、品牌顏色、現有或新的 Remotion 專案。
- 建置：
- 現有專案：新增
src/<Style>.tsx並在Root.tsx中使用<Composition id=... durationInFrames fps={30} width={1080} height={1920} />註冊。 - 新專案：
npx create-video@latest（使用空白模板），然後進行相同步驟。 - 從文件的程式碼片段開始，根據文字/顏色進行調整，安裝文件中指示的依賴項。
- 現有專案：新增
- 驗證：在 2-3 個關鍵影格上執行
npx remotion still <id> --frame=<n> out.png，查看圖片，進行修正。 - 渲染：執行
npx remotion render <id> out/<id>.mp4（加入--crf=18以獲得更好品質，如果 3D 渲染為黑色則加入--gl=angle）。 - 交付：檔案路徑、時長，以及文件中提到的 2-3 種可能變化。
一次要求多個風格（/animation glitch + synthwave）：閱讀所有文件，將它們合併（例如，synthwave 背景 + glitch 標題）成一個元件。
目錄（100 種風格）
🔤 動態文字與文字效果
kinetic-type— 動態文字（標題）：與語音同步的強勁文字，斷奏式縮放，逐詞顯示split-flap— 翻頁顯示：火車站面板：字母翻轉後固定glitch— 故障與復古 VHS：失真、掃描線、類比噪點、色差hud— HUD 與科幻終端：未來風格的等寬介面，快速計數器，瞄準線ascii— ASCII 藝術動畫：由即時變化的字元組成的圖像scramble— 亂碼 / 文字揭示：隨機字母，像解密一樣，然後出現真實單詞stacking— 動態堆疊：單詞以狂熱的速度堆疊typewriter— 打字機：逐字打出的打字機效果，遊標閃爍karaoke— 卡拉 OK 字幕：TikTok 風格字幕，正在說的單詞會亮起handwriting— 手寫 / 簽名：文字以手繪方式出現（SVG 路徑）text-path— 路徑文字：文字沿著曲線、圓形、螺旋線移動variable-font— 可變字體變形：字母變粗、拉伸、呼吸highlighter— 螢光筆劃過：在單詞下繪製螢光標記或底線rotating-words— 旋轉詞彙：在固定句子中循環變化的單詞mask-reveal— 遮罩揭示：文字透過形狀或圖像揭示
🎨 有機、流暢與抽象運動
liquid-morph— 液體變形：形狀互相轉變particles— 粒子系統：數千個受風和重力影響的點neon— 霓虹發光 / 賽博龐克：帶有光暈和拖尾的發光線條topographic— 波紋與地形：循環的等高線或數學波浪aurora— 極光與漸層網格：像極光一樣移動的模糊漸層metaballs— 黏性球體：像黏性物質一樣融合的圓形bioluminescence— 生物發光：深海風格的柔和光脈動flow-field— 流場（Perlin 噪聲）：數千條線條沿著流場跟隨ink-water— 流體 / 墨水在水中：墨水在水中擴散fractal-zoom— 碎形縮放：在碎形中無限縮放voronoi— 泰森多邊形：分裂並移動的有機細胞reaction-diffusion— 反應-擴散：像斑馬皮膚或珊瑚一樣的活體圖案smoke-fire— 煙霧與火焰著色器：即時產生的煙霧或火焰grain-gradient— 顆粒與噪點漸層：像現代海報一樣的顆粒狀漸層
🧊 3D 風格、浮雕與材質
clay-3d— 黏土 3D：具有物理效果和彈性的橡皮泥物體glassmorphism— 玻璃形態：模糊背景的磨砂玻璃面板wireframe— 等距與線框 3D：等距透視或金屬絲結構neumorphism— 新形態：透過陰影效果嵌入背景的形狀low-poly— 低多邊形：捕捉光線的多面 3Dskeuomorphism— 擬物化：真實按鈕、開關、皮革或金屬紋理liquid-chrome— 抽象鉻 / 液態金屬：反射性的水銀或液態金屬product-spin— 3D 產品旋轉：自行旋轉的 3D 物體（產品展示照）extruded-text— 3D 擠出文字：具有光影效果的立體文字card-flip— 3D 卡片翻轉：以透視方式翻轉的卡片cube-transition— 立方體 / 盒子轉場：透過立方體旋轉進行轉場globe— 3D 地球：帶有發光點的旋轉地球galaxy— 3D 星系粒子：深度空間中的粒子星系holo-foil— 全息箔：像全息卡片一樣的彩虹色反射voxel— 立體像素藝術：像 Minecraft 一樣的小立方體 3D
📐 藝術、圖形與歷史美學
swiss— 瑞士設計：不對稱網格、大型無襯線字體、幾何轉場risograph— 油印與網點：顆粒狀復古印刷、偏移圖層、12 i/spaper-cutout— 紙剪影：帶有陰影的剪紙、停格動畫neobrutalism— 新粗獷主義：粗黑邊框、硬陰影、鮮豔色彩bauhaus— 包浩斯：圓形、方形、三角形、原色memphis— 孟菲斯風格：鋸齒線、五彩紙屑、棋盤格、80 年代粉彩synthwave— 合成波 / 蒸氣波：通往夕陽的無限霓虹網格pixel-art— 像素藝術 / 8 位元：無平滑處理的復古遊戲comic— 漫畫書 / 賽璐璐風格：漫畫、黑色邊框、普普藝術網點blueprint— 藍圖：在藍色背景上繪製的建築平面圖frutiger-aero— Frutiger Aero：泡泡、藍綠色玻璃、2000 年代corporate-memphis— 企業孟菲斯：四肢拉伸的扁平人物psychedelic— 迷幻復古：70 年代、波紋、飽和色彩line-boil— 線條顫抖：像卡通動畫一樣顫抖的輪廓y2k— Y2K / 鉻合金泡泡：2000 年代、鉻、星星、泡泡manga-speed-lines— 漫畫速度線：漫畫風格的速度線和擬聲詞watercolor— 水彩：擴散的水彩污漬chalkboard— 黑板 / 素描：繪製的粉筆或鉛筆畫art-deco— 裝飾藝術：20 年代幾何金色線條duotone— 雙色調：兩種對比色的圖像
📊 儀表板、資料與 UI 介面
data-story— 資料敘事：上升的長條圖、繪製的曲線bento— Bento 網格：移動的不對稱盒子網格odometer— 計數器 / 里程表：滾動到目標值的計數器micro-interactions— UI 微互動：按鈕、轉換的圖示、漣漪效果marquee— 無限捲動 / 跑馬燈：無限捲動的橫幅parallax— 視差滾動：不同速度的圖層skeleton— 骨架載入：內容載入前脈動的形狀bar-race— 長條圖競賽：隨時間變化的排名長條圖progress-rings— 進度環：像 Apple Watch 一樣填滿的環圈map-route— 地圖路線追蹤：在地圖上繪製的路線（跑步！）timeline— 時間軸：前進的時間線chat— 聊天 / iMessage 模擬：出現的對話泡泡notifications— 通知堆疊：落下並堆疊的通知phone-scroll— 手機 Mockup 滾動：在手機內滾動的應用程式畫面code-typing— 程式碼打字 / IDE：在編輯器中編寫的程式碼cursor-demo— 遊標示範：在介面中點擊和導航的遊標before-after— 前後對比滑桿：帶有滑桿的前後比較
🎬 轉場與鏡頭運動
whip-pan— 甩鏡：帶有動態模糊的超快速全景zoom-punch— 衝擊縮放：在重點時刻的猛烈縮放camera-shake— 鏡頭晃動：衝擊震動shape-wipe— 形狀擦除：形狀掃過畫面的轉場iris— 愛麗絲 / 圓形揭示：圓形打開或關閉ink-transition— 墨水 / 顏料轉場：墨水污漬淹沒畫面light-leak— 漏光與鏡頭光暈：膠片風格的漏光ken-burns— Ken Burns 效果：照片上的緩慢縮放split-screen— 分割畫面：打開的分割畫面speed-ramp— 速度斜坡：慢動作然後加速page-curl— 頁面捲曲：翻頁效果match-cut— 匹配剪輯 / 變形剪輯：兩個形狀之間的完美匹配
🧸 角色與趣味效果
lip-sync— 嘴型同步頭像：嘴巴跟隨語音移動的頭像puppet-rig— 木偶骨架：有關節的角色（手臂、頭部、眨眼）confetti— 五彩紙屑 / Emoji 雨：五彩紙屑或表情符號雨sticker-pop— 貼紙彈出：帶有反彈效果突然出現的貼紙squash-stretch— 擠壓與拉伸：卡通風格的彈性物體morph-icons— 變形圖示：一個圖示轉變成另一個fireworks— 煙火 / 爆發：節日粒子爆炸