2D 動畫

將 pelican 騎自行車的畫面繪製成一條穿過 16,384 個點的單一連續線。使用 Lloyd relaxation 放置這些點，透過旅行推銷員問題（TSP）路徑將它們連接起來，並使用 2-opt 演算法消除交叉直至完全解開。接著將同一條線提升為 3D 模型並製作踩踏動畫。所有影格皆以 JavaScript 在 2D canvas 上繪製，音樂則透過程式碼合成。

創作一部手繪風格動畫。具體而言，生成一部動態水彩繪本或一幅中國古代水墨長卷畫（如《清明上河圖》）。重點在於藝術風格與流暢的動畫轉場效果。

根據 @seti_park 素描本中的草圖，重現一幅蠟筆風格的火箭插畫。利用 Three.js 製作動畫，讓火箭膨脹成玩具、衝破紙張邊框，並重新鑽回頁面之中。在實作流暢 3D 轉場的同時，保留手繪質感的美學風格。

<direction> 構建一個 30 秒循環播放的動態設計展示 reel，介紹一位名為 CLAUDE 的動態設計師。 概念一句話概括：一條鉛筆線經歷三次升級（紙上的石墨、藍圖上的線條、黑底上的光線），且從未離開螢幕。 每個鏡頭都由前一個鏡頭演變而來：形狀、文字和顏色無縫過渡到下一個場景。無剪輯，無淡入淡出。 字體：僅使用 Geist。大詞使用字重 900，小標籤使用字重 600 至 800（字號 24 至 28 px，字距追蹤 0.14 至 0.3 em）。 調色板：紙張奶油色 #EDE6D5，藍圖藍色 #1B3ED2，全息青色 #45F0DD，以及黑色 #07080A，石墨灰 #16161A 和白色。每個階段的強調色是下一階段的主体色：紙上是藍色鉛筆，藍圖中是青色，全息圖上是白色。 攝影機：整個影片保持鎖定正面視角，如同繪圖桌。物體旋轉；攝影機不移動。 空白邊框：距離左右兩側 150 px 或上下邊緣 90 px 範圍內不得有靜止元素。運動中的元素可以穿過該區域。 三種墨水。相同的幾何圖形根據螢幕上顯示的墨水進行繪製： - 紙張：奶油色紙張背景（如果提供則使用我的紙張圖像，否則使用帶有細膩手繪紋理的平塗奶油色），帶有約 13% 透明度的 60 px 藍色網格，每第五條線透明度為 26%。線條為鉛筆風格：通過每秒相位變化 8 次的慢速正弦波重新採樣並偏離真實位置，雙重描邊（全寬 90%，半寬 40% 且抖動更多），去除紙張顆粒感後疊加在紙上。填充為逐行繪製的對角線排線。大字為裁剪成字母形狀的排線，並帶有雙輪廓。 - 藍圖：平塗藍色，白色相同網格。清晰的白色線條 3 至 4 px，隱藏邊緣為虛線且更細，填充為精細乾淨的排線。 - 全息圖：黑色，青色相同網格。青色線條帶有佔線寬 30% 的白色核心。填充為 8 px 間距的水平掃描線，其厚度取決於表面光照程度。任何地方都沒有模糊光暈：它僅通過線條密度表現光線。 禁止項：粒子爆發、發光、鏡頭光暈、攝影機抖動、RGB 分離、交叉淡化、通用漸層、彈性緩動、超過半秒的停頓，以及任何看起來像模板的內容。 </direction> <structure> 120 BPM，60 拍，15 小節，每小節 2 秒。每一拍都有動作發生。動作在其節拍前 0.05 秒開始，以便精準落在節拍上。 緩動：臨界阻尼彈簧，公式為 1 - (1 + w t) e^(-w t)，其中 w 介於 12 和 40 之間，確保沒有東西越過目標；擦除、按壓和退出使用指數緩入和緩出。 場景轉換：紙張轉藍圖通過一個以硬邊緣填滿畫面的形狀實現；藍圖轉全息圖及全息圖轉紙張通過一條水平掃描線實現。 最後一幀是第一幀，因此形成循環。 兩個角落標籤貫穿整部影片：左上角 "FIG. 07 — GEAR"（小節編號和名稱），右下角 "BEAT 27 / 60"。小節名稱：DRAFT, TYPE, CURVE, MORPH, TILE, SOLID, GEAR, PANEL, DATA, LIGHT, WAVE, GLOBE, DRUM, FORM, END。 </structure> <mascot> 創意總監：一個小盒子角色。身體 76 x 54 單位，圓角，中間高度有兩個短手臂樁（24 x 16），四條直腿（11 x 33），兩個高圓角矩形眼睛（8 x 14）。繪製寬度約為 250 px。右臂抬起 58 度，手持鉛筆。 在紙上：石墨輪廓，稀疏藍色排線和石墨眼睛。在全息圖中：青色輪廓，掃描線填充和白色眼睛。它永遠不會是第四種顏色。 它以交替抬腿的方式奔跑，每秒六步，奔跑時傾斜 7 度。 </mascot> <storyboard> 第 1 小節，HOOK，0-2 秒，紙張。 第 0 幀：Geist 900 字重的 CLAUDE，適配寬度 1500 px，居中，鉛筆排線樣式。上方小字 INTRODUCING，下方小字 A MOTION DESIGNER。一支 1620 px 寬的鉛筆導軌位於字母上方 96 px 處。吉祥物站在導軌上 x = 1560 處，左側標有 CREATIVE DIRECTOR。 0.0：小字消失；吉祥物加速跑出右邊緣。 0.36 到 0.5：導軌加速下落，直到基線下方 26 px 處，並將字母壓平嵌入自身。 1.0：線條上升到中間，縮短至 1320 px 並分裂成兩條相距 140 px 的導軌；41 個藍色刻度沿頂部導軌掃過。 1.5：導軌張開至 300 px；右側繪製藍色高度尺寸標註，帶有即時數字。 第 2 小節，KINETIC TYPE，2-4 秒，紙張。單詞位於導軌之間並被裁剪到該槽位；導軌移動以適應每個單詞。 2.0：INTRODUCING 逐個字母穿過基線升起，然後從頂部移出。 2.5：A MOTION 從左側快速滑入（0.2 秒內移動 1400 px）。 3.0：導軌合攏將其夾住並重新打開，將 DESIGNER 從線條中拉伸出來；隨後其字母向側面飛出。 3.5：藍色鉛筆風格的 CLAUDE，字母從上方逐個落下，間隔 0.05 秒。在 4.0 時，導軌合攏並將其擠壓成一條長 1476 px 的線條。 第 3 小節，CURVES，4-6 秒，紙張。 4.1：線條獲得鋼筆工具手柄（長 430 px，角度 58 度，末端有小方塊，手柄尖端有圓圈，標籤 EASE）並彎曲成 S 形。 4.5：手柄擺動到鏡像角度；八個藍色副本以 34 px 間距扇形展開，兩端連接如葉片。 5.0：手柄收回；帶狀物變為行進的正弦波（振幅 92 px，2.75 個週期，每條線略有相位差）。 5.5：它重新聚集回一條平直線條。 第 4 小節，SHAPE MORPH，6-8 秒，紙張。 6.1：線條捲曲成半徑 235 的圓形（曲率增加，長度保持不變）。6.5：三角形，變化時旋轉 120 度。7.0：正方形。7.5：六邊形，頂點向上，半徑 270。內部構建藍色排線，然後是交叉排線。 第 5 小節，TILING，8-10 秒，紙張。 8.0：六邊形縮小至半徑 96，周圍滑出另外六個。8.5：再添加十二個，形成一個由 19 個單元組成的蜂巢。9.0：密集排線掃過，直到每個單元都變成實心藍色。9.6 到 10.0：中心單元的形狀以硬邊緣生長超出畫面；內部是藍圖，蜂巢以白色線條呈現。 第 6 小節，2D TO 3D，10-12 秒，藍圖。 10.0：在每個六邊形內部繪製三條線，加上三條虛線隱藏線：每個都是角視圖下的立方體。 10.5：十八個外部立方體滑入中心的一個，使其生長至半徑 270。11.0：它轉動四分之一圈，透視開啟。11.5：它面向前方。 第 7 小節，MECHANISM，12-14 秒，藍圖。 12.0：立方體扁平化，其前方面長出齒：一個 16 齒齒輪，節圓半徑 208。從 12.25 開始，齒輪系在每個八分音符上步进 45 度。12.5：一個 10 齒齒輪向右上方生長並嚙合。13.0：一個 12 齒齒輪向左上方生長。每個都有虛線節圓、輪轂和標籤（16T, 10T, 12T）。13.5：小齒輪收回；齒輪變回正方形，立方體恢復深度。 第 8 小節，UNFOLD，14-16 秒，藍圖。 14.0：立方體沿鉸鏈展開成六個正方形的十字形。14.5：正方形滑動並拉伸成六個面板：標題條、高側邊欄、寬圖表、兩個瓦片、時間軸條。 15.0：它們被填充內容。標題："CLAUDE — MOTION REEL"，一個 BARS / RING 開關，一個 LIGHT 切換按鈕。圖表：30 個柱狀圖，對應影片的每一秒，高度為 42 30 36 44 50 46 52 62 50 56 62 72 60 66 58 76 56 62 68 74 70 78 86 94 100 93 97 90 80 50。時間軸：15 個小節名稱，每個上面有一個關鍵帧菱形。 15.5：計數器滾動上升：120 BPM, 60 BEATS, 1800 FRAMES, 0 CUTS。 第 9 小節，DATA，16-18 秒，藍圖。 16.0：一條曲線橫跨柱狀圖頂部繪製；青色播放頭落在時間軸的當前時間上。當前秒的柱狀圖為實心青色，較早的為排線，較晚的為輪廓線。光標到達。 16.5：它點擊 RING：圖表的基線彎曲成一個半徑為 110 的圓，ba

