Bank Tulang
A live, cinematic bone-health education platform built with Vite, Three.js, GSAP, and custom WebGL shaders, with an adapted OKAT quiz, persistent habit tracking, and embedded campaign media.
Overview
Bank Tulang is a live educational campaign platform rebuilt from a simple static microsite into a modular Vite application. Custom GLSL shaders render its Three.js particle bones while GSAP coordinates the cinematic scroll scenes; the same application delivers a working assessment, persistent habit logs, a what-if simulator, and the client's multimedia education materials.
Problem
The pharmacy student client needed a clear, interactive platform to communicate a bone-health intervention design instead of relying on static tables or slides.
Target Users
Pharmacy students, academic supervisors, and health-promotion presentation audiences
My Role
Client project developer
Rebuilt the original static microsite as a modular Vite application, authored the Three.js particle scene and custom GLSL shaders, orchestrated cinematic scroll scenes with GSAP, and implemented the quiz, persistent habit trackers, simulator, and campaign-media workflows.
Key Features
- Three.js particle-bone renderer using custom GLSL vertex and fragment shaders
- Cinematic health-signal scenes synchronized with GSAP ScrollTrigger
- Modular ES-module architecture for scenes, state, tools, simulator, modal, and media
- 12-item adapted OKAT assessment with automatic interpretation
- Calcium intake and weight-bearing activity logs persisted in localStorage
- What-if simulator combining knowledge, calcium, and activity inputs
- Embedded booklet, infographic, poster, campaign audio, and educational video
Challenges & Trade-offs
- Turning academic intervention tables into a website that feels credible and readable
- Keeping the product educational without implying medical diagnosis
- Balancing a GPU-rendered cinematic experience with responsive performance, healthcare clarity, and accessibility
Lessons Learned
- Academic client work needs translation from evidence and modules into a story that non-technical audiences can follow
- Health-related products must be careful with claims, labels, and diagnostic framing
Results
Delivered a live, responsive educational platform that combines campaign storytelling, a working 12-item assessment, on-device habit tracking, simulation, and multimedia resources without requiring a backend.
Proof Artifacts
