Belakangan saya nemu sebuah proyek open source yang menarik bernama NullMotion. Yang bikin saya tertarik, dia tidak sekadar memutar sebuah video motion graphics yang sudah jadi, tapi memperlihatkan proses di baliknya. Jadi kita bisa melihat hasil akhir sebuah iklan atau animasi sekaligus draft kasarnya, diputar bersamaan dan tetap sinkron mengikuti timeline yang sama. Buat saya yang suka penasaran dengan cara sesuatu dibuat, ini terasa seperti membuka dapur di balik sebuah karya.

Jadi NullMotion Itu Apa?

Secara sederhana, NullMotion adalah alat untuk memvisualisasikan proses pembuatan motion graphics. Film yang sudah jadi diputar di bagian atas, sementara bagian draft di bawahnya ikut bergerak mengikuti timeline film tersebut. Dengan begitu, kita bisa membandingkan versi final dengan versi kasarnya secara berdampingan, frame demi frame.

Supaya rapi, sebuah iklan dipecah menjadi beberapa bagian, biasanya tiga sampai delapan section, dan pembagiannya mengikuti pergantian scene yang sebenarnya. Jadi kita tidak cuma melihat hasil akhir yang mulus, tapi juga tahapan di mana ide itu masih berupa gerakan kasar sebelum dirapikan.

Fitur yang Menurut Saya Menarik

• Pemutaran yang sinkron. Versi final dan draftnya berjalan bersamaan mengikuti timeline yang sama, jadi perbandingannya benar benar terasa.
• Dipecah per section. Satu karya dibagi menjadi tiga sampai delapan bagian berdasarkan pergantian scene, sehingga lebih mudah dipahami.
• Ekspor sekali klik. Seluruh breakdown bisa diunduh menjadi satu file MP4 dengan resolusi 1920×1080.
• Berjalan lokal sepenuhnya. Semuanya jalan di komputer sendiri, tanpa perlu API atau dependensi eksternal.
• Sudah ada contoh bawaan. Ada tiga referensi yang langsung bisa dipreview, jadi kita bisa coba tanpa harus menyiapkan aset sendiri dulu.

Teknologi di Baliknya

Buat kalian yang penasaran dengan sisi teknisnya, NullMotion berjalan di Node.js versi 22 ke atas. Bagian tampilannya memakai HTML5 dan JavaScript, dengan GSAP untuk animasi dan WebCodecs untuk proses encoding. Di sisi server, dia memanfaatkan FFmpeg dan ffprobe untuk memproses video. Menariknya, untuk operasi dasar dia tidak butuh dependensi npm sama sekali, jadi relatif ringan untuk dicoba.

Cara Mencobanya

Cara mencobanya cukup singkat. Clone repo-nya lalu jalankan:

git clone https://github.com/blixvip/NullMotion.git
cd NullMotion
npm start

Setelah itu buka http://127.0.0.1:4343 di browser, pilih salah satu referensi yang tersedia, lalu gunakan menu Download dan pilih Whole preview untuk mengekspor hasilnya. Satu catatan penting, fitur ekspornya hanya berjalan di Chrome atau Edge karena bergantung pada WebCodecs API yang belum didukung semua browser.

Kalau ingin memakai referensi sendiri, NullMotion juga mendukung impor lewat MotionClone, dengan bantuan Python dan FFmpeg.

Buat Siapa Alat Ini?

Menurut saya alat ini pas buat motion designer, editor, atau siapa pun yang suka belajar dengan cara membedah proses. Melihat versi final dan draftnya berdampingan itu cara belajar yang jujur, karena kita jadi paham bahwa hasil yang mulus pun berawal dari gerakan kasar yang bertahap dirapikan. Buat saya pribadi, nilai terbesarnya bukan cuma di hasilnya, tapi di pengingat bahwa setiap karya yang rapi punya tahapan berantakan yang biasanya tidak kita lihat.

Satu hal yang perlu diperjelas, NullMotion ini tidak berafiliasi dengan Null Studio yang merupakan produk terpisah di nullmotion.com. Jadi jangan sampai tertukar. Kalau kalian tertarik, repo-nya bisa dilihat langsung di github.com/blixvip/NullMotion, dan mereka juga punya komunitas Discord yang aktif untuk tanya jawab dan pamer hasil render.