Claude Motion 範本:37 種動態風格

每種風格背後的規格

Paper Editorial

適合:文章、解說影片、評論類內容。暖色紙張質感,搭配襯線標題與一抹鐵鏽色點綴。節奏從容,如同雜誌專題。

版面:左側留白寬,標題置於左上方,段落標籤上方有一條細線。長條為純色方塊。

動態:以淡入方式緩緩上升 28px,0.8 秒,power2.out。一次只有一個元素移動,沒有彈跳效果。

Blueprint

適合:架構、系統、技術導覽。深藍色格線搭配青色線稿。所有內容都以輪廓呈現,並像繪圖機一樣逐步劃出。

版面:背景有淡淡的 60px 格線。方框與長條只有輪廓,不填色。標籤為小型大寫等寬字體。

動態:由左至右擦除顯示(clip-path),0.9 秒,power1.inOut。標籤跟隨圖形出現。沒有淡入淡出或彈跳效果。

Kinetic Poster

適合:產品發表、宣傳影片、社群短片。黑色舞台,海報尺寸的窄體字,搭配一種強烈的螢光色。文字俐落有力地登場。

版面:大寫窄體標題以緊密行距填滿畫面。每個場景只傳達一個重點。

動態:硬切換:元素從 118% 的縮放比例瞬間彈入,0.32 秒,expo.out,每個間隔 0.07 秒。沒有任何飄移。

Quiet Keynote

適合:產品故事、投資人簡報更新。淺色舞台,留白充裕,白色卡片上呈現沉穩的數字。每個畫面只突顯一個數據。

版面:置中對齊。白色卡片帶有柔和陰影。每個場景不超過十二個字。

動態： 從 92% 柔和放大至 100% 並淡入，0.7s，power3.out。數字在 1.2s 內向上跳動累計。

Chalk Lesson

適用情境： 教學、教程、課程單元。綠色黑板搭配手寫標題與黃色螢光標示，步驟逐條寫出。

版面： 手寫標題，編號步驟靠左由上往下排列。關鍵詞加上黃色底線。

動態： 由左至右擦除，如同書寫，0.7s，power1.out，每行間隔 0.22s。

Ledger

適用情境： 報告、指標檢視、財務。白色頁面、等寬字體數字，並以單一綠色表示成長。專為讓圖表清晰易讀而設計。

版面： 每個標題下方有一條細線。數字使用等寬字體。無漸層、無陰影、無 3D。

動態： 快速上移 16px，0.45s，power2.out，間隔 0.08s。長條從基準線向上生長，標籤隨後出現。

Terminal

適用情境： 開發者工具、更新日誌、CLI 示範。炭灰色終端機視窗，使用等寬字體與綠色提示符號。文字逐行輸出，如同真實的輸出結果。

版面： 所有內容都在一個帶標題列的視窗內。標題以提示符號開頭。變更的那一行以強調色標示。

動態： 階梯式擦除，讀起來像打字：0.6s 內分 16 步，行間隔 0.2s。不使用緩動曲線。

Sunrise

適用情境： 品牌短片、公告、活動開場。珊瑚紅到紫羅蘭的漸層底色，搭配圓潤的白色字體。親切明亮，進場帶有彈跳感。

版面： 漸層鋪在滿版的子元素上。標籤為膠囊形。長條與步驟為半透明白色，圓角較大。

動態： 從 86% 縮放彈跳出現，0.55s，back.out(1.6)，間隔 0.09s。背景始終不動。

Glass

適用情境： 產品故事、高端產品發表。淺色舞台，空氣中帶有柔和色彩，搭配霧面白色面板。沉靜、有質感，留白充裕。

版面： 背景有兩塊模糊色域。面板為半透明白色，邊緣明亮，帶有深而柔和的陰影。

動態： 從 92% 緩慢柔和地放大並淡入，0.8s，power3.out。面板依序出現，不會同時出現。

Midnight

適用情境： 開發者產品、路線圖、更新日誌。近黑色畫布、極細邊框、緊湊的字體與單一薰衣草色光暈。精準而安靜。

版面： 內容後方有一團柔和光暈。每個面板都有 2px 極細邊框。標題緊湊，字級不大。

動態： 短距離上移 14px，0.5s，power3.out，以 0.07s 緊湊錯開。快速精準，沒有過衝。

Pixel

適用情境： 科技解說、輕鬆有趣的數據故事。暖奶油色搭配橘到黃的色塊與直角。所有元素分步出現，如同像素逐一亮起。

版面： 全部採用直角。長條為堆疊的暖色色塊。每個標題下方有一排小方塊。

動態： 階梯式擦除，0.5s 內分 8 步，間隔 0.14s。完全沒有平滑緩動：元素直接亮起。

Aubergine

適用情境： 團隊動態、內部溝通、新人培訓。深紫色搭配暖黃色與對話氣泡面板。親切、口語，如同同事傳來的訊息。

版面： 步驟為對話氣泡，其中一角為直角。標籤為膠囊形。句子要簡短、口語。

