Cara Membuat Situs Web Beranimasi di Claude Code dalam Semalam

Pelajari lebih lanjut tentang cara bekerja dengan model di dokumentasi Ailoot.

Mengapa Situs Web Buatan AI Langsung Terlihat dari Layar Pertama?#

Anda meminta agen membuat landing page. Empat puluh menit kemudian, Anda sudah memiliki situs yang berfungsi: bagian-bagiannya sudah ada, tata letaknya responsif, dan tombol-tombolnya berfungsi. Namun, hampir seketika Anda merasa pernah melihatnya di tempat lain.

Penyebabnya bersifat mekanis. Model dilatih dengan koleksi besar halaman jadi, dan koleksi itu memiliki bias yang kuat.

Ribuan tutorial dan templat awal menyalin warna itu, sehingga sampelnya menjadi bias, dan model pun belajar bahwa tombol berwarna ungu. Mekanisme yang sama berlaku untuk font, sudut membulat, dan bayangan.

Sementara itu, “tampilan AI” telah berubah. Dalam dokumentasi skill frontend-design, Anthropic kini menjelaskan tampilan yang berbeda.

Akar masalahnya: slop terjadi ketika tidak ada sesuatu yang spesifik untuk ditiru, sehingga model sekadar merata-ratakan semua gaya web.

“Slop” di sini berarti karya buatan mesin yang dirata-ratakan menjadi hasil generik tanpa gaya yang khas.

Pelajaran praktisnya adalah bahwa agen membutuhkan tata bahasa desain yang sempit, bukan tugas terbuka. Jika Anda berkata “buat agar terlihat indah”, agen akan mengambil rata-ratanya. Jika Anda memberinya palet tertentu, beberapa jenis huruf, dan satu elemen visual yang menentukan, agen akan membangun dari hal-hal tersebut.

Gerakan adalah sinyal paling kentara dalam hal ini. Bahkan halaman statis dengan tipografi sempurna tetap terlihat seperti templat, karena situs web yang hidup terasa dinamis: elemen muncul saat Anda menggulir, kursor mengubah sesuatu, dan transisi antarlayar tidak terputus secara mendadak.

Apa yang Anda Perlukan untuk Membuat Situs Web Beranimasi di Claude Code?#

Mari kita bahas alat-alatnya satu per satu, karena banyak kebingungan soal harga.

GSAP adalah pustaka animasi yang digunakan oleh banyak situs web pemenang penghargaan. Webflow membelinya pada Oktober 2024, dan rumor bahwa semuanya menjadi gratis segera bermunculan. Itu tidak sepenuhnya benar: saat itu, Webflow mengonfirmasi bahwa harga yang sudah berlaku akan tetap dipertahankan. Pustaka ini menjadi gratis pada akhir April 2025 dengan versi 3.13.

Rilis 3.13 secara khusus menyebutkan bahwa plugin yang sebelumnya berbayar seperti SplitText dan MorphSVG juga menjadi gratis, termasuk untuk penggunaan komersial. Versi terkini per Juli 2026 adalah gsap@3.15.0.

Gratis bukan berarti sumber terbuka. Lisensinya tetap proprieter dan melarang pembuatan editor animasi visual berbasis GSAP yang bersaing dengan Webflow. Tidak ada batasan untuk situs web, proyek klien, atau pekerjaan komersial.

Skill frontend-design dari Anthropic adalah sekumpulan instruksi yang mengubah cara agen mengerjakan antarmuka. Deskripsi repositorinya berbunyi:

Di dalamnya terdapat metode dua tahap. Pertama, agen menyusun sistem token: empat hingga enam warna bernama, jenis huruf untuk setidaknya dua peran, skema tata letak dalam sketsa teks, serta satu elemen visual yang menentukan halaman. Kemudian, agen mengkritik rencananya sendiri berdasarkan tugas yang diberikan. Baru setelah itu agen menulis kode.

