Flowboard - Webflow + ThreeJS practice

Recently I felt really inspired by Work Louder products, specially the Creator Micro. So I decided to create a fictional collab with Webflow for a limited edition focused on Webflow shortcuts. I had so much fun that I decided to build a landing page for it and also (finally) learn some ThreeJS and React Three Fiber along the way. This is the end result!

My process:

  • Keyboard model, materials, and animation in Blender

  • Exported as .gltf, used CodeSandbox cloud to render on a page

  • Used R3F + GSAP to load the model, play the animation on scroll, and add some interactivity

  • Also used GSAP for some text reveal animations

  • The rest of the structure is 100% done in Webflow.

You can see it live here: https://flowboard-site.webflow.io/

PS: Tutorial coming soon!

More by Diego Toda de Oliveira

View profile