規則： - 具備預算達 5 億日圓等級的劇場版動畫品質，採用新復古（Neo-Retro）扁平化日本 2D 動畫風格。鮮明的青藍色輪廓線，柔和的粉彩配色 - 單鏡頭拍攝（無剪接）。攝影機固定不動直至結尾。請勿使用魚眼鏡頭 - 高張數繪製。快節奏，帶有喜劇感 - 無背景音樂（BGM），但存在音效 - 無字幕，螢幕上無文字 {{img 1}}: 主體 - Maka {{img 2}}: 主體 - Roni [一致性] 在整個影片中，請勿改變 Maka-chan 的臉部、粉紅色皮膚、短款粉紅色鮑伯頭、兩側的大型奶油色圓形耳狀頭飾、大藍眼睛、白色圓形耳環、紅色頸圈、黃色泡泡袖上衣、紅色腰帶以及白色裙子。請勿改變 Roni-kun 的臉部、粉紅色皮膚、捲曲的粉紅色頭髮、兩側的大型奶油色圓形耳狀頭飾、藍眼睛、薄荷綠西裝外套、紫黃格紋襯衫以及白色褲子。僅出現 Maka-chan 和 Roni-kun。每次只取出一件物品。請勿重複生成物品或 Roni-kun。 [FRAME-BREAK] 主要視覺目標：呈現明確無誤的「跳出邊框」（OUT-OF-FRAME）與「彈出效果」（POP-OUT）。Maka 反覆伸手越過中央畫面視窗。她的手、前臂以及她拉出的每個物體都明顯移動到黑色信箱式邊框（letterbox bars）之上，朝向並越過觀眾視線。 合成順序（由後至前）： 1. 背景與場景。 2. 頂部與底部的兩條寬闊黑色信箱式邊框。 3. 前景角色：Maka（她的手、手臂、粉紅色頭髮、奶油色耳狀頭飾以及她手持的每個物體），以及在結尾時被她拉出來的 Roni。 背景限制在中央畫面視窗內。前景角色不受該視窗限制。她的輪廓跨越邊界連續延伸至黑色邊框上。當她重疊於黑色區域時，其粉紅色皮膚、粉紅色頭髮、奶油色配件、黃色袖子及每個物體仍完全可見。 靜態邊框，動態角色： 兩條邊框均為完全靜態的螢幕圖形，並非場景中的物體。全程保持其相等的厚度、全寬度及精確的螢幕位置不變。其內部邊界始終保持完美水平且筆直。 角色直接渲染於邊框前方。她的動作暫時遮擋部分黑色表面。底層邊框絕不移動或變形。重疊區域兩側可見的邊緣片段仍對齊在同一水平線上。當她收回手臂時，露出下方原本未變化的黑色邊框。 確保在重疊的手臂和物體旁邊仍可見黑色區域。邊框不得彎曲、滑動、震動、拉伸、開口或產生衝擊反應。 攝影機保持靜止。單一連續鏡頭。她在構圖中保持近距離且佔比大，身體傾向觀眾。切勿退縮至背景深處。 突破邊框的效果必須來自角色明顯覆蓋中央畫面視窗外的黑色區域。切勿讓她完全位於邊框之後。切勿透過移動邊框或擴大視窗來模擬此效果。 [含義] 下方黑色邊距之外（螢幕底部之外）即為這側 = 觀眾的房间。Maka 從螢幕邊緣探出身，將手伸向這側，尋找某樣東西。 [生成目標] Maka 在螢幕這側翻找，依次將各種物品扔回，最後將躲在這側的 Roni-kun 拉出來。 （6 個階段，單一連續鏡頭無中斷。場景保持一致） 地點：一個簡陋的房間，僅有素淨的淺奶油色牆壁和淺薄荷色地板。無家具、窗戶、架子或長條水平物體。光線柔和均勻，陰影細薄。Maka 扔回的物品落在這側地板上並逐漸堆積。Maka 位於攝影機正前方，從頭部到胸部大致填滿視窗高度。她不會退入背景。 [S1] 從開始起，Maka 的臉龐在視窗內顯得很大。她強烈地向前傾身，用大眼睛注視著我們。她用一隻手將指尖放在黑色上方邊距上，彷彿抓著邊緣（邊抓邊窺視）。她歪著頭說：「有什麼……」

