Bank Tulang
Client project developer
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.
Client project developer
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.
01 / 05 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.
The problem to solve.
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.
People
Pharmacy students, academic supervisors, and health-promotion presentation audiences
Key decisions.
- 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
What I built.
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.
Results, with context.
Shipped the redesigned experience to the existing public URL as a backend-free Vite application with device-local persistence.
Lessons & next steps +
- 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
Under the hood.
Technologies & features +
Vite / Three.js / GSAP / GLSL Shaders / Modular JavaScript / LocalStorage
- 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
