Panduan aman membuat animasi UI dengan Claude Code

Mulai dari tujuan, bukan efek

Animasi UI yang aman dengan Claude Code tidak dimulai dari pertanyaan “efek apa yang terlihat keren”. Pertanyaan yang lebih penting adalah: kebingungan pengguna apa yang ingin dikurangi? Card yang muncul saat masuk viewport bisa menuntun perhatian. Respons singkat pada tombol bisa memberi tahu bahwa klik sudah diterima. State loading bisa membuat pengguna yakin bahwa aplikasi masih bekerja. Jika gerakan tidak membantu hal seperti itu, kemungkinan besar gerakan tersebut hanya menjadi gangguan.

Kesalahan pemula biasanya berupa prompt “buat halaman ini lebih animatif”. Claude Code dapat membuat demo yang terlihat menarik, tetapi halaman produksi punya batasan lain: lebar mobile, fokus keyboard, judul panjang, blok kode, iklan, tabel harga, state kosong, dan preferensi prefers-reduced-motion. Artikel ini memakai CSS dan JavaScript kecil untuk scroll reveal, feedback tombol, dan perubahan status tanpa menambah library besar.

Untuk konteks, baca juga Claude Code design system, Claude Code responsive design, dan Claude Code performance optimization. Referensi resmi yang dipakai adalah Claude Code docs, MDN CSS animation, MDN Intersection Observer API, MDN prefers-reduced-motion, dan web.dev CSS animations. Intersection Observer adalah API browser untuk mengetahui kapan elemen masuk viewport. prefers-reduced-motion menghormati pengguna yang meminta gerakan dikurangi pada sistemnya.

Prompt dengan batas jelas

Buat tugasnya kecil. Patch animasi lokal mudah direview; redesain seluruh halaman dengan banyak gerakan sulit diuji.

Tambahkan animasi UI ringan ke layar ini.
Scope hanya card sebelum CTA, section yang muncul setelah loading, dan feedback tombol simpan.
Jangan ubah komponen existing, routing, copy, atau design token.
Prioritaskan CSS dan helper JavaScript kecil. Jangan tambah library animasi tanpa alasan.
Kembalikan Use case, Pitfall, aksesibilitas, perilaku prefers-reduced-motion, dan hasil cek mobile 375px.

Prompt ini memberi Claude Code target, larangan, dan bukti yang harus dikembalikan. Pada situs yang sudah terbit, perubahan kecil lebih aman daripada efek besar. Product card, pricing table, dan form konsultasi adalah jalur konversi; animasi harus membuatnya lebih mudah dipahami, bukan lebih ramai.

Use case（contoh praktis）

Use case	Tujuan	Area animasi	Tanda berhasil
Artikel yang mengonversi	Membantu pembaca menemukan langkah berikutnya	Related card dan CTA	Alur membaca tetap tenang
Dashboard SaaS	Menjelaskan save, sync, loading, dan error	Tombol, toast, empty state	Makna tidak hanya lewat warna
Halaman produk	Mengarahkan perhatian ke harga dan benefit	Tabel perbandingan, offer card	CTA utama tetap terlihat
Review tim	Membuat diff Claude Code mudah diaudit	Scope dan checklist	Tujuan dan risiko tertulis

Use case pertama adalah artikel teknis. Setelah membaca kode, pembaca mungkin butuh template atau bantuan rollout untuk tim. Reveal halus di dekat produk ClaudeCodeLab atau training dan konsultasi Claude Code membantu tanpa terasa seperti banner yang memaksa. Jika CTA terus berdenyut, pembaca yang sedang menyalin kode akan terganggu.

Use case kedua adalah dashboard. Saat tombol simpan bereaksi singkat lalu teksnya berubah menjadi “Tersimpan”, pengguna tahu aksi diterima. Animasi tetap bukan satu-satunya sinyal. Teks, aria-busy, fokus, dan pesan error harus tetap ada.

Use case ketiga adalah halaman produk. Tabel harga dan perbandingan fitur padat informasi. Reveal bertahap bisa menuntun mata, tetapi urutan yang terlalu lambat menunda keputusan. Gerakan dekoratif biasanya cukup 200 sampai 500 ms. Feedback terhadap aksi pengguna harus terasa langsung.