製作一支 32 秒、1920x1080、30fps 的影片，主題為一個核心概念：AI 建立在人類智慧之上。每個模型都是從那些擁有知識的人們那裡學習而來。 視覺風格：動態的印刷街頭海報拼貼畫。不使用照片或庫存圖片：所有元素皆須自行使用 SVG 和 CSS 繪製。 - 溫暖的米白色紙張背景（#F2EFE8），覆蓋整個畫面並帶有細微的點狀半色調紋理，加上極慢速的紙張漂移效果，使畫面永不靜止。 - 黑色墨水線條藝術，採用舊式雕刻風格（使用排線而非平面填充）：一隻人眼、一雙雙手、一朵花，以及一個具有分支樹突的神經元。線條透過 stroke-dashoffset 自動繪製出來，隨後半色調點狀填充在線條下方淡入，如同印刷拼貼層。 - 扁平的薰衣草色紙塊（#A79BF0 和更深色的 #6E5FD8）滑入藝術作品後方，邊緣略顯粗糙，像撕碎的紙張一樣錯位排列。 - 一個真實的數學公式，使用襯線體數學字型逐符號寫出：從 n=1 到無窮大的 1/n^2 總和等於 pi^2/6。 - 標題使用粗體幾何無襯線字體（加粗、緊縮字距），黑字白底條塊，大而具海報感。每一行文字都完全位於畫面內，並留有充裕邊距。 故事結構，三個節拍，請精確使用以下台詞： 節拍 1，火花（0-10s）：眼睛在中心自動繪製出現，薰衣草色紙塊在其後方滑入。文字："Before the machine, a mind." 接著 "Someone noticed. Someone asked why." 節拍 2，努力（10-22s）：三張拼貼卡片依節奏切入，每張包含其藝術圖像與一行文字："A proof at midnight."（公式自動寫出）、"A hand that heals."（雙手）、"An ear for the right word."（花朵綻放）。然後顯示："Every answer it gives, people taught it first." 節拍 3，主張（22-32s）：神經元的分支向外生長橫跨畫面，將眼睛、雙手、公式和花朵連接成單一的海報佈局。文字："Human brilliance is the input." 接著 "Everything else is compute." 保持最終海報畫面，並進行緩慢推鏡直至最後一幀。 聲音：如果應用程式有音樂庫，請在整部影片下添加一段平靜、極簡的鋼琴或環境音樂，並在結尾淡出；若可用音效，當紙塊移動時加入柔和的紙張滑動聲。 動作必須從第 0 幀開始並持續至最後一幀。無標誌，無品牌名稱。