動態： 氣泡從 86% 彈出，帶有輕微過衝，0.5s，back.out(1.4)，間隔 0.16s，如同訊息陸續送達。

Graph Paper

適用情境： 技術文件、工程進度更新、效能基準測試。淺色技術格線、等寬字體，並以單一綠色標示關鍵結果。讀起來像一本嚴謹的實驗筆記。

版面： 背景有 48px 細格線。白色面板搭配 2px 邊框。標題適中，資料才是主角。

動態： 由左至右擦除，0.55s，power2.out，間隔 0.1s。線條是畫出來的，而不是淡入。

Pastel Shapes

適用情境： 工作坊、創意簡報、社群貼文。奶油色紙張、活潑的粉彩幾何圖形，圓形與方形混用。充滿協作感，帶點不拘格線的隨性。

版面： 每個長條與步驟依序取用下一個粉彩色。圓角與直角交替出現。

動態: 從 86% 彈出,0.5 秒,back.out(1.8),每個間隔 0.1 秒。圖形像是手工擺放的。

Signal

最適合: 公告、事件檢討、強烈聲明。深黑底色搭配斜劃的紅色色帶與粗體白字,急迫感十足,讓人無法略過。

版面: 一條斜向紅色色帶橫越背景。標題字距非常緊密。每個場景只有一個紅色元素,不會更多。

動態: 從 118% 縮放比例硬切進場,0.3 秒,expo.out,每個間隔 0.06 秒。每個場景都踩在節拍上開場。

Harbor

最適合: 財務、定價、業務檢討。淺色底面上使用深海軍藍文字,搭配一種沉穩的靛藍色。可靠又整齊,頂部帶有柔和漸層。

版面: 頂端邊緣有一條傾斜的色帶。白色面板帶有柔和陰影。數字大而且是海軍藍。

動態: 平均上升 22px,0.6 秒,power2.out,每個間隔 0.1 秒。穩定、可預期,沒有一絲俏皮。

Newsprint

最適合: 公告、公開報告、故事。米白色紙張、黑色襯線標題與一條紅色線。讀起來像報紙頭版。

版面: 每個標題上方有一條粗黑線,下方有一條細線。所有轉角都是直角。

動態: 從略微放大的狀態快速定位,0.45 秒,像是一頁紙被啪地拍下。沒有彈跳。

Botanical

最適合: 身心健康、永續、教育。奶油色紙張、鼠尾草綠,以及從容不迫的襯線字體。氣氛平靜,搭配水彩插圖。

版面: 寬邊距與圓角面板。每個標籤上方有一條小小的葉綠色線。

動態: 緩慢上升 20px 並長時間淡入,0.9 秒,每個間隔 0.16 秒。沒有任何東西匆忙出現。

Neon Night

最適合: 活動、音樂、遊戲、夜生活。午夜藍搭配洋紅色光芒。標題響亮、邊緣發光,專為昏暗的空間設計。

版面: 面板帶有細細的發光邊框。醒目的長條與數字以洋紅色發光。

動態: 從 86% 彈出並略微過衝,0.5 秒,每個間隔 0.09 秒。活潑但不晃動。

Clay

最適合: 新手引導、產品導覽、親切的說明影片。溫暖的米色搭配赤陶色與柔和的圓形造型。親切卻不幼稚。

版面: 非常圓的面板,下方帶有柔和陰影。數字徽章是圓形。

動態: 柔和彈出並略微過衝,0.6 秒,每個間隔 0.12 秒,像是把東西輕輕放下。

Riso Print

最適合: 獨立刊物、文化、設計評論。暖白紙張以藍色與螢光粉紅印刷。大型窄體標題,刻意帶一點粗獷感。

版面: 大寫窄體標題為藍色,搭配粉紅色重點標示。標籤是粉紅色塊。

動態: 從 118% 快速而有力地定位,0.4 秒。元素像蓋章一樣落下。

Boardroom

最適合: 策略、顧問、董事會資料。白色、海軍藍與一種皇家藍。結論先行的標題與整齊的面板,就像顧問排版的方式。

版面: 每個標題左側有一條藍線。面板為平面設計,帶有極細邊框。

動態: 短距離上升 16px,0.5 秒,每個間隔 0.08 秒。俐落平穩,絕不裝飾。

Ink Brush

最適合: 散文、哲學、品牌故事。宣紙、黑墨與一枚小小的紅色印章。刻意保留大量留白。

版面: 文字位於左側三分之二,四周留有空間。標籤是一枚紅色方形小印章。

動態: 從左側緩慢擦入,1 秒,每個間隔 0.2 秒,像毛筆一筆劃過。

Sticker

最適合: 兒童、教室、社群貼文、輕鬆的近況更新。陽光黃、粗黑外框與亮粉紅。每個面板看起來都像貼紙。

版面: 白色面板帶有粗黑外框與硬邊偏移陰影,像貼在筆記本上的貼紙。