Kiriman itu menyebut 75 skill, deskripsi repositori mencantumkan 78, dan pohon file saat ini berisi 91. Penulisnya berterus terang soal ini: periksa repositorinya dengan perintah pencarian karena deskripsinya sudah kedaluwarsa.

Bagaimana Cara Membuat Claude Code Berhenti Menghasilkan Templat?#

Mari mulai dari file aturan karena aturan ini berlaku pada setiap permintaan dan tidak memerlukan biaya.

Blok pagar pengaman anti-templat merupakan titik awal yang berguna. Logikanya sederhana: cantumkan pilihan spesifik yang cenderung dipilih model secara bawaan, lalu larang pilihan itu secara eksplisit.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

Blok tersebut sengaja ditulis dalam bahasa Inggris: model mengikuti instruksi teknis singkat dengan lebih akurat dalam bahasa dokumentasi.

Baris tentang animasi muncul bersama larangan soal warna dan bayangan karena suatu alasan. Opacity pada layar pertama berdampak langsung pada metrik kecepatan, seperti yang akan kita bahas nanti.

Selanjutnya, skill. Skill resmi Anthropic dapat dipasang melalui plugin:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Satu hal yang perlu diketahui: skill desain tidak dapat dipasang satu per satu; plugin example-skills memasang dua belas skill sekaligus. Jika Anda hanya menginginkan satu, salin foldernya secara manual—Claude Code akan mengenalinya tanpa perlu memulai ulang sesi:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Skill lain dalam koleksi ini yang mungkin berguna: theme-factory dengan sepuluh tema siap pakai dan konfirmasi wajib dari manusia sebelum menerapkannya, web-artifacts-builder untuk membangun dengan React dan komponen siap pakai, serta algorithmic-art untuk grafik generatif. Artikel terpisah menjelaskan secara terperinci cara memilih skill untuk suatu tugas: cara memilih skill untuk Claude Code.

Aturan dan skill bekerja bersama: aturan melarang pilihan yang buruk, sedangkan skill menerapkan proses—sistem lebih dulu, kritik berikutnya, kode terakhir.

Di Mana Menemukan Arahan Visual dan Prompt Animasi Siap Pakai?#

Teknik motion yang disertakan adalah: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Sebagai nonprogrammer, arahan visual siap pakai lebih penting bagi Anda. Alih-alih menggunakan instruksi samar “buat yang modern”, pilih salah satu arahan berikut dan berikan tata bahasa sempit yang belum dimiliki model:

• clean-minimal-beige-light-mode - minimalisme beige terang
• dark-glass-clean-layout - kaca gelap
• documentary-brutalist-agency - gaya dokumenter brutalistis
• editorial-portfolio-chapters - portofolio terbagi menjadi beberapa bab seperti majalah
• orange-clean-paper-saas - situs layanan bergaya kertas dengan aksen oranye
• solar-duotone-bold - tampilan dua warna yang berani
• tech-green-dark-mode-modern - gaya teknologi gelap dengan warna hijau
• light-mode-paper-technical - kertas teknis terang

Ada juga skill teknis untuk grafik dan efek 3D: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Repositori tersebut belum menyediakan perintah instalasi—penulis menyatakan dengan jelas dalam roadmap bahwa perintah itu akan ditambahkan setelah metode integrasinya ditetapkan. Satu-satunya petunjuk untuk Claude Code adalah:

Salah satu opsi instalasi ditampilkan di bawah. Perintah ini tidak ada di repositori; ini adalah rekomendasi instalasi:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Sekilas tentang pustaka prompt berbayar, karena sering ditanyakan. Layanan motionsites.ai menjual kumpulan prompt siap pakai untuk bagian-bagian situs: per Juli 2026, harganya 239 dolar per tahun atau harga promosi satu kali sebesar 349 dolar, bukan 759 dolar, tanpa paket bulanan. Nama penulisnya tidak dicantumkan dan tidak ada halaman “About”. Ada juga situs dengan nama yang hampir sama dalam bentuk tunggal, dan penyebutan kompatibilitas dengan Claude Code hanya ada di situs tersebut. Opsi ini patut diketahui.