<inputs> 請向我詢問：第一個切換開關的簡短標籤、一個主要單字、圖表的百分比數值、最終卡片的文字、一種強調色，以及一首節拍清晰的音軌。 </inputs> <direction> 一部 16:9 比例的 2D 動態設計影片。使用溫暖的米白色畫布、接近黑色的背景、粗體字型以及鮮豔的橘色作為強調色。橘色圓點連結每個場景：它從 UI 開始，變成字母上方的點，繪製出彈簧圖形，擴展成形狀，最後在結束卡片上再次出現。游標讓開場的點擊動作顯得真實。保持動作清晰且受控，帶有細微的彈簧超調效果，且沒有空閒停頓。 禁止事項：庫存素材、漸層、光暈、粒子爆發、任意過場，以及非源自畫面已有元素的移動。 </direction> <structure> 約 15 秒長，每個主要節拍都有視覺變化。 開場：游標點擊「Reduce Motion」旁邊的橘色切換開關。字母彎曲並移位，直到只剩下「Motion」，且橘色圓點位於「i」上方。 彈簧：圓點從單字跳離，落在圖表上。其軌跡繪製出彈簧響應，越過目標後停在「+22%」標註旁。 形狀：圓點沿著線條快速移動，擴展成橘色圓形並填滿畫面。內部旋轉的黑色圓角方形延伸成药丸狀。所有元素收縮回黑色背景上的一個橘色圓點。 排版：包含「SPRINGS」、「EASING」、「KINETIC TYPE」、「3D」和「SOUND」的字詞環繞圓點。字詞環擴散成微小圓點的網格。 揭示：半色調網格擴展並轉為黑色，揭露最終卡片：「Opus 5.5」、「Motion designer.」和「0 keyframes」。 回歸：橘色圓點穿過半色調網格、圖表和切換開關返回。使最後一幀與第一幀匹配，以實現無縫循環。 </structure> <build> 1. 使用單一 HTML 檔案，解析度 1920x1080，幀率 60fps。在 seek(t) 函數內根據時間計算所有視覺元素：不使用 CSS 過渡、計時器或跨幀狀態。 2. 對切換開關、移動圓點和圖表使用封閉式彈簧函數。使用控制圓點的同一個彈簧函數來繪製圖表。 3. 當「Reduce Motion」變為「Motion」時，單獨移動字母。保持橘色圓點位於「i」上方，直到它跳離。 4. 將橘色圓形、旋轉方形和藥丸狀視為同一形狀的狀態。在每次變化中傳遞其位置和動量。 5. 將字詞排列在圓形路徑上，然後將其字母向外發送，以過場到半色調網格。 6. 將半色調繪製為大小隨橘色圓點反應的圓點網格。在顯示結束卡片前將其擴展至超出畫面範圍。 7. 將點擊、圓點落地、圖表峰值、形狀變化和最終標題與測量出的節拍對齊。在完整匯出前，每節拍渲染一幀以檢查時間軸。 </build>

