Mobile app for a wellness brand that focuses on breathwork

VANA

large_cases_vana_mainThumbnail_image.webp

medium_cases_vana_mainThumbnail_image.webp

small_cases_vana_mainThumbnail_image.webp

thumbnail_cases_vana_mainThumbnail_image.webp

cases_vana_mainThumbnail_image.webp

Lucie Foster was searching for a tech partner that would bring her vision to life when our pathes crossed. We were mesmerized by her energy and attitude, and she got to appreciate our attention to details and technical prowess. But most importantly, we have clicked as human beings. 

VANA is a platform that focuses on breathwork and curated experiences. You can either have your daily microdose, designed to shift a state in minutes, or take a deep-dive journey, which gives space for the exploration of the inner world and expand perspective. A lot of the vibe is a direct extension of Lucie’s personality, but she also invites other content creators to join the party and share their knowledge.

Vana: a breathtaking app

thumbnail_ZnOEaJm069VX15jx_CASES_VANA_Body_1_OPT_1920.webp

ZnOEaJm069VX15jx_CASES_VANA_Body_1_OPT_1920.webp

VANA is comprised of three key services – user-oriented mobile app, facilitator’s portal for content management, and an admin panel for Lucie to track high-level stats and manage the whole platform from one dashboard.

large_Zpkh7h5LeNNTxRg7_CASES_VANA_GALLERY_1_OPT_1920.webp

medium_Zpkh7h5LeNNTxRg7_CASES_VANA_GALLERY_1_OPT_1920.webp

small_Zpkh7h5LeNNTxRg7_CASES_VANA_GALLERY_1_OPT_1920.webp

thumbnail_Zpkh7h5LeNNTxRg7_CASES_VANA_GALLERY_1_OPT_1920.webp

Zpkh7h5LeNNTxRg7_CASES_VANA_GALLERY_1_OPT_1920.webp

Mobile app consists of mindful courses and breath exercises with repetitive patterns and sound accompaniment. Main features of the app are personalized recommendations system for the users, tools for progress tracking and collecting feedback. The overall aesthetic based on sensations felt through the breathwork. Gradients, cropped and blurry photos create a unique atmosphere of balance and motion at the same time.

large_Zpkh7h5LeNNTxRg8_CASES_VANA_GALLERY_2_OPT_1920.webp

medium_Zpkh7h5LeNNTxRg8_CASES_VANA_GALLERY_2_OPT_1920.webp

small_Zpkh7h5LeNNTxRg8_CASES_VANA_GALLERY_2_OPT_1920.webp

thumbnail_Zpkh7h5LeNNTxRg8_CASES_VANA_GALLERY_2_OPT_1920.webp

Zpkh7h5LeNNTxRg8_CASES_VANA_GALLERY_2_OPT_1920.webp

Facilitators use their dashboard to add breathing patterns and compose them into full courses with additional content to support the experience. We have developed a visual and easy-to-use Pattern Builder that lies in the core of the process. It greatly reduces the amount of extra steps needed to wrap up a finished course.

large_Zpkh7x5LeNNTxRg9_CASES_VANA_GALLERY_3_OPT_1920.webp

medium_Zpkh7x5LeNNTxRg9_CASES_VANA_GALLERY_3_OPT_1920.webp

small_Zpkh7x5LeNNTxRg9_CASES_VANA_GALLERY_3_OPT_1920.webp

thumbnail_Zpkh7x5LeNNTxRg9_CASES_VANA_GALLERY_3_OPT_1920.webp

Zpkh7x5LeNNTxRg9_CASES_VANA_GALLERY_3_OPT_1920.webp

The Admin Panel is quite similar to Facilitator’s Portal, but has loads of extra features like content moderation, financial reports, user management, and analytics.

Digital Products

React Native

Django

Next.js

Python

Typescript

medium_ZnOEbZm069VX15j2_CASES_VANA_Thumbnail_OPT_1920.webp

small_ZnOEbZm069VX15j2_CASES_VANA_Thumbnail_OPT_1920.webp

thumbnail_ZnOEbZm069VX15j2_CASES_VANA_Thumbnail_OPT_1920.webp

ZnOEbZm069VX15j2_CASES_VANA_Thumbnail_OPT_1920.webp

Showcase of the works of Los Angeles-based cinematographer

Portfolio site with several types of galleries for a Los Angeles-based cinematographer Erin G. Wesley.

Erin Wesley

large_cases_erin_mainThumbnail_img.webp

medium_cases_erin_mainThumbnail_img.webp

small_cases_erin_mainThumbnail_img.webp

thumbnail_cases_erin_mainThumbnail_img.webp

cases_erin_mainThumbnail_img.webp

CSSDA

The FWA

AWWWARDS

Erin G. Wesley is a Los Angeles-based cinematographer. Her portfolio includes works for projects for Netflix, Nike, NBA and Snoop Dogg. She’s also an accomplished photographer and regularly travels the world in search of new visual inspiration. She needed a portfolio site — something she could leverage to help find that next great production project.

