Kembali ke Karya
Platform Edukasi Kesehatan Interaktif Live Client Project

Bank Tulang

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.

Bank Tulang interface preview

Ikhtisar

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.

Target Pengguna

Mahasiswa farmasi, dosen pembimbing, dan audiens presentasi akademik

Peran Saya

Developer client project

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.

Fitur Utama

  • 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

Tantangan & Trade-off

  • 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

Hasil

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.

Bukti Visual

Landing page live Bank Tulang dengan tulang belakang berbasis partikel dan ajakan kampanye kesehatan tulang.
Landing sinematik dengan tulang belakang partikel Three.js real-time dan akses langsung ke asesmen serta simulator.
Simulator Bank Tulang dengan kontrol pengetahuan, kalsium, dan aktivitas serta indeks hasil perhitungan.
Simulator interaktif yang memadukan skor kuis dan kebiasaan tersimpan dengan kontrol skenario yang dapat diubah.
Bagian sinyal aktivitas Bank Tulang dengan bone scene partikel animatif dan jumlah sesi mingguan.
Storytelling Three.js berbasis scroll menghubungkan setiap sinyal kesehatan dengan data live di perangkat pengguna.
Library edukasi Bank Tulang dengan booklet, audio, video, infografis, dan poster acara.
Library media responsif untuk preview booklet, infografis, poster, audio kampanye, dan video edukasi.
Asesmen adaptasi OKAT Bank Tulang dengan dua belas pertanyaan benar, salah, dan tidak tahu.
Asesmen adaptasi OKAT 12 item yang berfungsi dengan jawaban tersimpan dan interpretasi skor edukatif otomatis.

Teknologi

Vite Three.js GSAP GLSL Shaders Modular JavaScript LocalStorage
Kunjungi Situs Live Repo GitHub