Simon Willison dùng Claude Opus 5.5 tạo hoạt ảnh pixel chim Kākāpō và quay video bằng Claude Code

Hôm qua, tôi đã có bài phát biểu bế mạc tại WeAreDevelopers World Congress North America. Để tạo khoảnh khắc STAR, tôi quyết định lồng ghép các thông tin về mùa sinh sản kỷ lục của loài kākāpō mà chúng ta đã có vào năm 2026.

Đối với trang trình bày cuối cùng, tôi muốn tạo điểm nhấn và đã thấy nhiều lời bàn tán về khả năng tạo hoạt ảnh pixel art tuyệt vời của Claude Opus 5.5. Vì vậy, tôi đã chọn ba bức ảnh Kakapo từ Google Image Search và đưa chúng vào Claude với câu lệnh sau:

Đây là một vài bức ảnh về vẹt kakapo để bạn hình dung ngoại hình của chúng. Tôi cần bạn tạo một hoạt ảnh pixel art trên HTML 5 canvas, trong đó các chú vẹt kakapo pixel đang nhảy lên nhảy xuống mở tiệc với pháo giấy và những thứ tương tự - cần có ít nhất 20 chú vẹt.

Đây là bản ghi chép, và đây là trang kết quả. Nó thực sự rất tuyệt!

Tôi muốn nhúng nó vào tệp trình bày Keynote, vì vậy tôi đã tải xuống tệp HTML và yêu cầu một phiên Claude Code cục bộ:

Hãy tạo cho tôi một video từ file:///Users/simon/Downloads/kakapo-party.html - bạn cần tải nó trong trình duyệt và nhấp vào đó vài lần để tạo hiệu ứng pháo giấy, video nên dài 15 giây, đừng bắt đầu nhấp cho đến giây thứ 3, hãy đảm bảo các cú nhấp chuột được phân bổ rải rác quanh khu vực có thể nhấp.

Claude Code đã sử dụng Playwright (bản ghi chép tại đây) và tạo ra video này, chính xác là những gì tôi cần cho trang trình bày cuối cùng của mình:

Đây là toàn bộ tập lệnh Playwright mà nó đã sử dụng, với độ dài khá ngắn gọn:

# /// 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()