We used the React framework Next.js to build the website. To create interactive experiences and key visual features, we used GSAP, WebGL shaders and PixiJS. At the heart of the site — our own custom scroll, which we call amayzing SNP scroll. It helps to improve website performance.

Erin G. Wesley: standout portfolio website with easter eggs for a cinematographer

large_cases_erin_sections_2_img.webp

medium_cases_erin_sections_2_img.webp

small_cases_erin_sections_2_img.webp

thumbnail_cases_erin_sections_2_img.webp

cases_erin_sections_2_img.webp

The focus for the entire experience is Erin’s incredible videography catalog. The main gallery creates a fluid and easy to navigate structure — built for speed so the user can cycle through multiple projects in a quick, dynamic fashion. There are so many easter eggs and little experiences within this seemingly simple portfolio site — but you have to dig around to find them. 

The most unique element on the site is Z-Space gallery, which allows to zoom into Erin’s creative catalog in an unexpected way. It’s a visually interesting way to view all of Erin’s work in one place, and is just a lot of fun to play around with. The gallery reacts to cursor position, and can be scrolled forward and backwards through ‘time’ offering a unique glimpse into the mind of Erin Wesley.

CASES_ERIN_BODY_1_VIDEO_OPT.mp4

From the technical perspective, the most challenging part was the video gallery on the Home page. To make this gallery work seamless, we needed to combine several technologies at once. We connected our aSNP scroll and DOM elements with Pixi.js and added shaders. The focus of the work was really on revising and optimizing the experience working with videos. We had to make them load quickly and play smoothly on any device, anywhere.

Erin reaches a global audience with her professional work, so we had to plan for a wide variety of devices, connections and experiences. Besides on the Home page there is a small detail we’re really proud of — the aspect ratio change for the homepage thumbnails. It’s a subtle element to make the homepage view feel slightly cinematic in a way, and we thought it was a lot of fun.

large_cases_erin_sections_4_img.webp

medium_cases_erin_sections_4_img.webp

small_cases_erin_sections_4_img.webp

thumbnail_cases_erin_sections_4_img.webp

cases_erin_sections_4_img.webp

large_cases_erin_section_5_img.webp

medium_cases_erin_section_5_img.webp

small_cases_erin_section_5_img.webp

thumbnail_cases_erin_section_5_img.webp

cases_erin_section_5_img.webp

Erin needed an ability to manage all the new content she was generating. For content management we used Strapi, which was completely customizable and allowed us to build it specifically for Erin’s day-to-day site management needs. Because of Strapi's minimalistic interface it is easy to interact and work with content rather than navigate the dashboard.

Creative Dev

GSAP

WebGL

large_cases_erin_thumbnail.webp

medium_cases_erin_thumbnail.webp

small_cases_erin_thumbnail.webp

thumbnail_cases_erin_thumbnail.webp

cases_erin_thumbnail.webp

large_CASES_MF2021_GALLERY_1_COVER_OPT.jpeg

medium_CASES_MF2021_GALLERY_1_COVER_OPT.jpeg

small_CASES_MF2021_GALLERY_1_COVER_OPT.jpeg

thumbnail_CASES_MF2021_GALLERY_1_COVER_OPT.jpeg

CASES_MF2021_GALLERY_1_COVER_OPT.jpeg

large_CASES_MF2021_GALLERY_6_COVER_OPT.jpeg

medium_CASES_MF2021_GALLERY_6_COVER_OPT.jpeg

small_CASES_MF2021_GALLERY_6_COVER_OPT.jpeg

thumbnail_CASES_MF2021_GALLERY_6_COVER_OPT.jpeg

CASES_MF2021_GALLERY_6_COVER_OPT.jpeg

CASES_MFv1_Gallery_2.mp4

Showcase of the works of NYC-based stone artist Matthew Fisher

Site for contemporary artist Matthew Fisher which was the beginning of a long-term relationship: led to two more projects and interesting technical solutions.

large_CASES_MFv1_Gallery_1.jpg

medium_CASES_MFv1_Gallery_1.jpg

small_CASES_MFv1_Gallery_1.jpg

thumbnail_CASES_MFv1_Gallery_1.jpg

CASES_MFv1_Gallery_1.jpg

A digital showcase of the collection of New York stone artist Matthew Fisher. His work has been featured in the group exhibition “On The Verge” and at the Noguchi Museum. Matthew wanted a website that would highlight his art objects. This project is all about the details, and as soon as you start interacting with the site, they come to life around the art.

In the first 60 days, it was viewed more than 50,000 times, and some collections were completely sold out. Following the success of the site, Matthew proposed collaboration on two other projects: a website for his second collection and a digital exhibition called “The Quarry House.”

Matthew Fisher

large_CASES_MF2021_BODY_3_OPT.png

medium_CASES_MF2021_BODY_3_OPT.png

small_CASES_MF2021_BODY_3_OPT.png