動態: 彈跳感十足,動畫會明顯衝過頭再回彈,時長 0.45 秒,每個間隔 0.1 秒。刻意營造活潑的感覺。

Swiss

適合:設計評審、代理商簡報、產品原則。白、黑與一種鈷藍,配上嚴謹的網格。緊湊的無襯線標題,所有內容上方都有一條粗線。

版面:每個標籤上方都有一條黑色粗線。處處都是直角。每個場景只有一個藍色元素。

動態:從 112% 縮放比例硬切入場,0.34s,expo.out,間隔 0.06s。

Terracotta

適合:餐飲、手工藝、旅宿接待、品牌故事。淡沙色、燒陶土色與溫暖的襯線字體。從容又帶手作感,就像一份讓人想珍藏的菜單。

版面:寬裕的邊距與圓角面板。標籤位於一條陶土色短線下方。

動態:輕柔上浮 24px,0.8s,power2.out,間隔 0.15s。

Arctic

適合:研究摘要、氣候與科學簡報。淡冰藍色搭配深海軍藍字體與一個冷色調點綴。清晰、沉靜、精確。

版面:每個標籤左側有一條細的強調線。面板圓角很小,沒有陰影。

動態:由左至右的擦除轉場,0.6s,power2.out,間隔 0.12s。

Ember

適合:產品發表、產品預告、大膽的宣布。暖調近黑底色搭配發光的橙色點綴與圓潤的粗體字。有種好戲即將開始的感覺。

版面:標籤是橙色膠囊形。面板為圓角,顏色比背景稍亮。

動態:從 88% 縮放比例彈跳出現,0.5s,back.out(1.5),間隔 0.09s。

Lagoon

適合:旅遊、身心健康應用程式、親切的數據故事。深青綠色水面搭配淡色字體與陽光黃點綴。輕鬆、圓潤、容易跟上。

版面:圓角面板比水面色稍亮一點。標籤只是一個黃色小字,沒有其他裝飾。

動態:平順上浮 30px,0.7s,power3.out,間隔 0.12s。

藝廊

適合:博物館、作品集、文化活動。博物館白、黑色襯線字體與青銅色點綴。非常安靜,每件物件周圍都留有空間。

版面:寬大的邊距。標籤是青銅色的小型大寫字母。幾乎沒有方框,靠線條與留白來呈現。

動態： 緩慢上移 14px，搭配較長的淡出，1.0s，間隔 0.2s。

Candy

適用於： 消費品牌、社群動態、活潑的促銷活動。淡粉紅底色，搭配深梅紫文字與亮洋紅點綴色。甜美、圓潤、輕快。

版面： 標籤為洋紅色膠囊形。整體非常圓潤。每個場景只有一個洋紅色形狀。

動態： 從 85% 縮放比例彈跳出現，0.5s，back.out(1.7)，間隔 0.08s。

Memo

適用於： 內部公告、工程筆記、狀態報告。深石板灰底色，標題使用等寬字型，搭配淺藍點綴色。讀起來像一份整理得宜的內部筆記。

版面： 標籤開頭加兩個斜線，像程式碼註解。圓角小、邊框細，沒有陰影。

動態： 逐步打字呈現，0.5s，間隔 0.14s。

Orchard

適用於： 農業、食品報導、季節性活動。淡葉綠底色，搭配深色文字與蘋果紅點綴色。帶有季節感，略顯鄉村質樸。

版面： 每個標籤前有一個紅點。圓角面板使用較深的綠色淡染底。

動態： 平穩上移 22px，0.7s，power2.out，間隔 0.13s。

Noir

適用於： 電影、活動、高端產品發表。純黑底色，搭配高窄的大寫字母與一道金線。電影感十足，簡潔克制。

版面： 標題使用高窄大寫字母。每個標籤下方有一道細金線。能用線條處理的地方就不用面板。

動態： 緩慢的硬切，從 108% 縮放開始，0.4s，expo.out，間隔 0.1s。

Seaside

適用於： 家庭活動、在地導覽、假期資訊。淡沙色底色，搭配海軍藍手寫字與珊瑚色點綴。像假期素描本中的一頁。

版面： 標題為手寫字，並以珊瑚色底線標示。線條略微抖動，像用筆畫出來的。

動態： 手繪擦除轉場，0.7s，power1.out，間隔 0.2s。

丹寧

適用於： 團隊動態、人資與營運簡報。丹寧藍底色，搭配白色文字與琥珀色點綴。可靠又親切，適合需要大家採取行動的消息。

版面： 琥珀色標籤，下方有一道短線。面板為較淺的藍色，圓角中等。

動態： 快速上移 20px，0.55s，power2.out，間隔 0.1s。

薄荷

適用於： 金融科技、產品指標、簡潔的更新日誌。淡薄荷色底色，搭配深綠文字、等寬字型標題與一種深綠點綴色。清新、精準。

版面： 標籤外框為細綠線。數字使用等寬字型，讓各欄對齊。

動態： 平穩擦除轉場，0.6s，power2.inOut，間隔 0.12s。