Bank Tulang
Developer client project
Platform edukasi kesehatan tulang live berbasis Vite, Three.js, GSAP, dan custom WebGL shaders, dilengkapi kuis adaptasi OKAT, tracking kebiasaan persisten, serta media kampanye terintegrasi.
Developer client project
Menghasilkan platform edukasi live dan responsif yang memadukan storytelling kampanye, asesmen 12 item yang berfungsi, tracking kebiasaan di perangkat, simulasi, dan materi multimedia tanpa membutuhkan backend.
01 / 06 Platform edukasi kesehatan tulang live berbasis Vite, Three.js, GSAP, dan custom WebGL shaders, dilengkapi kuis adaptasi OKAT, tracking kebiasaan persisten, serta media kampanye terintegrasi.
Masalah yang dikerjakan.
Bank Tulang adalah platform kampanye edukasi live yang dibangun ulang dari microsite statis sederhana menjadi aplikasi Vite modular. Custom GLSL shaders merender particle bone Three.js, sementara GSAP mengatur cinematic scroll scenes; aplikasi yang sama menyediakan asesmen yang berfungsi, log kebiasaan persisten, simulator skenario, dan materi edukasi multimedia milik client.
Masalah
Client mahasiswa farmasi membutuhkan platform interaktif yang jelas untuk mengomunikasikan rancangan intervensi kesehatan tulang, bukan sekadar tabel atau slide statis.
Pengguna
Mahasiswa farmasi, dosen pembimbing, dan audiens presentasi akademik
Keputusan utama.
- Mengubah tabel intervensi akademik menjadi website yang kredibel dan mudah dibaca
- Menjaga produk tetap edukatif tanpa memberi kesan diagnosis medis
- Menyeimbangkan pengalaman sinematik berbasis GPU dengan performa responsif, kejelasan kesehatan, dan aksesibilitas
Yang saya bangun.
Membangun ulang microsite statis menjadi aplikasi Vite modular, menulis particle scene Three.js dan custom GLSL shaders, mengorkestrasi cinematic scroll scenes dengan GSAP, serta mengimplementasikan kuis, tracker kebiasaan persisten, simulator, dan alur media kampanye.
Hasil, dengan konteks.
Merilis redesign ke URL publik yang sama sebagai aplikasi Vite tanpa backend dengan persistensi lokal di perangkat.
Pelajaran & langkah berikutnya +
- Client akademik membutuhkan translasi dari evidence dan modul menjadi cerita yang bisa diikuti audiens non-teknis
- Produk terkait kesehatan harus hati-hati dalam klaim, label, dan framing diagnosis
Lebih dalam.
Teknologi & fitur +
Vite / Three.js / GSAP / GLSL Shaders / Modular JavaScript / LocalStorage
- Renderer particle bone Three.js dengan custom GLSL vertex dan fragment shaders
- Cinematic health-signal scenes yang tersinkron melalui GSAP ScrollTrigger
- Arsitektur ES module untuk scene, state, tools, simulator, modal, dan media
- Asesmen adaptasi OKAT 12 item dengan interpretasi otomatis
- Log asupan kalsium dan aktivitas menumpu beban yang tersimpan di localStorage
- Simulator skenario yang menggabungkan input pengetahuan, kalsium, dan aktivitas
- Booklet, infografis, poster, audio kampanye, dan video edukasi terintegrasi
