Bask
– Telehealth Platform & 3D Interactive Web
Jul 2024 — Aug 2024
Scroll to explore
Bask wanted a landing page that felt like a genuine product demo rather than a static marketing page — an interactive 3D telehealth experience that could still load instantly worldwide.
I built the interactive scenes with Three.js, React Three Fiber, and Drei, animated with GSAP ScrollTrigger and Framer Motion layered over the 3D canvas. To keep load times low despite the 3D assets, I used Draco compression on the GLTF models and served the page via Next.js SSG/ISG with Edge CDN caching.
Highlights
- Built interactive 3D scenes with Three.js, React Three Fiber, and Drei
- Compressed 3D GLTF models with Draco to minimize asset weight
- Combined Next.js SSG/ISG with Edge CDN caching for near-instant global load times
- Layered smooth Framer Motion UI transitions over the live 3D canvas
Challenges
- Keeping 3D asset weight low enough for fast loads without visibly degrading quality
- Maintaining a high, stable frame rate for 3D interactions across devices
- Coordinating animated UI (Framer Motion) with a live WebGL canvas without jank
CompletedJul 2024 — Aug 2024
Next.jsThree.jsReact Three FiberDreiGSAPScrollTriggerISGSSGTypeScriptTailwind CSSFramer MotionDraco CompressionGit