Loading ...

Responses by Studio Freight.

Background: Dragonfly Capital is a leading investment firm behind many of the biggest projects in crypto. We built the brand and website to represent its position as a boundary-pushing thought leader, helping to build the future of Web 3.0. The goal was to craft a dramatic visual showcase of its mission, team, essence and resources to inspire anyone building in the Web 3.0 space.

Favorite details: The ASCII implementation. ASCII is the main motif of the Dragonfly identity system, and we wanted that to come through heavily in the site experience. Since most online ASCII generators are limited, we created a custom, browser-based tool for image post-processing to generate new ASCII art from images, videos and 3-D renders. Combining the ASCII tool with branding, 3-D, type and multiple layers of interaction makes the site feel like a living, breathing organism.

New lessons: Every project comes with new learning. This project reinforced how important it is to bring developers into the creative process early because they can contribute in more ways than just writing code. For Dragonfly, the developers added a strong technical influence to the aesthetic that took the experience to the next level. We also worked together to create tools for ASCII image creation and developed an efficient 3-D-to-browser pipeline to optimize both performance and visuals.

Special navigational features: We wanted to design the site as a single-scroll experience to enable transition and animation ideas we had, but we still needed to let users navigate to specific sections of the site. We designed a quick-draw menu inspired by control panels. To add to the experience, we made it possible for users to toggle the key-plate colors from the menu.

Technology: Blender for modeling, 3-D by three.js, react-three-fiber and some custom texture magic. Smoothness in sync by Lenis and Tempus, both open-source libraries we made during this project; while building the ASCII tool, we found out that existing smooth-scroll libraries were not up to the task, and handling frame-based animation in the browser was a big challenge. Finally, a server up to the task by Vercel.

dragonfly.xyz

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In