Hareketli çizimleri kodla üretmek

8 Ekim 2026'da Anthropic, Claude Motion'ı beta olarak yayınladı: bir anlatım tarif ediyorsun, Claude da animasyonu video üretmek yerine kod olarak kuruyor. Kelimeler, sayılar ve zamanlama düzenlenebilir kalıyor, çünkü hiçbir şey piksellere gömülmüyor.

Bu sitede o ürünü kullanmadım. Fikrini kullandım. Buradaki her hareketli çizimi, benim yönlendirmemle, Claude Code repomun içinde yazdı: zaman çizelgesi olan düz SVG (şekilleri koordinatlarla tanımlayan ve büyütülünce net kalan görsel biçimi). Bu yazı nasıl yapıldığını, gerçek sahneler sayfada çalışırken gösteriyor.

İlk sürümü neden attım

Anasayfada küçük "canlı demo"lardan oluşan bir ızgara vardı: yanıt akıtan sahte bir sohbet, test çalıştıran sahte bir terminal, sahte bir onay penceresi. HTML (web sayfasının yapısını tanımlayan işaretleme dili) ile çizilmiş minyatür arayüzlerdi.

AI (yapay zekâ) ile yapılmış her açılış sayfasına benziyorlardı. Sahte bir arayüz, kendisini ekran görüntüsü gibi okumanı ister, ama ekran görüntüsü değildir. Hepsini, ekranı taklit etmek yerine mekanizmayı gösteren çizimlerle değiştirdim.

Bu, o ızgaradaki CI (kod değişikliklerinde kontrolleri otomatik çalıştıran süreç) kapısı. Altı test grubu sırayla yeşile dönüyor, sonra çalışma exit 0 ile bitiyor:

Sahne başına tek saat

Bir sahne, elemanlardan oluşan bir liste; her elemanın kendi keyframe (animasyonda belirli bir andaki görünümü tanımlayan anahtar kare) izi var: ne zaman belirir, ne zaman hareket eder, ne zaman renk değiştirir. Bir sahnedeki bütün izler tek bir süreyi paylaşır.

Döngüyü temiz yapan bu tek kural. Her şey aynı anda sıfırlanıyor, yani sahne adım adım kaymak yerine bütün olarak yeniden başlıyor.

Animasyonu tarayıcı yapıyor. Her eleman, 0 ile 1 arasında anahtar zamanları olan bir SMIL (SVG içindeki öğeleri zaman çizelgesiyle hareketlendirme yöntemi) <animate> ya da <animateTransform> çocuğu taşıyor:

<g opacity="0">
  <animate attributeName="opacity" dur="7s" repeatCount="indefinite"
           keyTimes="0;0.03;0.07;0.9;0.96;1" values="0;0;1;1;0;0"/>
  <g>
    <animateTransform attributeName="transform" type="translate" dur="7s"
           repeatCount="indefinite" keyTimes="0;0.07;0.36;0.42;1"
           values="0 0;0 0;109.1 -63;102.2 -59;102.2 -59"/>
    <!-- bloğun üç yüzü -->
  </g>
</g>

Animasyon kütüphanesi yok, canvas yok. Çalışma zamanının tamamı site script'inde (belirli bir işi yapan kod dosyası) 17 satır: ekran dışındaki her sahneyi duraklat, azaltılmış hareket isteyen ziyaretçiler için de oynatmak yerine geç bir kareyi tut.

Bir sahne kısa bir fonksiyondur

O anahtar zamanlarını kimse elle yazmıyor. 43 satırlık bir kit, izometrik (üç boyut hissini sabit açılarla veren çizim biçimi) koordinatları path'lere çeviriyor ve zaman çizelgesi çağrılarını sarıyor: box, drawn, shown, move.

Bu, 404 (istenen sayfanın bulunamadığını bildiren durum kodu) sayfamdaki sahnenin sadeleştirilmiş hali. Bir blok, hedefe varmadan biten bir şeritte yürüyor, kenarda duruyor ve sarıya dönüyor:

const lost = (t, options) => {
  const P = iso(430, 70);          // orijini olan izometrik projeksiyon
  const D = 7;                     // sahnenin tek saati, saniye
  let out = box(P, 0, 110, 0, 60, 170, 4);              // şerit
  const cube = (cls) => box(P, 18, 244, 4, 24, 24, 18, cls);
  out += actor(
    move([[0.07, [0, 0]], [0.36, [109, -63]], [0.42, [102, -59]]], D),
    cube('') + shown(cube(' is-warn'), 0.44, D),        // sarı katman
  );
  out += shown(text(left(P, 0, 118, 4), '404', 'end'), 0.46, D);
  return svg('lost', W, H, out, options);
};