Bagaimana Memberikan Dokumentasi GSAP Terbaru kepada Agen dalam Satu Baris?#

Masalah umum pada pustaka animasi adalah agen mengingat cara lama untuk menghubungkannya. Agen menulis impor dari jalur lama, mendaftarkan plugin dengan cara yang digunakan dua tahun lalu, lalu kodenya tidak berjalan.

Solusinya adalah memasukkan dokumentasi ke dalam konteks sendiri. GSAP menyediakannya dalam format yang ramah mesin:

https://gsap.com/llms.txt

Saat ini ukuran file tersebut sekitar 25 kilobyte. Setiap halaman dokumentasi juga tersedia dalam versi markdown—cukup tambahkan .md ke URL.

Dalam praktiknya, tampilannya seperti ini:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

Pustaka Motion (sebelumnya bernama Framer Motion) memiliki file yang sama, bahkan berukuran lebih besar. Motion didistribusikan dengan lisensi MIT dan tetap benar-benar merupakan sumber terbuka; versi terkini adalah motion@12.42.2. Jika proyek menggunakan React dan hanya membutuhkan animasi sederhana saat konten muncul, Anda dapat memilih Motion; untuk adegan gulir yang kompleks, gunakan GSAP dengan plugin ScrollTrigger.

Ada juga opsi khusus browser yang tidak menggunakan pustaka. Transisi status halaman melalui View Transitions API mulai didukung secara baseline pada 14 Oktober 2025—tetapi hanya dalam satu halaman; versi lintas halaman sama sekali tidak didukung di Firefox. Animasi gulir CSS belum didukung secara baseline: Chrome mendukungnya, Safari baru-baru ini mempelajarinya, tetapi di Firefox Anda harus mengaktifkannya secara manual di pengaturan, sehingga fitur itu tidak akan berfungsi bagi pembaca biasa. Minta agen memeriksa terlebih dahulu apakah browser mendukungnya, dan jika tidak, biarkan transisi standar tetap digunakan.

Bagaimana Mengubah Situs Web yang Anda Sukai Menjadi Prompt?#

Cara paling umum menjelaskan keinginan Anda adalah dengan menunjukkan contoh. Cara itu tidak langsung berhasil pada agen: agen tidak melihat situs web, melainkan teks.

Skill video-to-superprompt menjembatani kesenjangan tersebut. Deskripsi repositorinya: mengubah referensi video menjadi prompt terperinci untuk direka ulang atau dijadikan inspirasi. Di dalamnya, rekaman dianalisis berlapis-lapis: narasi, tata letak, gerakan, tipografi, dan grafik 3D. Hasilnya adalah satu prompt siap pakai.

Aturan utamanya dinyatakan dengan tegas:

Skill kedua, html-to-interaction-prompts, bekerja dengan kode sumber: skill ini menemukan semua yang bergerak—reaksi kursor, grafik 3D, efek gulir, lapisan yang bergerak dengan kecepatan berbeda—lalu memecah halaman menjadi prompt terpisah, satu untuk setiap bagian, tombol, status hover, atau efek. Prinsipnya adalah memperlakukan perilaku sumber sebagai kebenaran dan tidak mengarang efek dari tangkapan layar jika kodenya tersedia.

Skill ketiga, stitched-full-page-capture, mengatasi masalah praktis. Tangkapan layar penuh biasa untuk situs dengan pemuatan lambat dan grafik 3D akan tampak abu-abu dan kosong karena gambar diambil sebelum halaman selesai dirender. Skill ini menggulir halaman layar demi layar, menunggu semuanya stabil, lalu menyatukan hasilnya.