<inputs> Ask me for: a target value for the slider, three short notification messages, a reply to type, one accent color and a royalty-free track around 120 BPM. If I skip anything, use 100, "Slider - Reached 100", "Gravity - Something is falling", "Messages - What now?", "retry" and electric blue. </inputs> <direction> A 10-second 2D UI motion film in 16:9. Place everything on a near-black canvas with a faint dot grid. Use charcoal controls, sharp white text, one blue accent and a white ball that moves through the entire film. A real cursor makes the opening click feel physical; the ball guides each transition that follows. Keep the UI clean and the impacts precise, with only small spring overshoots. Move the camera through one continuous layout so every interaction fills the frame. Banned: hard cuts, stock footage, glows, particle bursts, disconnected transitions, excessive bouncing and blurry text during camera moves. </direction> <structure> Around 10 seconds, with something happening on every major beat. Toggle: the cursor clicks a blue switch. Its white ball springs free, and the camera follows it toward a horizontal slider. Slider: the ball lands on the knob and moves it along the track. The blue fill stays attached, while a value bubble above the knob climbs to 100. Notifications: hitting 100 sends the ball onward and brings in three dark cards: "Slider", "Gravity" and "Messages". Each arrives on its own beat. The camera follows the ball down to "What now?". Reply: the small "Reply" pill stretches into a text field. A keyboard rises below it as part of the same scene. Keyboard: the ball strikes the keys while "retry" appears in the field. It lands on Return, the blue send button activates and the reply contracts into a small blue message. Return: the camera pulls back to show the toggle, slider, cards and keyboard together in one world. The ball travels back to the first switch. Match its position, the cursor and the switch state to the opening frame so the film loops cleanly. </structure> <build> 1. Make one HTML file at 1920x1080 and 60fps. Calculate every visual from time inside seek(t): no CSS transitions, timers or state carried between frames. 2. Arrange all UI components in one world. Use a single camera transform with position and log-space zoom, making each close-up a move through that world. 3. Give the white ball one continuous route between the toggle, slider, cards and keys. Use closed-form springs for landings and a brief squash on impact. 4. Calculate the slider fill and number from the ball's horizontal position. Keep the tooltip centered over the knob until it reaches 100. 5. Give every key press a fixed time. Show the reply as the portion typed by that moment, so any frame can be rendered deterministically. </build>

製作一支 3 到 4 分鐘的 16:9 動畫解說影片，主題為 natural gas extraction，目標受眾為 general public，採用 flat illustration 風格，並搭配與畫面同步的旁白和字幕： 1. 從觀眾日常生活中常見的事物開始，然後回溯到起源。 2. 遵循最清晰的邏輯線：若是流程則按步驟說明，否則依時間軸、因果關係或問題解決順序進行。 3. 每個步驟對應一個章節，共設 8 到 12 個章節，標題置於左上角。全程保持統一的視覺風格和配色方案。 4. 選擇一個貫穿全片的關鍵數值（如溫度、壓力、速度、成本或時間），將其顯示在角落並在每個步驟中更新。若無合適數值，則顯示「第 X 步 / 共 Y 步」。 5. 為每個關鍵數值提供日常生活中的對比參照，並省略任何不確定的數據。 6. 以一句話總結整個敘事脈絡作為結尾。 在開始創作前，請先向我發送章節列表、選定的關鍵數值以及將使用的核心事實，以便我進行確認。

一名孤独的像素艺术赏金猎人骑着一辆骨架般的摩托车穿越有毒沙漠，巨大的沙虫从高速公路下破土而出。她灵活地避开崩塌的沥青路面，跃过一辆燃烧的罐车，向最大的生物发射能量鱼叉，并让它拖着她穿过沙丘；随后利用链条将自己弹射到其头部。电影级高细节像素艺术，丰富的 32-bit 美学风格，多层视差沙漠背景，流畅的精灵动画，戏剧性的精灵缩放效果，强烈的屏幕震动，通过像素抖动实现的热浪扭曲效果，橙色日落，有毒的绿色风暴，青色武器轨迹和飞溅的碎片，残酷的复古未来主义氛围。结尾处，猎人在沙虫装甲板之间放置炸药，然后跳回摩托车上，身后的生物在一场巨大的像素爆炸中灰飞烟灭。

Opus 5.5：手繪風格故事。一個小 Agent 在書桌前醒來，收到回饋註解並進行修正，最後以愛心眼和綠色對勾作結。時長 53 秒 Sonnet 5.5：動態字型展示影片。包含六種緩動曲線、變形的星星、粒子效果、模糊字型，以及「每一幀皆由程式碼編寫」的文字。時長 15 秒 Haiku 5.5：逐步式 White Russian 調酒食譜。包含冰塊、伏特加、咖啡利口酒、奶油，並配有即時計數器與檢查清單。時長 30 秒

