Pssst. We’re building a React & Apollo version of the
platform! Keep us in mind for your next digital project.
Bodyglide Responsive E-Commerce Website: Home Page with Animated Heroes on iPad, iMac, MacBook Pro, and iPhone
Custom Animated Heroes on Home Page

The slanted cut of the hero images on the home page carousel is accomplished purely through code, as are the color-adaptive headers, and the shading which creates the subtle three-dimensional effect.

Custom Animated Heroes on Home Page

The slanted cut of the hero images on the home page carousel is accomplished purely through code, as are the color-adaptive headers, and the shading which creates the subtle three-dimensional effect.

Bodyglide Responsive E-Commerce Website: Color-Adaptive Headers - Sample Pages on MacBook Pro, iMac, iPhone, and iPad
Site-Wide Color-Adaptive Headers

The color-adaptive header adjusts to complement the hero image– a custom feature that gives each page a unique feel, while maintaining a consistent brand identity.

Site-Wide Color-Adaptive Headers

The color-adaptive header adjusts to complement the hero image– a custom feature that gives each page a unique feel, while maintaining a consistent brand identity.

An adaptive and responsive product marketing website.

Whether you are an athlete dealing with the side-effects of endurance sports, or a fashion addict that can’t help but power through wearing blister-inducing shoes, it turns out, this is a product you might use to ease that trouble. So, a website marketing it somehow needs to appeal to these disparate audiences (and then some).

How do you do that? With a beautiful, responsive e-commerce website overflowing with targeted content, of course. And, it doesn’t hurt to have some eye-candy features, like the custom animated heroes and saturation-based focus components discussed below.

Bodyglide Responsive E-Commerce Website: Custom Animated Heroes & Color-Adaptive Headers, Slide 2
Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Bodyglide Responsive E-Commerce Website: Custom Animated Heroes & Color-Adaptive Headers, Slide 2
Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Bodyglide Responsive E-Commerce Website: Custom Animated Heroes & Color-Adaptive Headers, Slide 3
Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Bodyglide Responsive E-Commerce Website: Custom Animated Heroes & Color-Adaptive Headers, Slide 4
Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Custom Animated Heroes & Color-Adaptive Headers

As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.

Custom animated heroes and color-adaptive headers enliven the experience.

One of the unique custom features of the site is that on every page, an algorithm reads the color palette of the hero image, and sets the color of the header to complement it. On the home page, the algorithm reads only the background image; on other pages, if there is a foreground image, it is also incorporated into the metric. This process creates a beautiful custom look that maintains the style of the brand, while best complementing the imagery that targets specific user groups.

Side Note: In the video animation above, we’ve sped up the length of the pause between each animated header, just so you can see the full collection without having to wait around too long.

Bodyglide Responsive E-Commerce Website: Saturation-Based Focus on Blog Listing Page
Top of the Page

When you arrive at the blog listing page, the header, hero image, and top post are in color, but the subsequent post is desaturated down to greyscale.

Bodyglide Responsive E-Commerce Website: Saturation-Based Focus on Blog Listing Page
Scrolling Down

As you scroll down, the the hero image and top post desaturate to greyscale, while the saturation of the next post rises up to full color, directing user focus to it.

Scrolling Down

As you scroll down, the the hero image and top post desaturate to greyscale, while the saturation of the next post rises up to full color, directing user focus to it.

Bodyglide Responsive E-Commerce Website: Saturation-Based Focus on Blog Listing Page
Keep Scrolling...

Scrolling even further, you see that the following post, is still grey, as it is not yet intended to catch your eye.

Keep Scrolling...

Scrolling even further, you see that the following post, is still grey, as it is not yet intended to catch your eye.

Bodyglide Responsive E-Commerce Website: Saturation-Based Focus on Blog Listing Page
Even More..

Then, it saturates up to color to direct your focus to it, instead of the one before, and so on, as scrolling continues.

Even More..

Then, it saturates up to color to direct your focus to it, instead of the one before, and so on, as scrolling continues.

Saturation-based focus guides the reader.

Taking a cue from architectural rendering, the blog listing page uses color to direct the focus of the user by raising and lowering the saturation of a post from full color to greyscale, though a fade-in/face-out transition governed by scrolling behavior.

Hey, we hope you liked our work!

Would you like to check out the services we offer?

Interdisciplinary Design

Our team is trained to solve problems holistically, designing for digital, physical, and hybrid applications using an integrative design process.

Full Stack Web Development

Our award-winning design & development team is unique in that we not only can geek out over the technical specs, but we can also hold our own with a room full of designers.

Custom Crafted Content

Whether it’s through the written word, through visual storytelling, or through the combined forces of both, we craft tailored content to help you get your message seen and heard through all the noise.

Can we help you with anything?

Or, would you like to join our (rarely used) mailing list?

Feel free to reach out with any questions you may have for us about our services, our work, or anything else that’s got you curious.

Get in touch.