Ve o fonksiyonun çizdiği şey:

Durum değişiklikleri üst katmandır. Blok renk değiştirmiyor; üstünde sarı bir kopyası beliriyor. Böylece her elemanın kendi izi basit kalıyor, çoğu zaman tek bir opaklık eğrisi.

Çalışma döngüsü

Bir sahne yapmak dört adım ve yalnızca ilki tamamen bana ait:

1. Sahnenin ne göstermesi gerektiğini tek cümleyle söylüyorum. "Widget (sayfaya eklenen küçük işlevsel bileşen), değer kaydedilmeden önce varıyor; düzeltmeyle birlikte bir event (bir işlemin gerçekleştiğini bildiren olay) bekliyor."
2. Claude Code fonksiyonu yazıyor; kit'i kullanıyor ve İngilizce ile Türkçe etiketleriyle kaydediyor.
3. Bir script sahneyi seçilen karede donduruyor ve ekran görüntüsü alıyor. Bir döngü izleyerek incelenmez; zaman çizelgesinin %80'indeki bir kare incelenir.
4. Karenin gösterdiğini düzeltiyorum; neredeyse her zaman bir şeyin üstüne oturmuş bir etiket.

Bu sahne o döngüden geçti. İki script arasındaki yarışı, etrafındaki üç paragraftan daha iyi anlatıyor:

Süse dönüşmesini engelleyen kurallar

• Sahne başına tek fikir. Altyazı "ve ayrıca" gerektiriyorsa iki sahnedir.
• Yalnızca fikri taşıyan şey hareket eder. Yayılım ızgarasında plakalar değişiyor. Zemin değişmiyor.
• Yalnızca gerçek sayılar. Izgara 272'nin 271'i diyor, çünkü sayı bu.
• Aynı bilgiler kelimelerle. Her sahnenin, döngünün ne gösterdiğini söyleyen bir altyazısı ya da gizli bir paragrafı var. Çizim aria-hidden; erişilebilir sürüm metin.
• Yedi ile on bir saniye. Okumaya yetecek kadar uzun, ikinci turun ilkini doğrulayacağı kadar kısa.

Maliyeti

Bugün itibarıyla sayılar:

• 27 sahne, her biri iki dilde üretiliyor; yani 54 SVG dosyası ve sıkıştırmadan önce yaklaşık 335 KB.
• Dört dosyada 689 satır üretici kod.
• Anasayfada 14 sahne, hakkımda ve 404 sayfalarında birer tane, bu yazı dahil 11 yazıda bir figür.
• Yeni yazıların kapakları kendi sahnelerinin bir karesi; yani kart, kapak ve figür tek bir çizim.

Bedeli sayfa ağırlığı. Anasayfanın HTML'i, içinde 14 satır içi sahneyle gzip sonrası yaklaşık 66 KB. Bir portfolyo için kabul edilebilir; bir ürün sayfasında sahneleri talep üzerine yüklemeden bunu yapmazdım.

Nerede duruyor

Bu Claude Motion değil ve farklar gerçek.

• Dışa aktarma yok. Claude Motion bir MP4 veriyor. Bunlar yalnızca tarayıcıda çalışan SVG'ler. E-postada ya da bir RSS okuyucuda oynamıyorlar.
• Etiketler koordinatla yerleştiriliyor. Daha uzun bir Türkçe kelime bir çizgiyle çakışabiliyor ve bunu ancak ekran görüntüsü gösteriyor.
• Küçük ekranlar metni küçültüyor. 800 birim için çizilmiş bir sahne 360 pikselde sıkışık.
• Tek bir görsel dil. İzometrik çizgi çizimi mekanizmalara uyuyor. Kırk veri noktalı bir grafik için yanlış araç olurdu.

Üründen buraya taşınan, önem verdiğim kısım. Animasyon bir metin dosyası. Bir sayıyı, bir etiketi ya da bir süreyi diff (iki sürüm arasındaki değişiklikleri gösteren karşılaştırma) içinde değiştirebiliyor, kod gibi inceleyebiliyor ve sitedeki her sahneyi tek komutla yeniden üretebiliyorum.