建立一個互動式 HTML 簡報，用以說明「網路效應」的概念：隨著用戶數量增加，連結呈指數級成長（例如：用戶數增加 5 倍，連結數增加 27 倍）。介面應包含一個滑桿，讓觀眾可以手動調整用戶數量，並即時查看連結密度的變化。僅使用 HTML 和 JavaScript，不依賴外部圖片資源。同時加入與視覺變化同步的語音旁白。

我已下載 Remotion，你能幫我製作這個 App 的發布影片嗎？ 請參考此儲存庫中的資訊。 我需要一支 SaaS 風格的 15-30 秒 發布影片，內容需包含縮放、游標移動、打字特效、App 互動操作、功能展示以及不同視角的應用程式畫面等。 基本上是一支完整的...

<inputs> 請提供： * 畫布顏色 * 形狀顏色 * 強調色 * 形狀半徑 * 字型 * 形狀應變換的狀態 使用十六進位代碼、秒數、阻尼比和像素尺寸，而非形容詞。 </inputs> <direction> 製作一個 14 秒、1440x1440、60fps 的無縫 UI 動態迴圈。 單一形狀，零剪輯。 形狀從一個狀態變換到另一個狀態，絕不被替換。 每個狀態佔據畫面 50%。 攝影機在節拍點啟動，且穩定速度慢於形狀。 使用封閉式彈簧模型。 形狀阻尼 0.72，穩定時間 0.35s。 攝影機阻尼 1.0，穩定時間 0.6s。 內容切換使用 12px 模糊並在 0.15s 內淡入淡出。 游標尖端始終鎖定在其拖曳的目標上。 </direction> <structure> 使用 0.5s 節拍網格。 0.0 - 像素吉祥物閒置 1.0 - 吉祥物壓扁變成播放按鈕 1.5 - 載入器 2.0 - 勾選繪製完成 2.5 - 時間軸拖曳 4.0 - 關鍵幀拉伸超過末端並回彈 5.0 - 貝茲爾編輯器 7.0 - 計數器滾動 F 000 至 F 840 8.5 - 渲染進度條填滿 10.0 - 命令面板輸入 "export mp4" 11.0 - 提示訊息顯示 "840 frames rendered" 12.0 - 提示訊息縮小並變回吉祥物 最後一幀必須與第一幀相同。 </structure> <build> 編寫一個使用 Canvas 2D 的 HTML 檔案。 window.renderAt(t) 必須是純時間函數。 不使用 Math.random。 不使用時鐘。 不保留狀態。 ?t= 必須能凍結精確時刻。 透過 renderAt(frame / 60) 渲染每一幀。 使用 4 個子幀進行動態模糊。 以 60fps 編碼為 H.264。 </build> <gotchas> 修正迴圈接合處的游標跳動問題，使用： t - 14*floor(t/14) 不要將橙色交叉淡入墨色。 在 1.5s 時從中心產生漣漪，在 12.0s 時從點擊位置產生漣漪。 文字切換垂直滾動。 在模糊淡入後開始繪製動畫。 游標瞄準目標落地時的位置。 保持游標速度低於 65 px/frame。 </gotchas> <start> 首先展示故事板。 然後編寫程式碼。 在第一次渲染後，檢查每個節拍周圍的 5 幀，並在最終渲染前修復問題。 </start>

