Scimotion

Permasalahan

Penulisan sains memiliki celah: persamaan dan diagram diam di halaman, tetapi konsep yang mereka wakili bersifat dinamis. Pembaca bisa menghafal rumus transformasi Fourier tanpa pernah benar-benar memahami mengapa dekomposisi sinyal bekerja. Media sains yang ada terlalu dangkal (video pop-sains) atau terlalu dalam (makalah akademis tanpa visual). Scimotion menargetkan non-spesialis yang penasaran — pelajar, pembelajar mandiri, profesional dari bidang berdekatan — yang menginginkan kedalaman konseptual nyata dan kemampuan untuk memanipulasi hal yang sedang mereka coba pahami.

Pendekatan

MDX sebagai content layer, dengan taksonomi yang ditegakkan compiler

Artikel adalah file .mdx dengan frontmatter YAML, dibaca saat build time oleh gray-matter untuk daftar artikel yang sepenuhnya statis tanpa database. Seiring taksonomi bidang tumbuh dari 4 menjadi 8 — memisahkan Biologi dari Kedokteran, menambahkan Kimia, Bumi & Iklim, dan Astronomi & Kosmologi sebagai bidang kelas satu — menjaga warna, deskripsi, dan logika slug tetap sinkron di beranda, direktori bidang, dan setiap badge menjadi risiko nyata. Solusinya adalah menjadikan lib/topics.ts satu-satunya sumber kebenaran, bertipe map Record<Topic, …>, sehingga bidang baru tidak akan pernah ter-compile hingga setiap map mendeskripsikannya secara lengkap — mengubah masalah disiplin dokumentasi menjadi sesuatu yang ditegakkan sistem tipe.

Batas antara filesystem dan browser bundle

Karena situs dirilis sebagai static export, import fs yang nyasar hingga ke kode client akan merusak build. lib/topics.ts sengaja dijaga bebas dari akses filesystem apa pun, sementara lib/articles.ts — yang membaca direktori konten — tidak pernah diimpor oleh komponen client. Batas itu didokumentasikan langsung dalam file agar perubahan di masa depan tidak meruntuhkannya kembali.

Learning path sebagai lapisan pengurutan terpisah

lib/paths.ts mendefinisikan 9 urutan bacaan terkurasi dan berurutan, setiap artikel hanya termasuk dalam satu path sehingga navigasi prev/next tetap tidak ambigu. Urutannya sendiri disengaja dan dijelaskan dalam komentar kode — misalnya, mengapa kinetika mendahului asam-basa, karena Ka adalah konstanta kesetimbangan yang baru masuk akal setelah dasar kinetika.

Komponen animasi mandiri, dipicu hanya saat terlihat

Setiap widget interaktif adalah komponen React client yang mandiri di bawah components/animations/, tidak berbagi state global — masing-masing mengelola lifecycle play/pause/reset-nya sendiri secara independen. Hook Intersection Observer bersama memicu setiap animasi hanya ketika pembaca menggulir ke dalamnya, sehingga tidak ada yang berjalan di luar layar membakar siklus. Satu registry memetakan nama widget ke komponen agar MDX dapat merujuknya berdasarkan nama.

Tidak ada library animasi untuk sains itu sendiri

Semua logika animasi — menggambar canvas, pembaruan path SVG, loop requestAnimationFrame — ditulis tangan. Framer Motion hanya digunakan untuk chrome UI: entrance kartu, spring hover, hero dot-grid beranda — tidak pernah untuk visualisasi sains interaktif itu sendiri. Ini adalah constraint yang disengaja untuk menjaga ukuran bundle dapat diprediksi dan rendering deterministik; simulasi fisika seharusnya tidak mewarisi perilaku penjadwalan dari library animasi tujuan umum.

Re-platforming tanpa merusak yang sudah berfungsi

Target deployment berpindah dari Vercel ke static export GitHub Pages penuh di tengah jalan, yang berarti menambahkan output: 'export', trailingSlash: true, dan base path /scimotion dengan jalan keluar untuk domain kustom di masa depan. Beberapa rute perlu ditandai force-static, dan CI kini menjalankan gerbang type-check dan lint sebelum publikasi, sehingga regresi tertangkap sebelum dirilis, bukan sesudahnya.

Hasil

146 commit selama kurang lebih lima minggu, sebagian besar terkonsentrasi dalam sembilan hari pembangunan aktif. Yang dimulai sebagai proof of concept 5 artikel menjadi pustaka sungguhan: 86 artikel di 8 bidang, didukung 172 komponen animasi yang dikode tangan — simulasi canvas gerak Brown, pendulum, dan eksperimen celah ganda, visualizer step-through SVG untuk binary search dan rumus Euler, widget data untuk Central Limit Theorem dan diagram Hubble — kurang lebih dua widget per artikel. Setiap artikel dilengkapi kuis pilihan ganda, callout key-takeaway, dan daftar isi otomatis; semuanya dirangkai oleh 9 learning path terkurasi, sistem tag, dan pencarian teks penuh. Perubahan palet di tengah pembangunan menggantikan tema gelap navy dingin awal dengan yang lebih hangat setelah implementasi pertama terasa steril untuk konten sains — perubahan yang menyentuh setiap komponen bersama, bukan sekadar file konfigurasi. Langsung di andifathulms.github.io/scimotion.