Contoh Motion Graphics: Video Berbantuan AI yang Diurutkan menurut Fungsinya
Oleh Potto AI Team·
Contoh motion graphics diurutkan menurut tugasnya: film peluncuran, layar produk, kinetic type, cerita data, explainer dan logo reveal, masing-masing dari kreator yang disebut namanya.
Contoh motion graphics yang paling berguna diurutkan menurut tugas video itu, bukan menurut gaya visualnya: film peluncuran, layar produk yang dianimasikan, reel kinetic type, cerita data, explainer atau logo reveal. Setiap tugas punya durasi, rasio dan urutan gagasan sendiri, jadi "contoh yang bagus" hanya membantu kalau jenisnya memang tepat. Panduan ini memilih 21 contoh motion graphics dari pustaka video motion graphics AI di Potto, memilahnya ke enam tugas itu, lalu mencantumkan penulis, durasi, rasio aspek dan apa yang perlu diperhatikan untuk masing-masing.
Satu hal lebih dulu: tidak satu pun video ini dibuat oleh Potto. Semuanya dibuat dan dipublikasikan oleh kreator independen, yang disebut lewat handle X mereka di bawah. Potto mengumpulkannya supaya Anda bisa menonton, membaca prompt bila penulis membagikannya, lalu memulai video Anda sendiri dari gagasan itu. Deskripsi hanya memakai judul tiap video dan detail di halamannya (penulis, kategori, durasi, rasio, alat), karena tujuannya membantu Anda memilih apa yang dipelajari, bukan mengulas karya orang lain. Semua yang disebut tentang alat Potto sendiri berasal dari produk sebagaimana ia bekerja hari ini.
Apa yang termasuk motion graphics
Motion graphics adalah desain grafis yang bergerak: teks, bentuk, ikon, grafik dan gambar yang bergerak untuk menjelaskan sesuatu, mengumumkan sesuatu atau memberi wajah pada sebuah merek. Panduan Adobe tentang motion graphics mendefinisikannya sebagai "graphics with movement" dan menyebutnya "shorter pieces of animation that entertain or impart information", berbeda dari film animasi panjang yang punya tokoh dan alur. Artikel Wikipedia tentang mengatakan motion design biasanya dikaitkan dengan menggerakkan objek abstrak, teks dan elemen desain grafis lain.
Kedua sumber itu menamai tempat karya ini muncul: kredit pembuka film dan televisi, grafis siaran dan berita, iklan dan branding, tipografi animasi, desain antarmuka pengguna, serta video explainer dan promosi. Daftar itu disusun menurut industri. Panduan ini menyusun menurut tugas, karena saat membuat video pertanyaannya adalah "apa yang ingin saya sampaikan?" bukan "ini industri yang mana?". Enam tugas di bawah mengikuti kategori yang dipakai pustaka dan mencakup sebagian besar yang benar-benar dibutuhkan bisnis atau kreator.
Tugas
Apa yang dilakukannya
Pertanyaan yang biasanya dijawab
Peluncuran
Mengumumkan produk atau rilis
Apa yang baru, dan mengapa saya perlu peduli?
Layar produk
Menganimasikan sebuah antarmuka
Bagaimana tampilan dan cara kerja produk ini?
Kinetic type
Menggerakkan kata sebagai visual utama
Kalimat apa yang harus saya ingat?
Cerita data
Membuat angka atau tren tertanam
Apa yang berubah, dan seberapa besar?
Explainer
Mengajarkan gagasan secara bertahap
Bagaimana ini bekerja?
Animasi logo
Menampilkan tanda merek
Siapa yang membuat ini?
Bagaimana 21 contoh ini dipilih
Pustakanya besar dan terus bertambah, jadi panduan ini tidak mengutip jumlah total; halaman selalu menampilkan angka terkini. Untuk memilih contoh, panduan memakai empat saringan. Setiap karya harus punya penulis yang disebut, durasi dan rasio aspek yang tercatat, video yang bisa diputar, serta judul yang menjelaskan isi video. Di dalam tiap tugas, yang diutamakan adalah karya yang berbeda durasi, rasio dan alatnya, supaya yang terlihat adalah rentangnya, bukan satu pola yang berulang.
Dua fakta tentang seluruh pustaka layak diketahui sebelum contoh-contohnya. Keduanya berasal dari catatan pustaka yang diperiksa pada 2026-10-12, dan akan bergeser seiring karya baru ditambahkan:
Sebagian besar karya berformat 16:9. Sekitar empat dari lima karya adalah 16:9, kira-kira satu dari delapan adalah 9:16, dan sisanya 1:1. Setiap tugas di bawah mengikuti kemiringan yang sama, sesuai tempat orang menonton: situs web, presentasi dan X.
Durasi bergantung pada tugas. Median durasinya sekitar 9 detik untuk animasi logo, 15 untuk kinetic type, 30 untuk peluncuran, 35 untuk cerita data, 36 untuk layar produk dan 60 untuk explainer. Median per tugas muncul di setiap bagian.
21 karya itu muncul di bagiannya masing-masing di bawah, masing-masing tertaut ke halamannya, tempat Anda bisa memutarnya. Untuk setiap karya, panduan mencantumkan handle X penulis, durasi, rasio, alat bila halaman mencantumkannya, dan apakah penulis membagikan prompt. "Prompt dibagikan" berarti penulis menerbitkan prompt di halaman karya, jadi Anda bisa membacanya sebelum memutuskan untuk memakainya lagi.
Contoh film peluncuran
Film peluncuran mengumumkan sesuatu dan meminta penonton mengingat satu hal: namanya. Di antara video peluncuran di pustaka, median durasinya 30 detik, dan sekitar setengahnya 30 detik atau lebih pendek. Kategori ini juga yang sebaran rasionya paling lebar, dengan kira-kira satu dari lima berformat 9:16 untuk ponsel.
Reddit marketing tool launch video oleh @anthonyriera berdurasi 52,8 detik dalam 16:9. Halaman mencantumkan Remotion sebagai alatnya, renderer yang sama dengan yang dipakai Potto, sehingga ini rujukan yang berguna untuk melihat apa yang bisa dimuat film peluncuran berbasis kode pada durasi mendekati satu menit.
TypingMind showreel announces team features oleh @ann_nnng berdurasi 15,0 detik dalam 16:9, dibuat di canvas, dan penulis membagikan prompt. Judulnya menyebut isi, yaitu fitur tim, dan bentuknya, yaitu showreel.
CodePilot promo floats 17 model-provider logos oleh @op7418 berdurasi 50,0 detik dalam 16:9. Judulnya sendiri sudah menjadi brief yang tepat: satu perangkat visual yang diulang, 17 logo, dalam durasi 50 detik.
Yang perlu diperhatikan. Putar film peluncuran sekali tanpa suara dan catat detik saat nama produk pertama kali muncul. Lalu hitung berapa klaim terpisah yang dibuat film itu. Contoh di atas menyarankan aturan yang berlaku di seluruh kategori: semakin pendek filmnya, semakin sedikit klaimnya. Film 15 detik membawa satu gagasan dan satu nama; film 50 detik punya ruang untuk masalah, beberapa fitur dan kalimat penutup.
Pinjam dengan Potto. Pembuat video produk Potto membangun film peluncuran dari deskripsi atau tautan. Brief yang bekerja dengan baik menyebut audiens, durasi dan beat-nya:
Film peluncuran untuk aplikasi anggaran fiktif bernama Ledgerly, 30 detik, 16:9. Buka dengan masalah mencatat pengeluaran di spreadsheet, tampilkan tiga fitur, akhiri dengan nama aplikasi dan ajakan bertindak.
Contoh layar produk
Animasi layar produk menunjukkan antarmuka yang sedang melakukan sesuatu: daftar mengurutkan dirinya, dasbor terisi, ponsel menelusuri sebuah alur. Median durasi kategori ini 36 detik, tetapi setengah bagian tengah karya berjalan dari sekitar 24 sampai sekitar 67 detik, jadi ini yang paling beragam di antara keenam tugas. Di sinilah contoh 9:16 dan 1:1 paling berguna, karena alur aplikasi sering ditampilkan di ponsel.
Mac app onboarding sorts messages into one calm list oleh @dhruvalgolakiya berdurasi 13,4 detik dalam 16:9. Judulnya menyebut satu transformasi, pesan menjadi satu daftar, dan durasinya hanya menyisakan ruang untuk itu.
Yang perlu diperhatikan. Jeda di frame pertama yang menampilkan antarmuka dan tanyakan apa yang seharusnya dilihat penonton. Lalu lihat berapa lama tiap keadaan bertahan di layar. Animasi layar produk gagal ketika layar berubah sebelum mata menemukan perubahannya. Karena itu contoh terpendek di sini menunjukkan satu transformasi, dan yang lebih panjang mengelompokkan keadaannya menjadi langkah.
Pinjam dengan Potto.Video demo produk dimulai dari tangkapan layar yang Anda unggah, hingga delapan gambar, dokumen atau berkas audio per proyek. Adegan tangkapan layar memperbesar dan mengikuti jalur kursor, dan tiap adegan bisa membawa caption, jadi brief yang biasa adalah daftar langkah:
Demo produk untuk aplikasi faktur fiktif, 30 detik, 16:9. Pakai tiga tangkapan layar saya: buat faktur, kirim, lihat statusnya sudah dibayar. Satu caption pendek per tangkapan layar, tutup dengan nama aplikasi.
Contoh kinetic type
Kinetic type menempatkan kata yang bergerak sebagai visual utama. Ini tugas berbasis teks yang paling pendek: mediannya sekitar 15 detik, dan sekitar tujuh dari sepuluh karya berdurasi 30 detik atau kurang. Karena tidak ada antarmuka atau grafik yang membawa makna, tulisannya yang harus melakukannya.
Showreel opens on a bold Decision title card oleh @kenn berdurasi 15,0 detik dalam 16:9, dan penulis membagikan prompt. Ini showreel tipografi, jadi kartu judul adalah langkah pembukanya.
Slanted credit names glide over an orange grid oleh @goodside berdurasi 75,0 detik dalam 16:9, dengan prompt yang dibagikan. Pada durasi itu, perangkat yang diulang adalah daftar nama yang bergerak di atas satu latar.
Yang perlu diperhatikan. Bisukan video lalu bacalah. Kinetic type harus bekerja sebagai teks: jika kalimatnya lemah, gerakan tidak akan menyelamatkannya. Lalu nyalakan suara dan periksa apakah waktu tiap kata mengikuti bunyinya. Dua contoh 15 detik mengikat gerakannya pada kartu judul atau tempo, sedangkan dua contoh 75 detik mengandalkan struktur, daftar kredit dan judul bab, untuk menahan perhatian.
Pinjam dengan Potto. Adegan teks Potto masuk sesuai isyarat, dan adegan kutipan, judul serta daftar membawa baris pendek. Potto tidak menawarkan animasi huruf bebas, jadi riak 128 BPM berada di luar yang direndernya. Yang ditanganinya dengan baik adalah naskah pendek yang tiap barisnya mendapat layar sendiri:
Video teks kinetik, 15 detik, 16:9, gaya Bold Pop. Lima baris pendek, satu per layar, tentang tim yang merilis setiap Jumat. Akhiri dengan baris "Ship it."
Contoh cerita data
Cerita data membuat satu angka atau satu tren tertanam. Di antara video cerita data di pustaka, mediannya sekitar 35 detik, dan sebarannya lebar, dari 15 detik sampai jauh di atas satu menit. Kategori ini termasuk yang paling kecil, sehingga tempat ini cocok untuk mempelajari tiap contoh.
LLM release timeline tracks 2026 models month by month oleh @nummanali berdurasi 62,1 detik dalam 16:9, dibuat di canvas, dengan prompt yang dibagikan. Halaman menggambarkan animasi canvas yang menelusuri 2026 bulan demi bulan, jadi waktu adalah sumbunya.
Yang perlu diperhatikan. Temukan satu angka yang ingin diingat video itu, lalu periksa bagaimana video itu mendapatkannya: apa yang datang sebelumnya, dan apa yang ditampilkan sesudahnya. Tiga contoh memakai tiga perangkat berbeda untuk tugas yang sama. Satu menyatakan hasil, satu menelusuri linimasa, dan satu memasangkan angka dengan gambar dari apa yang diukurnya.
Pinjam dengan Potto. Adegan stat menampilkan satu angka besar, dan adegan grafik menggambar diagram batang atau donat dengan tiga sampai enam nilai yang bertambah. Jika Anda menulis angka ke dalam brief, video memakainya seperti yang tertulis, jadi cocokkan tiap angka dengan sumber Anda sebelum mengekspor. Halaman grafik animasi mengumpulkan lebih banyak contoh semacam ini:
Cerita data, 30 detik, 16:9. Rata-rata cangkir per hari di kedai kopi fiktif naik dari 120 pada Juni menjadi 190 pada September. Buka dengan pertanyaan, tampilkan empat bulan sebagai diagram batang, akhiri pada kenaikan 58%.
Contoh explainer
Explainer mengajarkan gagasan secara bertahap. Ini yang terpanjang di antara keenam tugas: median durasinya 60 detik, dan hanya sekitar satu dari lima yang berdurasi 30 detik atau kurang. Video explainer di pustaka juga punya rentang perlakuan paling lebar, dari pixel art sampai papan tulis yang digambar tangan.
Kinetic word cloud pitches an AI inference startup oleh @deedydas berdurasi 26,0 detik dalam 16:9, dibuat dengan SVG dan GSAP, dengan prompt yang dibagikan. Ini explainer terpendek di sini dan memampatkan sebuah pitch ke dalam satu perangkat yang bergerak.
Yang perlu diperhatikan. Explainer harus lulus uji kalimat: setelah satu kali menonton, bisakah Anda menyatakan gagasannya dalam satu kalimat? Perhatikan momen masalah berubah menjadi solusi, lalu hitung langkah antara momen itu dan akhir. Dua dari tiga contoh mengarah pada satu subjek kecil dan konkret (satu digit, satu alur onboarding) dan membiarkannya membawa seluruh pelajaran.
Pinjam dengan Potto. Struktur di balik sebagian besar explainer adalah masalah, solusi, cara kerja dan langkah berikutnya, yang dibahas secara rinci di panduan apa itu explainer video, dan 12 contoh explainer video menguraikannya menurut urutan adegan.
Pembuat video explainer Potto bisa dimulai dari topik, tautan atau dokumen seperti PDF. Tidak ada gaya gambar tangan atau papan tulis: dua belas gaya bawaannya adalah Clean Modern, Midnight Tech, Editorial Paper, Bold Pop, Blueprint, Warm Organic, Neon Night, Soft Pastel, Mono Minimal, Sunset Gradient, Studio Noir dan Fresh Mint.
Contoh animasi logo
Logo reveal adalah tugas terpendek: median durasi di pustaka di bawah 9 detik, dan contoh di sini berjalan dari 8,7 sampai 21,0 detik. Hanya ada satu hal yang dilihat, jadi video ini sebagian besar tentang timing dan bentuk gerakannya.
TypingMind logo reveal oleh @tdinh_me berdurasi 21,0 detik dalam 16:9, dengan prompt yang dibagikan. Halaman menggambarkan reveal yang pelan, saat tanda merek tersusun secara bertahap.
Green dot morphs into the GLEA logo with elastic easing oleh @mr_igor_sanz berdurasi 8,7 detik dalam 9:16, dengan prompt yang dibagikan. Gerakannya disebut di judul: sebuah titik menjadi tanda merek, dengan elastic easing.
Yang perlu diperhatikan. Lihat frame terakhir. Logo reveal berhasil jika tanda akhir bersih, berada di tengah dan terbaca cukup lama untuk dikenali, dan gerakan sebelumnya yang memberi kepribadian pada tanda itu. Contoh 8,7 detik menunjukkan seberapa banyak yang bisa dilakukan satu gerakan, satu bentuk yang berubah menjadi bentuk lain.
Pinjam dengan Potto. Adegan ajakan bertindak penutup Potto bisa mengakhiri video pada logo Anda, dan kategori animasi logo di pustaka adalah tempat mempelajari reveal yang berdiri sendiri. Potto merender dari kumpulan jenis adegan dan gaya yang tetap, tanpa kode animasi khusus, jadi kurva easing tertentu seperti morph elastis di atas adalah sesuatu untuk dipelajari, bukan untuk disalin persis.
Buat versi Anda sendiri
Ada tiga jalur menuju video seperti ini. Tulis kodenya sendiri, minta coding agent menulisnya, atau deskripsikan video kepada alat yang merendernya untuk Anda.
Banyak kreator di pustaka membangun dengan kode. Remotion, renderer yang dipakai Potto, menggambarkan dirinya sebagai cara membuat video dan motion graphics dengan React, dan menerbitkan agent skill supaya coding agent bisa bekerja dengannya. Halaman skills Potto mengumpulkan agent skill gratis dari penulis pihak ketiga yang bisa dipasang di agent yang membaca berkas SKILL.md; skill itu berjalan di agent Anda sendiri dengan model Anda sendiri.
Claude Motion dari Anthropic, diumumkan pada 8 Oktober 2026 dan masih beta di paket Team serta Enterprise per 2026-10-12, menganimasikan teks, grafik, bentuk dan gambar dari sebuah prompt lalu mengekspor MP4. Potto bukan Claude Motion dan tidak memiliki hubungan resmi dengan Anthropic. Tulisan tentang alternatif Claude Motion membandingkan jalur-jalur itu berdasarkan fakta yang bisa Anda periksa.
Jalur deskripsi adalah alat motion graphics AI Potto. Anda memberinya prompt, tautan publik atau dokumen. Claude Opus 5.5 menulis brief, naskah dan storyboard, lalu Remotion merender adegan menjadi MP4 dengan voiceover, caption dan musik, dalam 16:9, 9:16 atau 1:1. Anda bisa mengedit storyboard layar demi layar atau meminta perubahan lewat chat. Di halaman pustaka, video yang prompt-nya dibagikan punya tombol Use this prompt yang mengirimkannya ke pembuat video Potto. Hasilnya adalah versi Potto sendiri, dengan jenis adegan dan gayanya sendiri, jadi tidak akan sama dengan aslinya; perlakukan yang asli sebagai rujukan untuk gagasan, tempo dan tampilan.
Pratinjau dan storyboard tidak dikenakan biaya; kredit ditagih saat Anda mengekspor, dan totalnya ditampilkan sebelum Anda mengonfirmasi (lihat harga). Potto tidak menghasilkan rekaman live-action, avatar atau orang, dan tidak mengedit video yang sudah Anda miliki.
FAQs
Apa saja jenis motion graphics?
Jenis motion graphics biasanya dikelompokkan menurut tempat kemunculannya: sekuens judul film dan televisi, grafis siaran dan berita, iklan dan branding, tipografi kinetik, animasi antarmuka pengguna, serta video explainer atau promosi. Panduan ini mengurutkannya menurut tugas: film peluncuran, layar produk, kinetic type, cerita data, explainer dan animasi logo. Artikel Wikipedia tentang desain motion graphic juga memisahkan grafis explainer, emotif dan promosi, menurut apakah tujuannya memperjelas, membangkitkan perasaan atau meningkatkan kesadaran.
Apa yang dianggap sebagai motion graphics?
Motion graphics adalah desain grafis yang dianimasikan: teks, bentuk, ikon, grafik dan gambar yang digerakkan untuk memberi informasi, mempromosikan atau membangun merek. Adobe mendefinisikannya sebagai "graphics with movement" dan menggambarkannya sebagai potongan animasi yang lebih pendek, yang menghibur atau menyampaikan informasi. Video yang menganimasikan tangkapan layar produk, diagram batang atau logo adalah motion graphics. Film animasi panjang dengan tokoh dan alur biasanya disebut animasi.
Apa bedanya motion graphics dan animasi?
Motion graphics menggerakkan elemen desain grafis, seperti huruf, bentuk dan grafik, biasanya untuk menyampaikan informasi dalam potongan yang pendek, sedangkan animasi secara lebih luas menceritakan kisah dengan tokoh dan alur. Keduanya tumpang tindih, jadi batasnya lebih soal tujuan dan skala daripada teknik. Panduan Adobe menarik batas itu lewat durasi dan tujuan: motion graphics adalah potongan yang lebih pendek, yang menghibur atau menyampaikan informasi.
Berapa lama video motion graphics seharusnya?
Tergantung tugasnya. Di pustaka Potto per 2026-10-12, median durasinya sekitar 9 detik untuk animasi logo, 15 untuk kinetic type, 30 untuk video peluncuran, 35 untuk cerita data, 36 untuk layar produk dan 60 untuk explainer. Sesuaikan durasi dengan jumlah gagasan: satu gagasan muat dalam 15 detik, dan satu masalah, tiga fitur serta kalimat penutup muat dalam 30 sampai 45. Pilihan durasi Potto adalah 15, 30, 45, 60 dan 90 detik.
Apakah video dalam panduan ini dibuat dengan Potto?
Tidak. Video itu dibuat oleh kreator independen dan masing-masing disebutkan atas nama penulisnya lewat handle X. Potto tidak mengklaimnya sebagai karya sendiri. Video itu disertakan sebagai rujukan, dan halaman tiap karya menautkan pos asli bila tersedia.
Bisakah saya membuat motion graphics seperti ini dengan Potto?
Bisa, untuk jenis motion graphics yang ditawarkan Potto: film peluncuran, layar produk, video berbasis teks, cerita data dan explainer yang dibangun dari sebelas jenis adegan, dua belas gaya dan warna merek Anda sendiri. Potto merender versinya sendiri dari prompt Anda, jadi hasilnya tidak menyalin yang asli, dan tidak mendukung kode animasi khusus, gaya gambar tangan atau animasi huruf bebas.
