Responses by Valeriy Hnybidenko, front end developer; Leonid Kostetskyi, lead designer and full stack developer; and Roman Stets, project manager, Emotion.

Background: This is a promotional website we created for the internal needs of our team, specifically for lead generation and introducing people to our work. Its main goal is to showcase our current level of front-end development skills, which the team has achieved over six years of practice.

The target audience consists of individuals working in startups, those involved in tech projects, and representatives of companies looking for a boutique team to create complex interfaces for products in both Web2 and Web3 environments.

Larger picture: We’re approaching a planned rebranding after six years in the industry, and this promo site is just the beginning of a larger promotional campaign for our team. We designed the site not just to generate leads but to attract people specifically interested in complex front-end development.

We’re particularly focused on projects related to blockchain technologies, AI, 3-D and, in general, projects aiming to add a wow factor to their product interface. It’s great to see that this site is attracting exactly the kind of people we were hoping for.

Design core: The site’s main visual concept is dynamic storytelling with 3-D scenes in the background that change as the user navigates. We wanted to create an experience that combines visual, interactive, and auditory elements. Multiple sensory receptors immerse the user in the exploration of the site, creating a sense of presence similar to watching a movie. Sounds triggered by clickable elements, scene transitions, element animations, background music and the subtle fading of audio effects were all carefully designed to leave a lasting, positive impression on the user.

Favorite details: Details. That’s the word that best describes our approach to creating this website. As Michelangelo once said, “Trifles make perfection, and perfection is no trifle.” For example, when you hover over the “Get Started” button, the background music softens, subtly guiding you to your next action. Similarly, when you reach the final “Contact” screen, the sounds fade away to focus the user’s attention on a specific action.

Overall, this entire flow, packed with countless details, is what we’re truly proud of in this project.

Challenges: On the technical side, making sure the site worked seamlessly across different devices without bugs while maintaining smooth yet dynamic transitions. We had to carefully design and implement scene transitions not to overwhelm users with too many animations but to use interactive elements to focus attention on key headlines.

The entire process was complex, from the initial idea to the final implementation you see now.

Alternate paths: We could have spent more time on the visual aspects, adding some trigger elements or perhaps incorporating a few more unconventional design choices. However, we wanted to maintain clarity in how the content is perceived, so in some places, the design ended up being quite classic.

Overall, we could have focused even more on the details from all angles: design, development, sound and style. There’s always room for improvement.

New lessons: We learned a lot more about the capabilities of the technologies we used in this project. We worked extensively on the smooth integration of 3-D scenes into the web space: performance, smoothness, and the animation possibilities of 3-D scenes and objects.

Navigation structure: The navigation was designed with user convenience as the top priority. We implemented a top menu that becomes visible whenever the user scrolls slightly upward on the desktop and laptop versions. For the mobile version, we used the familiar “burger” menu. Switching between sections is available with just one click.

Special navigational features: The transitions between sections of the site are almost instant after clicking a button. We needed to ensure fast switching between the site’s heavy scenes. Thanks to certain technical solutions, we were able to achieve this goal.

Technology: The design was crafted in Figma, an industry-standard tool. We used HTML5 and SCSS for the layout and selected Nuxt3.js as our frontend framework. We created animations using our custom Smooth Scroll library, in addition to GSAP and WebGL. The 3-D scenes were created using Blender and AfterEffects. For code storage and version control, we utilized GitHub. The frontend part of the site was deployed using Vercel.