Use case keempat adalah kerja tim. Minta Claude Code menjelaskan Use case yang dilayani setiap animasi dan Pitfall yang dihindari. Review jadi membahas tujuan, aksesibilitas, dan risiko, bukan sekadar selera visual.

Model implementasi

Pisahkan solusi menjadi tiga lapisan.

Lapisan	Tanggung jawab	Yang perlu dicek
HTML	Menandai elemen yang boleh bergerak	Heading, teks, dan CTA tetap bermakna
CSS	Mengatur opacity, jarak, durasi, easing	Memakai opacity dan transform
JavaScript	Mengatur timing dan cleanup	Ada reduced motion, fallback, observer disconnect

Dengan pola ini, HTML hanya menerima data-reveal dan class reveal. CSS memegang style motion bersama. JavaScript hanya menambah is-visible lalu berhenti mengamati. Pola ini tetap mudah dipakai di Astro, React, Next.js, atau halaman statis.

HTML siap salin

<section class="motion-demo" aria-labelledby="motion-demo-title">
  <p class="eyebrow">ClaudeCodeLab workflow</p>
  <h2 id="motion-demo-title">Rollout animasi UI yang aman</h2>
  <p>
    Tentukan tujuan, target, dan cara verifikasi sebelum meminta patch ke Claude Code.
  </p>

  <div class="motion-grid">
    <article class="reveal" data-reveal>
      <h3>Desain</h3>
      <p>Pilih satu Use case dan satu kondisi berhasil.</p>
    </article>
    <article class="reveal" data-reveal>
      <h3>Implementasi</h3>
      <p>Gunakan CSS variable dan helper JS kecil tanpa merusak UI existing.</p>
    </article>
    <article class="reveal" data-reveal>
      <h3>Verifikasi</h3>
      <p>Cek Pitfall, reduce motion, mobile, dan keyboard.</p>
    </article>
  </div>

  <a class="motion-cta reveal" data-reveal href="/id/training/">
    Diskusikan training Claude Code
  </a>
</section>

CSS siap salin

CSS ini fokus pada opacity dan transform. Animasi width, height, top, atau left lebih mudah memicu perhitungan layout. will-change dibatasi pada elemen reveal.

:root {
  --motion-duration: 420ms;
  --motion-distance: 16px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-border: #d8e2ee;
  --motion-bg: #ffffff;
  --motion-text: #182230;
  --motion-accent: #2563eb;
}

.motion-demo {
  color: var(--motion-text);
  max-width: 920px;
  margin: 48px auto;
  padding: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--motion-accent);
  font-weight: 700;
}

.motion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.motion-grid article {
  border: 1px solid var(--motion-border);
  border-radius: 8px;
  background: var(--motion-bg);
  padding: 16px;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--motion-accent);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.motion-cta:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .motion-demo {
    margin: 32px auto;
    padding: 16px;
  }

  .motion-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

JavaScript siap salin

Helper ini menampilkan elemen satu kali lalu berhenti mengamati. Jika Intersection Observer tidak tersedia, atau jika reduced motion aktif, konten langsung ditampilkan.

export function setupScrollReveal(root = document) {
  const targets = Array.from(root.querySelectorAll("[data-reveal]"));
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (targets.length === 0) {
    return () => {};
  }

  if (reduceMotion || !("IntersectionObserver" in window)) {
    targets.forEach((target) => target.classList.add("is-visible"));
    return () => {};
  }

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      }
    },
    {
      root: null,
      rootMargin: "0px 0px -10% 0px",
      threshold: 0.1,
    },
  );

  targets.forEach((target) => observer.observe(target));

  return () => observer.disconnect();
}

document.addEventListener("DOMContentLoaded", () => {
  setupScrollReveal();
});

Di Astro atau React, panggil setupScrollReveal() setelah komponen mount. Jika modal atau tab menambah konten belakangan, berikan container itu sebagai root supaya dokumen tidak discan ulang.

Contoh feedback tombol

Feedback terhadap aksi harus lebih singkat daripada animasi bacaan. Contoh ini memakai Web Animations API, tetapi pada reduced motion hanya mengubah teks dan state ARIA.

const button = document.querySelector("[data-save-button]");
const status = document.querySelector("[data-save-status]");