Ada juga cara tanpa rekaman layar: hubungkan agen ke pustaka contoh antarmuka langsung melalui MCP. Server resmi Mobbin dapat dipasang dengan satu perintah:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Setelah itu, buka sesi baru, pilih server dari daftar, lalu masuk melalui browser. Agen mendapat akses ke tangkapan layar aplikasi nyata yang berfungsi: ada lebih dari 621,500 layar yang tercantum. Ini adalah tangkapan layar produk jadi, bukan komponen atau kode. Catatan penting: server Mobbin tidak berfungsi pada paket gratis; server ini tersedia pada paket berbayar (per Juli 2026). Ada artikel terpisah tentang Google Stitch mengenai cara menghubungkan layanan eksternal ke agen, dengan metode yang sama untuk menghadirkan sistem desain ke Claude Code.

Langkah demi Langkah: Situs Web Beranimasi dalam Semalam#

1. Siapkan proyek

   Jika belum memiliki proyek, mulailah dengan folder kosong. Buat foldernya, buka di terminal, lalu jalankan claude di sana. Untuk prompt pertama, minta kerangka awal: “buat kerangka situs satu halaman untuk bisnis saya (jelaskan bisnisnya), HTML dan CSS biasa, tanpa pustaka.” Sejumlah file akan muncul—itulah akar proyek, tempat semua pekerjaan selanjutnya berlangsung.

2. Masukkan aturan ke CLAUDE.md

   Salin blok Anti-Generic Guardrails ke file CLAUDE.md di akar proyek. Jika file itu belum ada, minta agen membuatnya. Aturan tersebut ditulis untuk Tailwind; jika kerangka awal Anda menggunakan CSS biasa, beri tahu agen, “terapkan prinsip-prinsip ini ke CSS biasa”—makna aturannya tidak berubah. Lihat uraian empat aturan CLAUDE.md untuk mengetahui cara kerja file itu sendiri dan hal lain yang dapat dimasukkan ke dalamnya.

3. Pasang skill frontend-design

   Gunakan plugin example-skills atau salin folder frontend-design, seperti yang dijelaskan di atas. Anda dapat memeriksa apakah skill sudah dimuat dengan perintah /doctor.

4. Pilih satu arahan visual

   Satu saja, bukan dua atau tiga. Mencampur gaya dokumenter brutalistis dengan minimalisme beige akan menghasilkan perataan yang justru ingin Anda hindari.

5. Buat halaman statis

   Tanpa satu pun animasi. Tipografi, jarak, dan grid harus didahulukan. Minta agen memulai pratinjau lokal dan buka alamat yang diberikannya. Untuk melihatnya di ponsel, katakan, “jalankan agar bisa dibuka di perangkat lain pada jaringan saya”, dan agen akan memberikan alamatnya.

6. Tambahkan satu adegan gerak

   Satu saja. Biasanya itu adalah layar pertama: judul muncul, dan lapisan latar bergerak lebih lambat daripada latar depan. Berikan llms.txt pustaka itu kepada agen dan jelaskan adegannya secara konkret—apa yang bergerak, ke mana, dan selama berapa milidetik. Jangan ubah opacity pada layar pertama; bagian terpisah di bawah menjelaskan alasannya.

7. Tambahkan aturan reduced-motion

   Terapkan aturan CSS serta pengaturan reduced-motion JavaScript dari bagian aksesibilitas. Periksa halaman dengan reduced motion aktif sebelum publikasi.

8. Terbitkan dan periksa kecepatannya

   Terbitkan ke layanan hosting statis gratis mana pun—Vercel, Netlify, atau GitHub Pages. Minta agen, “terbitkan proyek ini di Vercel dan berikan tautannya.” Setelah diterbitkan, jalankan URL hasilnya melalui PageSpeed Insights: layanan itu bekerja dengan URL publik dan tidak dapat melihat halaman lokal. Periksa “Largest Contentful Paint”—waktu yang diperlukan untuk merender elemen terbesar; zona hijau adalah hingga 2.5 detik. Agen dapat mengukur versi lokal sebelum penerbitan: Chrome DevTools MCP akan membukanya di Chrome dan menampilkan metrik yang sama.

