Building an interactive 3D event badge with React Three Fiber

In this post, we explore how a 3D event badge with an interactive lanyard was created for the Vercel Ship 2024 site. The inspiration came from a Blender video depicting a virtual badge dropping down. To make it interactive and run in the browser, React Three Fiber, Drei, react-three-rapier, and MeshLine were used. The implementation is about 80 lines of mostly declarative code with some math involved. The final product includes physics joints, a curve for the lanyard, an interactive card, and dynamic name display.