<輸入項> 請向我詢問：我的產品、使用者在其中的確切輸入請求、用於結果卡片的 6 到 8 張照片、一首約 130 BPM 且具有清晰高潮的免版稅歌曲（來自 Mixkit，可免费商用），以及用於結尾卡片的品牌標誌。如果我跳過任何內容，請使用預設設定：下方的點餐故事、來自 Pexels 的食物照片（火雞麵、Birria 塔可、辣味炸雞、水牛城雞翅、Smash 漢堡、辣味拉麵），以及 Mixkit 的「Cat Walk」。 </輸入項> <指導> 一段 15 秒的產品發布影片，解析度 1920x1080，幀率 60fps。僅限 2D，單次連續拍攝。無淡入淡出、模糊或剪輯：每個場景都從上一個場景中生長出來。文字從遮罩線升起，按鈕擴展成頁面，顏色從一個物體湧入並在收縮成另一個物體前擴散。給相機每個場景一個緩動移動，並且不要連續進行放大和縮小。 外觀：暖白色畫布 (#f5f5f2)，黑色 UI (#0e0e10)，石灰綠強調色 (#cdf24f)，橙色 (#ff6a2a)，以及藍色發送按鈕 (#2f6bff)。在輸入框周圍添加類似 Apple Intelligence 風格的虹彩光暈：一個模糊的圓錐漸變，旋轉穿過粉色、橙色、石灰綠、青色和紫色。在深色卡片上使用真實的食物攝影，UI 使用 Geist 字體，結尾卡片上的產品名稱使用襯線字體。 禁止事項：交叉淡化、模糊進入、3D、粒子效果、方向反轉的相機移動、超過 1 秒的停頓，以及任何感覺像模板的內容。 </指導> <結構> 130 BPM，32 拍（14.8 秒）。在高潮前 12 拍開始播放音樂。 第 0-6 拍，提問：緩慢推近發光的輸入框，大約 3 倍縮放。以自然的按鍵節奏在三行固定文本中輸入請求： 「我真的餓了，我不知道 我想要什麼，但想要一些 辛辣、酥脆且管飽的東西」 第 6 拍，發送：按下發送按鈕。一道石灰綠的漣漪從中擴散，並將訊息轉化為聊天氣泡。拉遠一次以展示周圍的手機（428x900 螢幕，11px 黑色邊框，9:41 狀態列）。 第 6-12 拍，思考：發送按鈕長成一個橙色的炒鍋，一個帶有細手柄的半圓盤。它在閃爍的文字「正在為你尋找……」下方，在第 8、9、10 和 11 拍拋出 6 種彩色食材。 第 12 拍，高潮：一個石灰綠色的圓圈從炒鍋擴大，在約 0.35 秒內填滿畫面。深色食物卡片（330x440，圓角半徑 28，頂部為照片，名稱，一行描述，價格和評分）從中心爆發出現。滑動條帶穿過三張卡片並停留在「火雞麵」上，它隨著一個「最佳匹配」標籤一起抬起。 第 16-21 拍，聊天：石灰綠色收縮回使用者的訊息氣泡中，攜帶其文字，同時選中的卡片飛入其槽位。「找到了。來自 Wok & Fire 的火雞麵，煙燻、辛辣且非常管飽。」升起，隨後是「要我幫你下單嗎？」然後顯示兩個藥丸狀按鈕：「立即下單」為黑色，「更多選項」為輪廓樣式。游標點擊立即下單 → 載入動畫 → 「✓ 已下單」。 第 21-32 拍，結尾：黑色按鈕擴展成頁面，保持藥丸形狀直到觸及邊緣，同時相機推進其中。其標籤增長至標題大小，然後滑走。逐字引入「你當時想吃麵條。」和「現在它已在路上。」（92px，黑底白字）。一個快遞員點沿著路線跟隨到一個圖釘。圖釘變成品牌標誌，文字標誌從其後方擦除消失，上方寫著「由...製作」，下方寫著產品名稱。 </結構> <構建> 1. 一個 HTML 檔案，1920x1080。在 seek(t) 內部根據時間計算所有樣式：不使用 CSS 過渡、計時器或幀間狀態。 2. 在容器上使用單一相機變換，鍵值為 [time, zoom, x, y]，具有緩動段，且縮放在對數空間中插值。 3. 對所有的彈出和靜止使用閉式階躍響應彈簧。 4. 使每一次交接成為一個共享元素：石灰綠洪水攜帶氣泡文字的副本，按鈕將其標籤帶入頁面。 5. 聲音：為每個事件使用下載的 Mixkit 音效 - 打字聲、發送爆破聲、每次拋擲聲、高潮衝擊聲、卡片呼嘯聲、點擊聲、成功音調、頁面填充呼嘯聲和標誌閃光聲。根據其測量峰值放置每一個，並將響度標準化為 -14 LUFS。 6. 使用 Playwright 以 60fps 渲染，每幀使用 8 個子幀，並透過 ffmpeg tmix 混合。逐幀審查每個快速時刻並掃描完整影片的每一幀。 </構建>

卡片應從 30% 縮放至 100%，並從不可見過渡到可見狀態。當卡片穩定在最終縮放比例後，每個細節應依序逐一滑入。圖表線條應以路徑繪製的方式進行動畫展示。隨著卡片細節滑入，背景的光暈效果也應逐漸顯現。兩個矩形應以略微不同的時間節奏橫跨螢幕移動，以營造出光影流動的效果。

建立一段 5 秒的動態圖形動畫：一個簡單的圓點彈跳至螢幕中央，隨後擴展為搜尋列，接著框內填入文字：「我是一名動態設計師，我的下一份職涯應該是什麼？」動畫需保持流暢，關鍵影格應加入緩入與緩出效果。

<inputs> 請向我索取：一段帶有對白或歌詞的音訊檔案（旁白或歌曲）及其文字稿、10-12 個能概括我生活的小物件、兩個需以熱成像方式點亮的輪廓（側臉頭部和舉起的手），以及我想強調的 3 個單字。若我未提供，請使用預設值：黑膠唱片、書籍、相機、貓、硬幣、遊戲控制器、帽子、愛心、錢幣、植物、場記板、滑板；來自 Openverse 的免費 CC0 授權輪廓圖；動作、意圖、好奇心。 </inputs> <direction> 一部 20 秒、4:3 比例的影片，解析度為 1440x1080，幀率 60fps，依語音剪輯。背景為米白色紙張，配色僅限黑色、一種紅色、一種黃色，所有文字均使用 Geist 字型。整體覆蓋底片顆粒感，加上柔和暗角，鏡頭永不靜止：每個場景下方都有緩慢的手持漂浮效果，並伴隨向內的緩慢推進。 場景之間無硬切：每個轉場從前一個場景的最後一幀精確開始。唯一的硬切發生在最後一個單字的節拍轉換處。 每個物件都是你親手繪製的像素藝術：每個物件基於 16x16 網格，每個格子皆為手工放置的色彩，渲染為 3D 方塊（右下方向有較深的擠出層，每個格子邊緣有細微倒角），並帶有柔和的接觸陰影。 輪廓圖以熱成像方式點亮：熱量取決於身體各點的厚度，因此鼻子、頭髮和指尖溫度較低，另有一個熱點和緩慢移動的噪聲，通過黑色 > 紅色 > 橙色 > 奶油色的漸變映射。邊緣保持銳利，外部帶有柔和光暈。 動態規則：無彈入效果（約 0.5 秒的平滑滑動，起始柔和），快速移動產生真實運動模糊而非殘影複製，字幕隨語音逐字打出，背後有區塊游標。 禁止事項：庫存素材、AI 生成影片、3D 鏡頭移動、粒子效果、故障藝術。 </direction> <structure> 每個場景均依據文字稿的字詞時間戳進行編排（使用 faster-whisper 字詞時間戳測量，每次處理一個短片段）： 1. 第一個單字填滿一張黃色卡片。卡片向左擦除，問題在下方兩行居中打出，隨著內容增長平滑調整以保持居中，關鍵單字在發音時以紅色下劃線標示。 2. 物件在文字上方和下方的軌道中掠過，一道青色四點閃光掃過，隨後頁面燃燒殆盡：黑色從邊緣向頭部閉合，背後是熾熱的紅色邊緣。 3. 頭部在黑色背景上升溫，同時答案在左下方打出。一條細白色軌道環繞頭部自行繪製，其遠端半圓穿過頭部後方。在最後一個單字時，紙張從頭部內部綻放，其中包含物件，鏡頭向下穿越：頭部急速掠過鏡頭，直到只剩紙張可見。 4. 物件位於一個透視傾斜的圓環上（前方物件較大且位置較低，最後繪製），緩慢旋轉，每個物件上下浮動；硬幣翻轉落地並迸出火花。 5. 對於那 3 個單字中的每一個，對應物件從圓環飛出至左側並放大，頁面從該物件處湧現黑色，單字在其旁邊打出（相機：紅色快門星芒；書籍：紅色絲帶掃描；唱片：兩個白色軌道和紅色音符）。然後黑色退潮回縮至物件內，當它飛回原位時，鏡頭更深入圓環。將每個主角物件放置在單字落地時處於左前方的槽位。 6. 圓環輕微收緊，向外爆發，每個物件化為墨跡，墨漬擴大並吞噬頁面。 7. 手部進入畫面，呈現高溫狀態，台詞分佈在手部兩側。愛心落入掌心，然後升至中心，大小與下一個場景所持一致。 8. 最後一個單字，每個字母對應一個節拍，背景在紙張/黑色/紅色之間切換，愛心跨越剪切保持位置不變，中心物件逐像素變形為下一個物件。 9. 細筆觸掃過，字母散開並漂浮，然後帶著上方的愛心重新聚合為單字。鏡頭持續推進直至結束。 </structure> <build> 1. 單一 HTML canvas。每一幀皆是 seek(t) 內關於時間的純函數。 2. 將每個像素精靈烘焙一次至離屏 canvas（先繪製擠出層，再繪製正面），然後按比例縮放並旋轉繪製。 3. 熱效應：預計算每個輪廓的基本熱度一次（遮罩的距離變換，在邊緣外保留邊緣值以防止放大時出現黑色滲漏）。每幀添加熱點和四分之一解析度的兩倍頻值噪聲，通過 256 步查找表映射，放大後用全解析度遮罩裁剪。 4. 穿越頭部的下落效果：將圓環場景繪製到離屏圖層，使用以顱骨內某點為中心放大的頭部進行遮罩，並以三次曲線增長該比例直到頭部覆蓋整個畫面。圓環內部的縮放幅度小於頭部，從而營造深度感。 5. 像素變形：將物件 A 的每個格子與物件 B 的一個格子配對，平滑滑動每個格子的位置和顏色，每個格子帶有微小的隨機延遲。 6. 使用 Playwright 以 60fps 渲染，包含 8 個運動模糊子幀，然後使用 ffmpeg 將原始音訊疊加回去。 </build> <gotchas> 無 Alpha 通道的遮罩 PNG 會使整個框充滿熱度，因此請將輪廓放入 Alpha 通道。被照片邊界切斷的四肢會顯示為直邊，因此請將遮罩延伸至畫框之外。只有當一個場景的最後一幀是下一個場景的第一幀時，交接才顯得流暢：在轉場期間繪製退出場景，並讓展示同一圓環的場景共用一個縮放函數。如果下一個場景開始時黑色退潮尚未完成，會被視為硬切，因此請確保其先完成。快速的緩出式退潮會被視為跳躍；請使用柔和起始。 </gotchas> <start> 請向我索取輸入資料，測量字詞時間戳，然後在渲染前向我展示 8 張靜態截圖。 </start>