Langkah keenam adalah bagian yang paling mudah merusak hasil dari lima langkah sebelumnya.

Mengapa Animasi Berlebihan Membuat Situs Web Terlihat Lebih Seperti Hasil AI?#

Di sinilah pemikiran hampir semua orang yang tertarik pada topik ini mulai keliru: terlalu sedikit animasi terlihat murahan, jadi Anda perlu menambahkan lebih banyak.

Pernyataan itu ada di dalam skill frontend-design yang Anda pasang untuk memperbaiki desain. Anthropic memperingatkan agar tidak berlebihan menggunakan animasi di dalam alat yang dipakai agen untuk menghias halaman.

Anthropic juga menyebut teknik stok lainnya: angka besar dengan teks kecil dan aksen gradasi sebagai tanggapan standar untuk tugas apa pun; blok bernomor seperti 01 / 02 / 03, yang hanya tepat jika memang ada urutan.

Contoh penggunaan berlebihan dalam praktiknya: agen diberi tugas “tambahkan animasi”, lalu menambahkan efek kemunculan saat digulir pada setiap bagian. Judul bergeser masuk, tiga kartu muncul satu per satu, testimoni bergeser dari samping, dan footer memudar masuk. Setiap efek terlihat baik jika berdiri sendiri. Namun, jika digabung, hasilnya adalah halaman yang tidak pernah berhenti bergerak dan tidak menekankan apa pun.

Situs web yang hidup bekerja dengan cara berbeda: satu adegan yang disengaja, biasanya di layar pertama, lalu gerakan secukupnya. Gerakan berfungsi seperti penekanan—masuk akal selama hanya diterapkan pada satu kata.

Dari situ, Anda mendapat aturan untuk prompt. Rumuskan seperti ini: “buat satu adegan di layar pertama dan biarkan yang lain tetap statis.” Hanya berbeda beberapa kata dari “tambahkan animasi”, tetapi hasilnya jauh lebih baik.

Bagaimana Animasi Memperlambat Situs Web?#

Tiga metrik yang digunakan Google untuk mengevaluasi halaman adalah: waktu untuk merender elemen terbesar—tidak lebih dari 2.5 detik; respons terhadap interaksi—tidak lebih dari 200 milidetik; dan pergeseran tata letak—tidak lebih dari 0.1. Metrik tersebut diukur pada persentil ke-75 kunjungan nyata.

Saat menentukan elemen terbesar, browser mengecualikan elemen dengan opacity nol—elemen yang tidak terlihat oleh pengguna—dari kandidat.

Mari kita uraikan mengapa hal ini penting. Secara bawaan, agen membuat efek kemunculan seperti ini: agen mengatur opacity sebuah bagian ke nol, lalu menghapus pengaturan tersebut saat bagian itu masuk ke area pandang. Jika efek itu ada di layar pertama, gambar mungkin sudah sepenuhnya dimuat dan didekode, tetapi metrik tetap tidak menghitungnya sampai proses render dimulai. Dampaknya lebih buruk jika skrip menghapus opacity setelah pemuatan—metrik kemudian menunggu seluruh skrip selesai.

Ada dua cara memperbaikinya. Anda dapat memulai efek kemunculan dari opacity kecil yang bukan nol, alih-alih nol, agar render awal ikut dihitung. Atau, biarkan opacity pada layar pertama dan animasikan pergeserannya saja.

Masalah kedua adalah properti mana yang murah untuk dianimasikan dan mana yang mahal.

Sederhananya: browser menyusun gambar dalam lapisan, dan perubahan posisi serta opacity terjadi pada langkah terakhir yang paling murah. Hal lainnya membuat browser menghitung ulang halaman. Pengukuran dari dokumentasi yang sama: animasi menggunakan offset top dan left memerlukan 37 milidetik untuk tata letak dan 79 untuk rendering; efek visual yang sama melalui transform memerlukan nol untuk keduanya.