thumbnail_CASES_MF2021_BODY_3_OPT.png

CASES_MF2021_BODY_3_OPT.png

Основа сайта — React Web App, который работает на базе Shopify Storefront API. Это позволило нам создать уникальный дизайн, встроить крутые галереи и анимацию, сохранив при этом функциональность электронной коммерции. В итоге сайт может не только работать как интернет-магазин, но и выглядеть так, как вы хотите.

В основе сайта — наш собственный скролл. Мы его используем практически в каждом проекте, при этом итеративно улучшаем его производительность. Пользовательский компонент прокрутки помогает нам обеспечивать безупречное взаимодействие между компонентами, синхронизировать HTML-блоки с элементами WebGL, а также выводить только видимые элементы сайта для повышения производительности.

Наша любимая часть — алгоритм предсказания. Основываясь на предыдущих действиях пользователя, он сообщает нам, какие элементы скоро появятся на экране, что обеспечивает их видимость. Этот алгоритм не только помогает обеспечить плавную и бесшовную работу на любом устройстве, но и гарантирует высокую производительность галерей изображений с быстрой прокруткой, где положение элементов резко меняться от кадра к кадру.

Технологии

large_CASES_MFV2021_BODY_2_OPT.png

medium_CASES_MFV2021_BODY_2_OPT.png

small_CASES_MFV2021_BODY_2_OPT.png

thumbnail_CASES_MFV2021_BODY_2_OPT.png

CASES_MFV2021_BODY_2_OPT.png

Matthew Fisher 2021

React

Shopify

Prismic

large_CASES_MF2021_THUMBNAIL_OPT.jpeg

medium_CASES_MF2021_THUMBNAIL_OPT.jpeg

small_CASES_MF2021_THUMBNAIL_OPT.jpeg

thumbnail_CASES_MF2021_THUMBNAIL_OPT.jpeg

CASES_MF2021_THUMBNAIL_OPT.jpeg

large_CASES_RYD_GALLERY_2.jpg

medium_CASES_RYD_GALLERY_2.jpg

small_CASES_RYD_GALLERY_2.jpg

thumbnail_CASES_RYD_GALLERY_2.jpg

CASES_RYD_GALLERY_2.jpg

large_CASES_RYD_GALLERY_3 (1).png

medium_CASES_RYD_GALLERY_3 (1).png

small_CASES_RYD_GALLERY_3 (1).png

thumbnail_CASES_RYD_GALLERY_3 (1).png

CASES_RYD_GALLERY_3 (1).png

CASES_RYD_GALLERY_1_VIDEO_OPT.mp4

An interactive website for Nigerian Trophy Stout's social campaign

Site is a part of a big campaign for Trophy Stout petitions Western museums to return Nigerian artifacts.

Reclaim Your DNA

large_CASES_RYD_THUMBNAIL.jpg

medium_CASES_RYD_THUMBNAIL.jpg

small_CASES_RYD_THUMBNAIL.jpg

thumbnail_CASES_RYD_THUMBNAIL.jpg

CASES_RYD_THUMBNAIL.jpg

Trophy Stout is one of the flagship brands of Anheuser-Busch InBev Nigeria. Brand decided to launch a campaign in order to challenge the British Museum, which holds captive over 900 objects from the historic Kingdom of Benin, including the Benin Bronze artefacts that were pillaged from Nigeria by British troops. The main part of this campaign was a website, enabling users to explore stolen unique artwork.

We saw exceptional results from this campaign, culminating in over 390,000 Nigerian sign-ups, the largest petition in Africa to date, 150 million earned impressions and 50 million Nigerians reached. With over 97 Benin Bronzes returned as a result of this massively successful campaign. This campaign was on the shortlist of the 2023 Cannes Lions Festival.

Reclaim Your DNA: an interactive digital  museum

large_CASES_RYD_GALLERY_3.png

medium_CASES_RYD_GALLERY_3.png

small_CASES_RYD_GALLERY_3.png

thumbnail_CASES_RYD_GALLERY_3.png

CASES_RYD_GALLERY_3.png

To create our website, we used Next.js as a front-end framework for building web applications, three.js, react-three-fiber for working with 3-D objects and GSAP for animations.

medium_CASES_RYD_BODY_2_SMALL (1).jpg

small_CASES_RYD_BODY_2_SMALL (1).jpg

thumbnail_CASES_RYD_BODY_2_SMALL (1).jpg

CASES_RYD_BODY_2_SMALL (1).jpg

The website has a dual purpose: a digital experience that showcases the artifacts in a way that matches any museum, and to drive a mass social media movement demanding the artifacts return. The most challenging task was creating the impressive 3-D gallery of the original masks that users can interact with and explore, immersing them in the museum experience.

We spent a long time working with models, configured lighting, and used optimized textures to achieve maximum performance and visualization quality. Together with our partners MakeReign we created a digital experience better than any museum without the need for a visa or plane ticket.