A WeAreDevelopers World Congress North America záróelőadásán a beszéd záródiájához a szerző Claude Opus 5.5-t használta, hogy pixelart animációt készítsen egy kakapó‑partiról, majd Claude Code segítségével Playwrighttal videóra rögzítette az animációt, hogy beágyazza Keynote diájába.
Mi történt és miért számít
A beszélő a konferencia záróelőadásán egy „STAR moment” formájában egy 2026‑ban rekordot döntő kakapó‑fajszaporulatra utaló utolsó diát tervezett megmutatni. A záróslájdon egy játékos, pixelart stílusú kakapó‑animációt akart megjeleníteni, amelyen legalább 20 kakapó ugrál, konfetti esik, és bulihangulat uralkodik.
Módszer: Claude Opus 5.5 a pixelart animációhoz
A szerző három kakapó‑fotót gyűjtött össze Google képkeresésből, majd ezekkel a képekkel és egy részletes utasítással bedobta azokat Claude Opus 5.5‑be. A kérése röviden: készítsen HTML5 canvasre egy animált pixelart jelenetet, amelyen nyilvánvalóan pixelart kakapók ugrálnak fel‑le, ünnepelnek, és legyen legalább 20 példányuk, plusz konfetti és hasonló effektusok.
A szerző szerint a Claude által generált HTML oldal és a hozzá tartozó transcript „elég jó” eredményt adott, az oldalt lementette, hogy be tudja tenni a Keynote prezentációba.
Módszer: Claude Code és Playwright a videóhoz
Mivel Keynote‑ban videóként akarta használni az animációt, a szerző letöltötte a HTML fájlt (kakapo‑party.html) és egy helyi Claude Code munkamenetben azt kérte: készítsen róla 15 másodperces videót — a felvételhez meg kell nyitni a fájlt egy böngészőben és néhány kattintással elindítani a konfetti effektet. Külön utasítás volt, hogy a kattintások ne kezdődjenek 3 másodpercnél korábban, és több kattintás legyen szétosztva a kattintható területen.
Claude Code Playwrightot használt a feladathoz, és a végső videó megfelelt a szerző igényeinek.
A használt Playwright script és technikai részletek
A Playwright script viszonylag rövid volt és Chromiumot indított meg felvételi módban. A fontosabb paraméterek és lépések:
- Felbontás/viewport: 1280 × 720.
- A videó felvételének ideje: 15 másodperc.
- A helyi fájl megnyitása: file:///Users/simon/Downloads/kakapo-party.html.
- A kattintások listája időpontokkal és koordinátákkal (példák a scriptből):
- 3.0s: (640, 360) — közép
- 4.2s: (160, 120) — bal felső
- 5.4s: (1120, 120) — jobb felső
- 6.6s: (180, 600) — bal alsó
- 7.8s: (1100, 600) — jobb alsó
- 9.0s: (640, 100) — felső közép
- 10.0s: (380, 380) — bal közép
- 11.0s: (900, 380) — jobb közép
- 12.2s: (640, 620) — alsó közép
- 13.2s: (640, 300) — közeli közép
- A script a Playwright sync API‑ját használta: Chromiumot elindította, új contextet hozott létre record_video_dir = "vids" beállítással, majd a page.goto után a megadott időpontokban mouse.click hívásokkal aktiválta az effektet. A végén a context és a böngésző bezárult.
A szerző megjegyzi, hogy a Playwrighttal rögzített videó pontosan azt adta, amire szüksége volt a záródiához.
Konklúzió
A példa bemutatja, hogyan lehet nyelvi modellekkel (Claude Opus 5.5) generált interaktív HTML5 animációt gyorsan videóvá alakítani automatizált böngészővezérléssel (Playwright), így egyszerűen előállítható vizuális tartalom prezentációkhoz. A konkrét esetben a workflow három kakapófotóból indult, HTML5 canvas animáció jött létre, majd egy rövid Playwright script készített egy 15 másodperces videót, amely a konferencia záródiáján szerepelt.
Címkék
animation, speaking, ai, kakapo, playwright, generative-ai, llms, anthropic, claude, claude-code
