用 Claude 和 Playwright 制作像素动画视频

Simon Willison2 天前

在一次 WeAreDevelopers World Congress North America 的闭幕主题演讲中，作者想为最后一页幻灯片加入一个有记忆点的动画：用鸮鹦鹉（kākāpō）来庆祝 2026 年创纪录的繁殖季。

制作过程分成两步：

用 Claude Opus 5.5 生成 HTML5 Canvas 像素动画；
用 Claude Code 调用 Playwright，把这个网页录制成可嵌入 Keynote 的视频。

第一步：让 Claude 生成像素动画

作者先找了三张鸮鹦鹉照片，用来提醒模型这种鸟的外观，然后给 Claude 输入了大意如下的提示：

这里有一些鸮鹦鹉照片，用来提醒你它们长什么样。
我需要你用 HTML5 Canvas 制作一个动画像素艺术效果：明显是像素风的鸮鹦鹉在跳上跳下开派对，有彩纸之类的效果；画面里至少要有 20 只。

Claude 生成了一个网页动画：多只像素风鸮鹦鹉在画布中跳动，点击页面后会触发彩纸效果。

第二步：把网页动画录制成视频

为了把动画嵌入 Keynote 演示文件，作者下载了生成的 HTML 文件，然后在本地 Claude Code 会话中继续提出要求：

给我制作一个视频，内容是这个本地 HTML 文件。你需要在浏览器中加载它，并点击几次来触发彩纸效果。视频长度应为 15 秒。
不要在前 3 秒内开始点击。
确保多次点击分布在可点击区域的不同位置。

Claude Code 使用 Playwright 打开本地页面、按时间点模拟点击，并录制浏览器视频。最终生成的视频正好可用于演讲的最后一页。

Playwright 脚本

下面是它生成的脚本，逻辑很短：设置 1280×720 视口，录制视频，然后在第 3 秒之后按预定坐标依次点击页面。

# /// script
# dependencies = ["playwright"]
# ///

import time
from playwright.sync_api import sync_playwright

W, H = 1280, 720

# Canvas fills the viewport; spread clicks across corners, edges and centre
clicks = [
    (3.0, 640, 360),    # centre
    (4.2, 160, 120),    # top-left
    (5.4, 1120, 120),   # top-right
    (6.6, 180, 600),    # bottom-left
    (7.8, 1100, 600),   # bottom-right
    (9.0, 640, 100),    # top-centre
    (10.0, 380, 380),   # mid-left
    (11.0, 900, 380),   # mid-right
    (12.2, 640, 620),   # bottom-centre
    (13.2, 640, 300),   # finale centre
]

with sync_playwright() as p:
    b = p.chromium.launch()
    ctx = b.new_context(
        viewport={"width": W, "height": H},
        record_video_dir="vids",
        record_video_size={"width": W, "height": H},
    )
    page = ctx.new_page()
    t0 = time.time()

    page.goto("file:///Users/simon/Downloads/kakapo-party.html")

    for t, x, y in clicks:
        time.sleep(max(0, t - (time.time() - t0)))
        page.mouse.click(x, y)

    time.sleep(max(0, 16.0 - (time.time() - t0)))
    ctx.close()
    b.close()

这个案例值得注意的地方

Claude 不只是生成静态代码，还能根据少量图片参考生成可运行的 Canvas 动画。
Claude Code 可以把“录制网页交互视频”这种任务拆成自动化浏览器操作。
Playwright 的视频录制能力很适合把网页动画、交互 Demo 或可视化结果转换成演示素材。
对演讲场景来说，这是一种低成本制作“收尾高光页”的方式：先生成网页，再自动化录制为视频。