Dan inilah kontradiksi yang perlu diingat: opacity murah untuk dikompositkan, tetapi membuat elemen tidak memenuhi syarat untuk metrik kecepatan. Jadi, animasi yang murah bagi browser dan aman bagi performa adalah dua hal yang berbeda.

Satu hal lagi tentang properti will-change, yang sering ditambahkan agen “untuk optimasi”. Dokumentasi MDN menyatakan sebaliknya:

Dokumentasi itu juga menyatakan bahwa properti tersebut dimaksudkan sebagai pilihan terakhir untuk masalah performa yang sudah ada. Properti ini tidak berfungsi sebagai pencegahan. Baris seperti will-change: transform, opacity pada lima puluh elemen merupakan tanda khas kode hasil generasi.

Kisahnya lebih sederhana untuk pergeseran tata letak. Dokumentasi Google tidak menyalahkan animasi; sebaliknya, transisi yang cermat membantu memperbarui konten tanpa mengejutkan pembaca. Caranya tetap sama: ubah skala dengan transform alih-alih width dan height, lalu pindahkan elemen dengan offset alih-alih koordinat.

Bagaimana dengan Orang yang Mengalami Dampak Fisik akibat Gerakan?#

Bagian ini penting bukan hanya demi kesopanan. Orang-orang yang menjadi sasaran pasar pemilik bisnis justru berusia empat puluh tahun ke atas.

Bagi penyandang gangguan vestibular, animasi gulir

Anda dapat mengatasinya dengan tiga baris gaya:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Ada tiga hal yang perlu diingat.

Jadikan animasi sebagai perilaku bawaan lalu nonaktifkan di dalam aturan ini—dengan begitu, halaman akan mengalami degradasi dengan lebih aman daripada jika Anda melakukan sebaliknya.

Spesifikasinya menyebut “menghapus, mengurangi, atau mengganti”—menghapus sepenuhnya bahkan bukan pilihan pertama. Mengganti gerakan masuk yang tajam dengan fade singkat lebih baik daripada mematikannya sepenuhnya: menonaktifkan semua animasi akan merusak indikator pemuatan dan bilah progres.

Animasi yang digerakkan JavaScript memerlukan penanganan preferensi sendiri; penimpaan durasi CSS tidak membatalkan timeline GSAP. Sekadar menyimpan matchMedia(...).matches pada variabel tidak melakukan apa pun jika pengaturan tidak bercabang berdasarkan nilai itu. Untuk GSAP, biarkan elemen terlihat pada HTML/CSS biasa, lalu buat gerakan hanya ketika pengguna mengizinkannya:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

Judul tidak boleh memiliki gaya dasar tersembunyi atau tergeser. Dengan reduced motion aktif, judul tetap terlihat dan statis. Jika preferensi berubah saat halaman terbuka, GSAP mengembalikan animasi ketika kueri tidak lagi cocok. mm.revert() juga menghapus animasi yang dikumpulkan saat pembersihan. Pada Motion, terapkan cabang setara dalam pengaturan pustaka itu; aturan CSS saja tidak cukup. Lihat dokumentasi siklus hidup dan cleanup GSAP matchMedia.

Ada juga kriteria aksesibilitas formal yang perlu diingat. WCAG 2.2.2, kriteria Level A, mengharuskan pengguna dapat menghentikan apa pun yang bergerak, berkedip, atau bergulir secara otomatis, berlangsung lebih dari lima detik, dan ditampilkan bersama konten lain. Ketentuan ini berlaku untuk carousel yang berputar otomatis dan marquee tanpa akhir, yang sering ditambahkan oleh agen.

Tujuh Hal yang Bisa Membuatnya Gagal#

1. Layar pertama disembunyikan sampai memudar masuk. Elemen dengan opacity nol tidak dihitung sebagai kandidat untuk metrik render. Ini kesalahan paling merugikan karena berdampak pada metrik yang memengaruhi peringkat pencarian.

