Langsung ke konten
AFM Studio
  • Halaman

    AFM Studio
  • Karya
  • Lab
  • Tentang
  • CV
  • Kontak
  • Proyek

    AksaraPerpustakaan pengetahuan Otorita IKN yang bisa dicari, dengan server memeriksa akses setiap pembaca di tiga tingkat
  • Daily TaqwaSistem presensi salat anti-manipulasi untuk ~2.000 pegawai OIKN di Masjid Negara IKN
  • Lantara v2Mesin perizinan Otorita IKN tempat administrator menambah jenis izin baru dari layar, tanpa developer
  • eKiosk IKNDua ruang kendali untuk Nusantara: konten kios dan pelacakan bus live dengan estimasi kedatangan yang menilai dirinya sendiri
  • E-Monev IKNPlatform pemantauan pembangunan Nusantara selama 23 tahun, melacak progres triwulan setiap unit terhadap 24 KPI
  • JDIH OIKNPortal dokumen hukum publik OIKN, dengan alur penerbitan terkendali dan ringkasan AI yang tidak pernah keluar dari server
  • Jejak PenanamanAplikasi absen acara penanaman pohon IKN yang membuktikan peserta hadir di lokasi lewat selfie ber-geofence
  • Dashboard SAKTIPipeline malam dan dashboard yang menggantikan unduhan anggaran manual di keenam satker OIKN
  • DoseRxKalkulator dosis untuk 127 obat yang membulatkan dosis ke tablet dan sirup yang dijual apotek Indonesia
  • CubiqPelatih speedcubing dengan timer setara kompetisi dan solver buatan sendiri untuk 8 puzzle utama
  • ScimotionPerpustakaan sains interaktif berisi 86 artikel, masing-masing dijelaskan bersama animasi yang bisa dikendalikan pembaca
  • WA Daily Scrum BotBot WhatsApp yang menagih laporan standup tim 14 orang dan menandai tugas yang macet berhari-hari

↑ ↓ untuk berpindah · Enter untuk membuka · Esc untuk menutup

Scimotion

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

Tangkapan layar
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

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 ditandai force-static.
  • Artikel berupa MDX dengan frontmatter YAML (judul, subjudul, topik, tag, kuis, waktu baca), dibaca dengan gray-matter dan dirender dengan next-mdx-remote, remark-math, dan rehype-katex, jadi persamaan tampil tanpa JS di klien.
  • lib/topics.ts menyimpan bidang sebagai map Record<Topic, …> dan tidak pernah mengimpor fs. lib/articles.ts membaca 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.ts mendefinisikan 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. Registry ArticleAnimations memetakan 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 --noEmit dan 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

Explore
Post Detail
Post Animation
Learning Path
Learning Path Detail
Field

Sedang merekrut, atau membangun hal serupa?

Saya terbuka untuk posisi full-time dan proyek freelance tertentu.