Yoga Concept

React, Theme UI, Framer Motion
Yoga Concept
Yoga Concept

Yoga Concept

React, Theme UI, Framer Motion

The star of this concept site is its homepage. I experimented with different approaches and technologies while developing this page. However, Technology aside, the exciting part of this project was collaborating with videographers and designers to make this homepage come to life.

This project allowed me to efficiently load thousands of images for a single page as the user scrolls. First, I utilized Framer Motion motion values to determine how far down the page a user has scrolled and their position in the current “scene.” Then, based on those numeric values, I display a single image from a sequence of images. The result is a user-controlled motion effect.

Optimized videos are also utilized throughout the homepage but only shown if they are fully loaded. This approach allows the experience not to be interrupted by media that is not fully loaded.

In addition, this application utilizes Theme UI to maintain consistency throughout its components.