← View All Ashandelle Work

KUNGFU.AI Homepage Hero

KUNGFU.AI Homepage Hero

Ashandelle has a philosophy when it comes to animation on the web. It should be purposeful, it should aid the user in understanding something or, put another way, it should aid the company in explaining something, and it shouldn't distract from other content on the page.

We often implement animation or motion design in specific areas:

  • High-impact areas such as homepage, product, or about page heroes
  • Areas where an animation can better explain a concept than a static image
  • Where we want to draw the user's focus (example: calls-to-action)\Here, we've implemented design, animation, and interactions in a cohesive way throughout the KUNGFU.AI website to enhance the experience and drive specific actions.

Here, we've implemented design, animation, and interactions in a cohesive way throughout the KUNGFU.AI website to enhance the experience and drive specific actions.

In this example, the hero components—sky divers, data lines and dots, and shape lines at the bottom of the hero—have a parallax effect on scroll to create visual interest. By limiting the animation to when the user is scrolling, we avoid distracting them from the content on the page.

On the right-hand side, we've added an expansion effect to key resources on hover to entice users to click.

Even the lines at the bottom of the hero are purposeful. KUNGFU.AI is an AI services company that helps other companies use AI/ML to improve business outcomes. The lines start out spread apart and then, on scroll, come together on scroll like a blurry image coming into focus.