CineCode.video

Claude Fable 5.2 · Blender

鵜鶘騎自行車 · Claude 參考影片

一隻鵜鶘騎著青綠色自行車沿海濱前進。Tech Friend AJ 的 Blender 短片以五個機位呈現這段騎行,也拍到了踏板和傳動系統的特寫。

Tech Friend AJ · 00:19 原始出處Blender · Hugging Face

鵜鶘騎自行車參考影片

兩段創作者公開的三維街景騎車影片。ChetasLua 在原始貼文中將模型路由描述為「Fable 5.5 / Opus-Next」,實際路由仍待查證。

Claude Fable 5.5 / Opus-Next · 原始貼文標註 · 00:16

寫實街景裡的鵜鶘騎車影片

鏡頭跟著鵜鶘騎過店面、條紋遮陽篷和石板廣場。

ChetasLua · @chetaslua

Claude Opus 5.5 · 01:31

Three.js 街頭騎車場景

鏡頭跟著鵜鶘騎過陽光下的立體街景。

Addy Osmani · @addyosmani

Anthropic 的 Claude Fable 5.2 發布公告

CineCode Canvas 範例與原始檔
The Tidal Route · 00:08車鈴聲與輕柔的合成音,沒有對白。

同一份提示詞,兩組模型範例

兩個模型收到同一份提示詞,各自傳回 Canvas 繪圖函式。我們用同一版 CineCode 擷取指令碼,以 1280 × 720、每秒 24 格輸出。

Claude Fable 5.2Claude Code · Medium
GPT-6.1 TerraCodex · Medium

Fable 5.2 讓木棧道依車輪轉六圈的距離移動。Terra 的車輪轉了四圈,木棧道只移動 160 像素,輪胎看起來會打滑。兩段動畫都在 8 秒時回到開頭的畫面。

Google 的 Gemini 4 Carbon 示範把鵜鶘騎車做成可玩的 3D 場景,可以到 Google 的發布頁觀看。這裡播放的是本站實際輸出的兩段動畫。 Gemini 4 Carbon

社群也用 Qwen4-Max Preview 做出了海邊騎車的 Three.js 動畫。我們在 Qwen Chat 的嘗試沒有取得可輸出的繪圖函式,可以參考創作者公開的範例。 Qwen4-Max Preview · 社群範例

暫停畫面時可以觀察的細節

  • 腳應該跟著踏板移動。暫停在雙腿交錯的地方,看看腳有沒有滑出踏板。
  • 用輪輻和木板當參考,檢查輪胎轉動與地面移動是否同步。
  • 比較開頭和結尾,確認角色姿勢和背景移動能自然接上。

換個車架顏色,沿用原本動作

兩張圖都是本站動畫的第 48 格。用 Chrome 開啟 pelican.html?frame=teal 即可預覽換色版。顏色在 pelican.js 裡設定,動作和時間軸沿用同一份程式碼。

珊瑚色車架
珊瑚色車架
藍綠色車架
藍綠色車架

用 CineCode 輸出 MP4

解壓縮後用 Chrome 開啟 pelican.html 預覽。在專案資料夾執行下方指令,需要 Node.js 22 以上、Chrome 或 Chromium,以及 FFmpeg。MP4 和封面圖會儲存在 exports。

node render.mjs pelican ./exports
node render.mjs pelican-fable ./exports
node render.mjs pelican-terra ./exports

兩組實測使用的提示詞

Create a deterministic, 8-second looping Canvas 2D animation called “The Tidal Route”: a recognizable pelican riding a bicycle from left to right along a coastal boardwalk. 1280x720, 24 fps. Use a side-on camera with cinematic editorial illustration: desaturated teal water, dark navy shadows, warm peach dawn and a coral bicycle frame. Use a layered moving harbor backdrop, with a clear silhouette and no text.

The pelican has a long beak and visible pouch, sits on the saddle, reaches the handlebars, and pedals with both feet attached to opposite pedals. Wheels, background travel, and pedals should be mechanically coherent. Make the seam close at 8 seconds. The time argument is in seconds. Leave enough space around the bicycle to read the movement. Use only procedural drawing. No external assets, fetches, Web Audio, asynchronous code, page access, libraries, or randomness per frame.

Output only valid JavaScript defining function drawPelican(ctx, time) for an existing player that handles the canvas, preview and frame capture. Use Canvas 2D calls on ctx and local helpers inside the function. No markdown fences or explanation. Aim for 150–240 lines.

從 SVG 測試到可編輯的影片

Simon Willison 的經典測試要求產生靜態 SVG。這個範例用 Canvas 依時間繪製每一格,由 CineCode 在無介面的 Chrome 擷取畫面,再以 FFmpeg 封裝成 MP4。本站版本另外用程式合成了車鈴聲。

Gemini Omni 1.2 Flash 提供原生影片生成與編輯,依 Google 文件,單段最長 15 秒。上面的程式碼專案可逐格檢視、調整動作,再輸出影片。