button?.addEventListener("click", async () => {
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  button.setAttribute("aria-busy", "true");
  status.textContent = "Menyimpan...";

  if (!reduceMotion) {
    await button.animate(
      [
        { transform: "scale(1)" },
        { transform: "scale(0.97)" },
        { transform: "scale(1)" },
      ],
      { duration: 180, easing: "ease-out" },
    ).finished;
  }

  await new Promise((resolve) => window.setTimeout(resolve, 300));
  button.setAttribute("aria-busy", "false");
  status.textContent = "Tersimpan";
});

Interface harus tetap dimengerti saat tidak ada gerakan. Teks berubah, fokus terlihat, dan assistive technology dapat membaca state dari DOM.

Pitfall（kesalahan konkret）

Pitfall pertama adalah tujuan yang kabur. “Biar terlihat premium” sulit diuji. “Tiga pricing card muncul saat masuk viewport dan tidak menutupi tombol beli” bisa diuji.

Pitfall kedua adalah durasi terlalu panjang. Pada artikel teknis, pembaca ingin cepat sampai ke kode. Pada halaman produk, pembaca ingin cepat membandingkan. Sequence yang lambat membuat halaman terasa berat.

Pitfall ketiga adalah overflow horizontal di mobile. translateX(40px) bersama shadow, table, atau code block dapat membuat scroll horizontal di 375px. Lebih aman memakai translateY() dan menguji 375px, 414px, serta tablet.

Pitfall keempat adalah menyampaikan error hanya lewat warna atau getaran. Sertakan teks error, aria-describedby, fokus yang jelas, dan label yang tetap terlihat.

Pitfall kelima adalah menambah library terlalu awal. Timeline kompleks mungkin perlu tool khusus, tetapi reveal card, toast, dan feedback tombol biasanya cukup dengan CSS serta JS native.

Pitfall keenam adalah menerima patch agent karena terlihat bagus. Minta Claude Code menuliskan file yang berubah, CSS variable baru, perilaku aksesibilitas, alternatif yang ditolak, dan checklist manual.

Review dan validasi

Setelah implementasi, kirim prompt khusus review.

Review hanya diff saat ini. Jangan implementasikan fitur baru.
Laporkan dengan urutan:
1. Risiko aksesibilitas
2. prefers-reduced-motion yang hilang
3. Risiko layout mobile 375px
4. Kekhawatiran performance
5. Konflik dengan CSS atau komponen existing
6. Pemeriksaan manual sebelum release
Bersikap ketat dan sebut selector atau file jika bisa.

Pemeriksaan manusia mencakup motion normal, reduced motion, navigasi keyboard, mobile width, jaringan lambat, dan data kosong. Di DevTools, emulasikan prefers-reduced-motion lalu pastikan informasi tetap jelas. Pastikan CTA produk dan training tetap terlihat dan mudah disentuh. Pastikan code block scroll di dalam areanya sendiri, bukan memperlebar seluruh halaman.

Hubungan dengan konversi

Animasi UI tidak menghasilkan revenue sendirian. Tugasnya membantu pembaca menuju langkah berikutnya tanpa kehilangan konteks. Developer individu bisa mencari template dan checklist di produk ClaudeCodeLab. Tim yang ingin memakai Claude Code di repo nyata mungkin membutuhkan permission, CI, review policy, CLAUDE.md, dan workshop melalui training dan konsultasi Claude Code.

Saat diuji pada layout mirip artikel, perubahan yang paling bernilai bukan animasi hero besar. Yang lebih berguna adalah related resource card dan CTA yang muncul sekali dengan tenang di akhir konten. Memisahkan implementasi, review, dan perbaikan membuat diff lebih kecil dan risiko lebih cepat terlihat.

Hasil setelah dicoba

Workflow ini diuji pada halaman yang mirip artikel. Pass pertama hanya meminta card data-reveal, dukungan reduced motion, dan feedback pendek pada tombol simpan. Pass kedua hanya review: lebar 375px, fokus keyboard, data kosong, dan visibilitas CTA.

Hasilnya lebih mudah diaudit daripada prompt besar “animasikan seluruh halaman”. Membatasi gerakan pada opacity dan transform: translateY() mengurangi masalah mobile. Peningkatan utama datang dari kebiasaan meminta setiap gerakan menjelaskan Use case, Pitfall, fallback tanpa motion, dan pemeriksaan manual.