2. Semuanya dianimasikan. Setiap bagian bergeser masuk, setiap kartu muncul. Anthropic menyatakan dengan jelas bahwa hal ini meningkatkan kesan desain buatan.

3. Scrolljacking. Ini terjadi ketika situs web mengganti perilaku normal roda mouse dengan logika “sinematik” sendiri.

Dalam studi yang sama, sebagian besar peserta mengalami setidaknya disorientasi ringan.

4. Properti tata letak dianimasikan. Koordinat dan dimensi digunakan alih-alih transform. 37 dan 79 milidetik dibandingkan nol.

5. Animasi terlalu lama. Rentang yang berguna adalah 100 hingga 400 milidetik, dengan 400 milidetik sudah sangat lambat dan hanya cocok untuk gerakan besar. Agen biasanya menggunakan satu detik penuh secara bawaan.

Menurut temuannya, rentang yang berguna adalah 100 hingga 400 milidetik; 400 milidetik sudah sangat lambat dan hanya cocok untuk gerakan besar. Agen biasanya menggunakan satu detik penuh secara bawaan.

6. Tidak ada aturan reduced-motion. Agen tidak akan menambahkannya sendiri.

7. Situs web makin lambat setiap kali berinteraksi. Masalah khusus React: animasi yang dibuat tanpa referensi ke elemen dan tanpa pembersihan akan berlipat ganda setiap kali komponen diperbarui. Halaman perlahan mulai melambat tanpa sebab yang jelas.

Ada jebakan kedelapan. Pendekatan “agen mengambil tangkapan layar lalu memperbaiki yang terlihat” sangat bagus untuk halaman statis, tetapi pada elemen beranimasi pendekatan itu menjebak agen dalam siklus edit tanpa akhir: agen melihat bingkai di tengah animasi, mengira itu bug, memperbaikinya, lalu melihat bingkai lain di tengah animasi. Selain itu, setiap tangkapan layar menghabiskan konteks.

Berapa Biayanya, dan Bagaimana Menghindari Menghabiskan Jatah Bulanan untuk Satu Situs Web?#

Kisah yang lazim di komunitas vibe-coding berbahasa Inggris: seseorang membuat halaman mencolok dengan efek menggulir menembus ruang, memublikasikan hasilnya, lalu diskusi mengungkap bahwa situs itu menghabiskan seluruh jatah bulanannya.

Hal itu memang sudah bisa diduga. Animasi lebih mahal daripada pekerjaan tata letak biasa karena beberapa alasan sekaligus. Hasilnya tidak dapat diverifikasi dengan membaca kode; dibutuhkan iterasi. Setiap perubahan mengharuskan file dibaca ulang. Dan siklus tangkapan layar pada elemen bergerak menambah tahap yang tidak perlu.

Yang membantu:

Buat satu adegan pada satu waktu dan tetapkan hasilnya. Permintaan sekali jalan untuk “tambahkan animasi di seluruh situs” pasti membuat pengeluaran berlebihan. Anda dapat menonaktifkan verifikasi tangkapan layar pada elemen beranimasi dan memeriksanya secara visual sendiri. Jaga agar CLAUDE.md tetap singkat supaya aturan tidak menghabiskan konteks pada setiap permintaan. Berikan llms.txt pustaka tersebut kepada agen terlebih dahulu, atau agen akan mengarang metode koneksi yang sudah kedaluwarsa lalu men-debug hasil rekaannya sendiri.

Artikel mengapa Claude Code membaca ulang seluruh proyek menjelaskan ke mana token digunakan saat mengerjakan proyek; artikel cara menghindari menghabiskan jatah Claude Code membahas cara mengendalikan penggunaannya.

Apa Selanjutnya?#

Buat halaman pertama Anda dengan mengikuti delapan langkah tersebut. Pilih satu arahan visual, buat satu adegan di layar pertama, lalu periksa kecepatannya.

Untuk langkah berikutnya—Ailoot.