Choose your language

Choose your language

The website has been translated to English with the help of Humans and AI

Dismiss

BITKRAFT Web3 Platform • Building a Game-Inspired Experience for Future Investors

  • Client

    BITKRAFT

  • Solutions

    ExperiencePlatformWeb3Websites & PlatformsImmersive Brand StorytellingTech ServicesTech Consulting

00:00

00:00

00:00

Case Study

0:00

Ready player two: the start of an innovative creative partnership.

BITKRAFT is a global, early-stage investment platform focused on gaming, Web3 and immersive technology. Positioning itself at the intersection of the real and virtual worlds, BITKRAFT invests in the future of "synthetic reality," connecting funders with founders of innovative games and technologies. The team came to us to redesign their web platform to better reflect this unique identity, while simultaneously catering to its two distinct audiences: founders who value vision, networking, and personal connection, and funders who seek deep insight, a proven track record, and trust.

Gamifying the immersive web experience through UX design.

With the goal to blend the worlds of gaming and investments in a manner that felt authentic and trustworthy to both, we implemented game-inspired elements throughout the user experience. The intro sequence is designed to replicate the experience of booting up a game, rather than loading an investment platform. Navigation across the site uses WASD keys and a radial menu reminiscent of using a joystick, adding to the gaming interface feel.

The immersive website design adapts to the type of content that visitors are currently viewing. For example, we opted for a clean, spacious design to draw user focus with more buttoned-up content like career-related pages. However, when discussing synthetic reality and other visionary content, we dove into the digital space with animated WebGL backgrounds for a futuristic look.

 

Our Craft

Game-inspired elements

  • Form shaped outn o0f little white cubes is floating in a dark sky with stars. The logo for BITKRAFT is placed small at the bottom.
  • Dark with in light grey cards of an avatar with a name below it. One avatar is a futuristic woman, one looks like a dark lord and one like a warrior.
  • screenshot of the website

Peek into the tech behind our website development process.

We managed data using DatoCMS, a headless CMS that enabled us to transmit data into our React and Next.js build. For the 3D elements, we created a WebGL framework in-house. The people page carousel was achieved by integrating GSAP, WebGL, and CSS perspectives and mouse events, maintaining web accessibility standards while creating a sense of depth and layering.

  1. Tech

    A deeper look behind the scenes • Inspired by video games, the BITKRAFT platform needed to be fun and smooth to navigate. We used a series of technical solutions to build a satisfying navigational experience.

  2. Our process involved a series of key challenges: enabling a playful experience while keeping W3C accessibility in mind, integrating it with DatoCMS, and creating over 100 dynamic components across two different themes (content and digital views). The bonus challenge: developing it all in a timeline of only two months.

  3. Transitions bring the experience of navigating the page to life. We synchronized the WebGL scene with the user’s scroll position, harmonizing the transition from one piece of content to the next through the use of sound and animation.

  4. To enable HTML rendering and keyboard accessibility for the radial menu, we leveraged CSS properties such as transform, mask, and clip, enabling the creation of a circular menu shape. GSAP and event listeners enhance the game-inspired experience.

  5. Inspired by collectible card games, the People page integrates GSAP, WebGL, CSS perspectives and mouse events. WebGL tracks the position and rotation of each element, while manipulating the Z position creates a sense of depth.

  6. The frontend transmits dynamic data from the CMS to WebGL, which renders each brand’s assets on the Portfolio page. We used CSS filters, to enhance the cohesion of the WebGL elements and achieve a blurry glass effect.

     

  7. Want to see it all in action? Explore the synthetic reality:

Drag
For More!

Delivering an innovative user experience for BITKRAFT.

Together, we built a web platform that successfully offered an authentic and engaging user experience tailored to the needs of both founders and funders. The site not only reflected BITKRAFT’s unique identity in the gaming venture capital space but also added value by providing an innovative and intuitive interface for information and navigation. By incorporating game-inspired elements and adapting the website design to the content, we helped BITKRAFT reinforce their brand identity and commitment to synthetic reality. This immersive platform not only serves as a testament to BITKRAFT’s innovative approach but also sets a new standard for user experience.

Awards

  • 1x FWA

  • 1x Awwwards

Want to talk Experience? Get in touch.

Hey👋

Please fill out the following quick questions so our team can get in touch with you.

Can’t get enough? Here is some related work for you!

Choose your language

Choose your language

The website has been translated to English with the help of Humans and AI

Dismiss