Cara Membuat Animasi dengan Claude AI: SVG, CSS, dan Batas Fiturnya

Istilah “animasi dengan Claude” dapat berarti meminta Claude menulis SVG, HTML/CSS, atau React yang bergerak, lalu melihat hasilnya sebagai Artifact atau di browser. Dokumentasi Anthropic yang ditinjau menjelaskan Artifacts untuk konten mandiri seperti SVG, website satu halaman, diagram, dan aplikasi React. Pencarian dokumentasi resmi tidak menemukan produk khusus bernama “Claude Motion”. Jadi perlakukan nama tersebut sebagai sebutan workflow atau konten pihak ketiga, bukan fitur resmi yang sudah terverifikasi.

Pilih output sebelum menulis prompt

Artifact AI-powered memiliki batas berbeda dari website yang Anda host sendiri: dokumentasi Anthropic menyebut panggilan API eksternal dan penyimpanan persisten tidak tersedia pada pengalaman Artifacts yang dijelaskan, serta API teks memiliki keterbatasan. Karena itu, gunakan Artifact untuk membuat dan membagikan karya mandiri yang cocok dengan batas tersebut; jangan berasumsi ia adalah backend produksi.

Buat animasi orbit SVG dan CSS

Contoh berikut menampilkan lingkaran kecil mengitari inti, dengan gerak yang dapat dimatikan untuk pengguna yang memilih reduced motion. Minta Claude membuat SVG/CSS semantik atau elemen HTML sederhana; jangan meminta gambar UI yang meniru produk tanpa kebutuhan. Kode dapat dipreview di Artifact yang mendukung, atau disimpan sebagai berkas HTML dan dibuka di browser.

<svg viewBox="0 0 240 180" role="img" aria-labelledby="title desc">
  <title id="title">Ilustrasi orbit</title>
  <desc id="desc">Titik bergerak mengelilingi pusat</desc>
  <circle cx="120" cy="90" r="24" fill="#6da7cf"/>
  <g class="orbit">
    <circle cx="120" cy="35" r="7" fill="#d5e8f7"/>
  </g>
</svg>
<style>
  .orbit { transform-origin: 120px 90px; animation: spin 8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .orbit { animation: none; } }
</style>

Prompt yang menghasilkan aset mudah diedit

Buat satu ilustrasi animasi SVG/CSS bertema orbit untuk hero website studio teknologi. Output harus berupa satu HTML mandiri dengan viewBox responsif, tanpa library atau gambar eksternal. Sertakan title/description SVG yang bermakna, warna biru gelap dan aksen biru muda, gerak lambat dan halus, serta prefers-reduced-motion yang menghentikan animasi. Jangan menambahkan teks branding atau meniru logo. Setelah kode, jelaskan cara mengubah durasi, ukuran, dan warna serta keterbatasan browser.

Preview, edit, dan ekspor hasil

1. Minta Claude membuat source SVG/HTML dan buka preview Artifact bila tersedia pada akun.
2. Periksa source, bukan hanya preview; pastikan ukuran SVG dan selector CSS tidak bertabrakan dengan website.
3. Salin atau unduh source sesuai kontrol Artifact, lalu simpan ke file proyek lokal.
4. Buka di browser, cek layar kecil, reduced motion, keyboard untuk kontrol, dan console error.
5. Ekspor SVG sebagai aset bila animasi memang kompatibel dengan tempat tujuan; untuk video, gunakan tool render berbeda.

Dokumentasi resmi Artifacts membahas melihat source, menyalin atau mengunduh konten tertentu, dan publikasi/share. Kontrol ekspor tepatnya bergantung tipe Artifact dan interface saat ini. SVG beranimasi bukan format video; jika editor sosial menerima video saja, render komposisi menjadi MP4 dengan alat video. Jangan menyimpulkan ada tombol export tertentu tanpa memeriksa UI akun.

Saat preview berbeda dari website tujuan

Artifact berjalan dalam lingkungan produk yang dapat mengisolasi konten. CSS yang berhasil di sana belum tentu aman ketika ditempel ke proyek: selector global seperti `body`, `svg`, atau `h1` bisa mengubah halaman lain. Bungkus style dalam kelas komponen, hindari import font dari host yang tidak Anda percayai, dan periksa apakah kode memakai API browser yang tidak tersedia pada preview. Jika ada error, salin pesan tanpa data sensitif dan minta penjelasan minimal sebelum mengganti seluruh animasi.

Untuk menyimpan output, salin source ke file dengan ekstensi yang sesuai, misalnya `.svg` atau `.html`, lalu buka file tersebut secara lokal. Jika browser menampilkan XML sebagai teks, pastikan ekstensi dan mime type server sesuai. Pada komponen React, pindahkan markup ke component file dan pasang CSS module atau class yang konsisten dengan style proyek. Preview sebaiknya dilakukan kembali setelah aset masuk ke halaman target karena ukuran parent, overflow, dan font dapat mengubah komposisi.

Sebelum memakai SVG sebagai gambar eksternal, uji apakah environment tujuan menjalankan animasi CSS di dalamnya. Beberapa platform hanya menampilkan gambar statis atau membersihkan aturan animasi. Jika gerak penting untuk interaksi, tempatkan SVG langsung di dokumen atau gunakan komponen DOM setelah meninjau keamanan implementasinya. Sediakan frame statis sebagai fallback agar informasi tetap tersedia saat animasi tidak didukung.

Untuk animasi brand, tentukan dulu bagian mana yang boleh bergerak dan berapa lama loop berlangsung. Gerakan terus-menerus di dekat teks dapat mengganggu pembacaan, sehingga pertimbangkan memulai gerak setelah interaksi atau membuat durasi singkat lalu berhenti. Jangan gunakan strobe, kilatan cepat, atau parallax besar. Uji pada latar terang dan gelap serta periksa apakah bentuk tetap terbaca ketika ukuran SVG diperkecil.

Contoh pemakaian di brand dan website

• Logo atau pattern dekoratif: jaga gerak pelan, loop tidak mengganggu, dan jangan menyampaikan identitas merek hanya melalui animasi.
• Hero produk: animasikan satu elemen fokus, lalu pertahankan headline dan CTA sebagai HTML yang dapat dipilih dan dibaca.
• Story sosial: susun ulang komposisi untuk rasio portrait dan render video terpisah; tes teks tetap terbaca.
• Loading state: sediakan status teks untuk screen reader dan jangan membuat animasi seolah proses selesai.

Batasan yang perlu disebut apa adanya

Claude membantu menulis kode, bukan membuktikan kualitas gerak atau aksesibilitas. Periksa rendering browser, lisensi aset, kontras, reduced-motion, ukuran file, dan konflik CSS. Fitur Artifacts berubah dari waktu ke waktu; jika sebuah tutorial menyebut “Claude Motion”, cari halaman resmi yang menjelaskan nama, paket, ekspor, dan batas fitur sebelum mengandalkannya.

Untuk video motion graphics yang benar-benar dirender ke MP4, lanjutkan ke workflow Claude Code dan Remotion. Untuk efek antarmuka React siap integrasi, lihat tutorial React Bits.

Sumber: Anthropic Help Center — What are Artifacts and how do I use them?

Sumber: MDN — prefers-reduced-motion