Scimotion
Perpustakaan sains interaktif berisi 86 artikel, masing-masing dijelaskan bersama animasi yang bisa dikendalikan pembaca

- artikel bergambar, masing-masing dengan kuis
- 86
- animasi interaktif yang ditulis tangan
- 172
- bidang, dari matematika sampai kedokteran
- 8
- jalur belajar yang dikurasi
- 9
Di halaman ini
- Masalahnya
- Yang saya bangun
- Setiap artikel dipasangkan dengan animasi yang bisa dikendalikan
- Animasi sainsnya saya tulis sendiri
- Sembilan jalur belajar menjadikan artikel sebuah silabus
- Menambah bidang tidak bisa meninggalkan situs setengah jadi
- Hosting saya pindahkan ke situs statis di GitHub Pages
- Hasilnya
- Di balik layar
Masalahnya
Tulisan sains menaruh persamaan dan diagram diam di halaman, padahal gagasan di baliknya bergerak. Pembaca bisa hafal rumus transformasi Fourier tanpa pernah melihat kenapa memecah sinyal menjadi gelombang itu berhasil. Media sains kebanyakan berada di salah satu ujung. Video sains populer terlalu dangkal, sementara makalah akademik mendalam tapi tanpa visual.
Scimotion dibuat untuk non-spesialis yang penasaran: pelajar, pembelajar mandiri, dan profesional dari bidang yang berdekatan. Mereka ingin memahami gagasannya secara utuh, sekaligus ingin mengubah masukannya dan melihat apa yang terjadi.
Yang saya bangun
Setiap artikel dipasangkan dengan animasi yang bisa dikendalikan
Setiap artikel menjelaskan satu gagasan lewat teks dan persamaan, berdampingan dengan animasi yang bisa diputar, dijeda, diulang, dan diatur pembaca. Ada simulasi gerak Brown, bandul, dan eksperimen celah ganda. Ada tampilan langkah demi langkah untuk binary search dan rumus Euler, serta tampilan data untuk Teorema Limit Pusat dan diagram Hubble. Setiap animasi baru berjalan saat masuk ke layar, jadi tidak ada yang berjalan tanpa dilihat. Kebanyakan artikel punya satu widget utama dan satu widget kecil yang menjawab pertanyaan yang muncul dari widget pertama.
Animasi sainsnya saya tulis sendiri
Semua kode simulasi dan gambarnya saya tulis sendiri. Library animasi hanya saya pakai untuk detail halaman, seperti kartu yang muncul dan pola titik di beranda. Dengan begitu, ukuran halaman tetap bisa diperkirakan. Simulasi fisika juga berperilaku sama setiap kali, karena tidak ada library yang ikut mengatur frame-nya.
Sembilan jalur belajar menjadikan artikel sebuah silabus
Saya mengelompokkan artikel ke dalam sembilan jalur baca berurutan, seperti Calculus & Transforms dan Planet Earth. Setiap artikel masuk ke tepat satu jalur, jadi "sebelumnya" dan "berikutnya" selalu jelas artinya. Urutannya punya alasan. Kinetika datang sebelum asam dan basa, karena konstanta asam adalah konstanta kesetimbangan yang butuh dasar kinetika lebih dulu.
Menambah bidang tidak bisa meninggalkan situs setengah jadi
Perpustakaannya tumbuh dari empat bidang menjadi delapan. Saya memisahkan Biologi dari Kedokteran, lalu menambahkan Kimia, Bumi & Iklim, serta Astronomi & Kosmologi. Setiap bidang punya warna, deskripsi, dan halaman yang harus selalu sinkron. Semuanya saya simpan di satu daftar bertipe, jadi build akan gagal sampai bidang baru dijelaskan lengkap di semua tempat.
Hosting saya pindahkan ke situs statis di GitHub Pages
Di tengah jalan, saya memindahkan situs dari Vercel ke ekspor statis di GitHub Pages. Artinya situs harus disajikan dari sub-path, dan beberapa route perlu ditandai sepenuhnya statis. Setiap publikasi kini menjalankan pengecekan tipe dan lint lebih dulu, jadi kesalahan berhenti sebelum sampai ke situs.
Hasilnya
Scimotion sudah live dan gratis dibaca. Awalnya hanya proof of concept berisi lima artikel. Sekarang ada 86 artikel di 8 bidang, dari matematika sampai kedokteran, dengan 172 animasi yang ditulis tangan. Setiap artikel punya kuis pilihan ganda, poin-poin penting, dan daftar isinya sendiri. Pembaca bisa menjelajah per bidang, tag, atau jalur belajar, mencari di seluruh teks, atau berlangganan RSS. Di tengah pengerjaan, saya mengganti tema biru dongker yang dingin dengan tema yang lebih hangat, karena yang pertama terasa kaku untuk konten sains. Perubahan itu menyentuh setiap komponen bersama. Saya membangunnya selama sekitar lima minggu di bulan Juni dan Juli 2026, dengan sebagian besar pekerjaan di sembilan hari.
Di balik layarDetail teknis untuk engineer
- Next.js 16 App Router dengan
output: 'export',trailingSlash: true, dan base path/scimotion.NEXT_PUBLIC_BASE_PATH=''mematikan base path untuk domain kustom nanti. Beberapa route ditandaiforce-static. - Artikel berupa MDX dengan frontmatter YAML (judul, subjudul, topik, tag, kuis, waktu baca), dibaca dengan
gray-matterdan dirender dengannext-mdx-remote,remark-math, danrehype-katex, jadi persamaan tampil tanpa JS di klien. lib/topics.tsmenyimpan bidang sebagai mapRecord<Topic, …>dan tidak pernah mengimporfs.lib/articles.tsmembaca folder konten dan tidak pernah diimpor komponen klien, jadi modul bawaan Node tidak masuk ke bundle browser. Batas ini didokumentasikan di dalam berkasnya.lib/paths.tsmendefinisikan 9 jalur belajar.- Setiap widget adalah komponen klien mandiri di
components/animations/dengan state putar, jeda, dan ulang sendiri, tanpa state global bersama. Hook Intersection Observer bersama yang memulainya. RegistryArticleAnimationsmemetakan nama ke komponen untuk MDX. - Widget digambar dengan canvas, SVG, dan loop
requestAnimationFrame. Framer Motion hanya untuk elemen UI. - Halaman adalah server component secara default. Hanya widget, progress bar, daftar isi, tombol tema, pencarian, kuis, dan pembungkus animasi yang menjadi komponen klien.
- Tema memakai variabel CSS dan
next-themes, dengan mode gelap sebagai default. Ada sitemap, tag canonical dan OG, serta halaman 404 bermerek. - GitHub Actions menjalankan
tsc --noEmitdan lint sebelum setiap deploy. - Artikel per bidang: Matematika 15, Fisika 12, Kimia 11, Ilmu Komputer 11, Bumi & Iklim 10, Biologi 10, Kedokteran 9, Astronomi & Kosmologi 8.
- Sekitar 72.700 baris TS, TSX, dan MDX, 146 commit dari 18 Juni sampai 23 Juli 2026.
Tangkapan layar
Sedang merekrut, atau membangun hal serupa?
Saya terbuka untuk posisi full-time dan proyek freelance tertentu.