3-in-1 Cup Animation (Concept Loop + Motion Mechanics Demo)

Hero Animation in Live Website Context
Shows how the animation integrates into the WesCup homepage layout, positioned alongside supporting content.

Project Overview

This project is a website hero animation created for WesCup, a product designed to hold three different beverages in a single cup using separate internal compartments.

The goal was to clearly and quickly communicate the product’s core functionality through motion — showing how three distinct drinks can be filled, accessed, and enjoyed simultaneously — all within a seamless 10-second loop suitable for a homepage hero placement.

Process & Concept

The animation visually walks the viewer through the product’s functionality by filling the cup with three differently colored liquids, followed by the appearance of three straws, one for each compartment.To add visual interest and smooth transitions, I introduced fruit and ice elements that act as motion bridges between states, keeping the animation engaging while maintaining clarity.Because the animation was designed to live on the right side of the website layout, with text and UI content on the left, composition and negative space were carefully considered to ensure the motion complemented — rather than competed with — surrounding content.

Motion & Loop Mechanics

A key requirement was that the animation loop seamlessly without drawing attention to the reset point.I designed the timing and transitions so the end state naturally flows back into the beginning, creating a continuous, polished loop suitable for extended viewing in a hero section.Motion pacing was intentionally kept smooth and readable to support quick user scanning while still rewarding longer viewing.

My Role

Concept & Motion Design: Developed the animation concept to clearly communicate product functionality

Loop Design: Engineered a seamless 10-second loop optimized for hero placement

Visual Transitions: Designed fruit and ice transitions to add energy and cohesion

Web Context Awareness: Composed animation to fit a right-aligned hero layout alongside text content

Outcome

The final animation functions as a clear, engaging hero visual that demonstrates WesCup’s unique value proposition at a glance. It balances clarity, visual interest, and performance-friendly looping — making it effective for both first-time visitors and repeat viewers.