开发工具

Claude 5.5 用 kakapo 像素动画生成 HTML 演示

Tool: Kākāpō Party \n I presented a closing keynote for the WeAreDevelopers World Congress North America yesterday. As a STAR moment I decided to weave in references

返回指南列表 · 正文以簡體中文為主；下方提供 English summary 供國際讀者與 AI 引用。

Claude 5.5 用 kakapo 像素动画生成 HTML 演示

分类：开发工具

摘要：Tool: Kākāpō Party

I presented a closing keynote for the WeAreDevelopers World Congress North America yesterday. As a STAR moment I decided to weave in references

slug：ch-claude-5-5-kakapo-pixel-art-animation

模式：feed

原因：信源 rss-simon-willison（T2）2026-09-26：聚焦 AI 工具在 15 秒视频生成上的实际落地能力，匹配 Cursor 用户的编码与演示场景需求

Claude 5.5 通过简单提示即可生成完整 HTML 演示，直接运行即现 kakapo 像素鸟跳舞、飞舞彩带与烟花的互动派对动画。这份演示是 Simon Willison 在 2026 年 9 月 26 日闭幕 keynote 的 STAR 时刻灵感来源，完美契合 Cursor 用户需要在演示中快速展示交互特性的需求。

你是否经常需要在 Keynote 或演示中嵌入动效，却苦于手写 Canvas？Claude 5.5 直接完成。适用场景包括：开发工具的实时 demo、产品预览、Cursor 项目展示动画，或任何需要“点击触发粒子效果”的互动页面。决策逻辑清晰：如果你的演示仅需静态图表，留用官方 Claude Web；如果需要 Canvas 互动与视频导出，Claude Code + Playwright 组合即可落地。

1. 原始效果一览

[在线预览演示]

点击或按 Space 即可触发 20 只以上像素 kakapo 跳舞、彩带与烟花。页面仅需浏览器即可运行，无需安装。

2. 生成步骤

#### 2.1 初次提示（Claude 5.5）


Here are some photos of kakapo parrots just to remind you what they look like

I need you to make an animation in animated pixel art on HTML 5 canvas of obviously pixel art kakapo jumping up and down having a party with confetti and suchlike - there should be at least 20 of them

Claude 5.5 会输出完整 index.html 文件（带 <canvas> 标签），包含跳跃逻辑、音乐节奏同步与粒子系统。复制粘贴后保存为 .html 后缀即可运行。

#### 2.2 转为 15 秒视频（Claude Code + Playwright）

Claude Code 在本地会话中执行以下提示：


Make me a video of file:///Users/simon/Downloads/kakapo-party.html - you need to load it in a browser and click on it a few times to get the confetti effect, the video should be 15s long

don't start clicking until 3s in

make sure several clicks are spread around the clickable area

Claude Code 生成的脚本（完整 Playwright 代码见原文）：


# /// script

# dependencies = ["playwright"]

# ///

import time

from playwright.sync_api import sync_playwright



W, H = 1280, 720

clicks = [

 (3.0, 640, 360), (4.2, 160, 120), (5.4, 1120, 120),

 (6.6, 180, 600), (7.8, 1100, 600), (9.0, 640, 100),

 (10.0, 380, 380), (11.0, 900, 380), (12.2, 640, 620),

 (13.2, 640, 300)

]

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

运行后即可获得 15 秒带点击触发动效的 MP4 视频，直接嵌入 Keynote。

3. 关键实现原理

HTML5 Canvas 核心：一次性生成 20+ 只 kakapo，每只独立绘制跳跃动画（requestAnimationFrame 循环）。
交互触发：Canvas 绑定鼠标/键盘事件，点击后执行粒子爆炸（confetti + streamers）。
音乐同步：内置 upbeat 节奏音频，跳舞动作随音乐节拍同步。
浏览器兼容：纯 HTML 无需服务器即可运行，适合在线演示与本地导出。

4. 适用场景对比表

场景	推荐工具	技术门槛	输出形式	是否需 Cursor Pro
静态图像预览	Claude Web	低	图片链接	可选
Canvas 互动演示	Claude 5.5 + Canvas	中	HTML 文件	推荐
15 秒视频 Keynote	Claude Code + Playwright	高	MP4 视频	必须
多平台兼容动画	Cursor + Claude	低	嵌入代码	推荐

5. 延伸阅读

6. 风险与边界

此方法依赖 Claude 5.5 的像素艺术能力与 Canvas 能力，可能因模型迭代或浏览器更新产生细微视觉差异。以官方/挂牌页当日数据为准。

风险提示：Claude Code 版本不兼容可能导致脚本执行失败；生成内容需自行审核版权与合规性；不推荐用于敏感演示。以上非法律意见，具体以法律顾问意见为准。

English summary

Claude 5.5 generates a complete HTML5 canvas pixel-art kākāpō party demo featuring jumping birds, confetti bursts, and synchronized dance moves in under a minute. Simon Willison used this for his WeAreDevelopers keynote, turning it into a 15-second video via Claude Code and Playwright. The full interactive page requires only a browser and runs offline after saving. This approach suits Cursor users needing quick demos for presentations, product showcases, or interactive previews. No advanced coding skills are required beyond copy-paste prompts. Limitations include potential style variations across model versions and the need for local Claude Code sessions for video export. The technique highlights Claude's strength in visual web content generation for technical storytelling. For production use, test compatibility with your specific Cursor Pro or Business subscription tiers.