Interflow | https://interflow.framer.website/

Interflow | https://interflow.framer.website/

Interflow is an app that let's you manage all your Flow wallets. Create your 3D Avatar, customize it with the wearables from your NFTs and play games while exploring the hottest Flow projects.

The problem Interflow | https://interflow.framer.website/ solves

At present, the experience of most flow consumers is limited. Projects are running sluggishly and users are striving for profit / return. Interflow is a platform that adds value to NFT projects for their customers. From the user side, Interflow provides a platform for entertainment and socialising.

NFT projects can be carried out within the Interflow platform:

  • Provide an immersive 3d experience MINT / REVEAL within your clients' mobile app
  • Create events and use the Interflow app to keep your customers engaged
  • Provide usability for your NFTs with the tools on APP (customisation of avatars, games, events, rankings...)
  • Announce new features and future DROPs

Users and consumers can be within the Interflow platform:

  • Connect their wallets and link them to their Interflow account
  • Create your own 3D avatar and use NFTs from your collection to make it unique
  • Discover new NFT projects and stay up to date on new DROPS and EVENTS
  • Participate in games and promotions on APP sponsored by NFTs projects
  • Connect with and find other collectors within the Flow ecosystem. Follow them and keep an eye on their inventory
  • Create unique NFTs from other NFTs using AI and your creativity in writing a prompt
  • Compete with other collectors and enter for prizes

Challenges we ran into

Time has been the biggest difficulty in this process. Interflow is an app with an immersive 3D experience. We wanted to bring many more features and examples of what is possible for the user, and we had to limit ourselves and illustrate our ideas in a short way.

Nevertheless, we managed to make great progress!

On the technical side, we had problems using FCL natively. We wanted to offer a hybrid interflow wallet account with another wallet flow provider, but we could not get the transaction signatures to work...

We had a breakthrough and were able to do full native authentication by modifying the fcl package locally, but it only worked perfectly for Blocto Wallet.
Within the app it is possible to authenticate with Dapper Wallet, but we did a little hack.

3D
In the 3D space, we encountered a significant obstacle while implementing the React Three Fiber library into a native app. This is because the documentation for a native implementation was minimal. Our primary challenge was loading GLB/GLTF models, but we overcame this by understanding how the react-native loader works.

Avatar Animations.
The import of the Avatar emotes and movements were difficult and then the engine that powers the movement across the Interspace and games were a big challenge because the engine has to transition smoothly into the right animation.

Avatar Configurator UI
Our Avatar Configurator UI features a basic WheelMenuComponent, it provides the user a seamless and intuitive experience. Achieving this level of functionality needed to ensure the correct alignment of items and accurate animation of the wheel upon user drag gesture. To accomplish this, we had to gain a solid understanding of trigonometry to properly align the items, as well as learn about the PanResponder class from React-native to enable animation of the wheel in response to user drag gesture.

And finally the development and design of the infrastructure that connects all those modules was an incredible challenge.

Discussion