Hero Banner
A deep dive into the ideation, asset generation, and interactive Rive build for a dynamic Swish hero banner.
Deconstructing Swish
I began by analyzing the existing Swish app and Zomato imagery. I wondered about the specific sizing they used, and exactly how they handled the transition from the hero banner down into the main page content.
Was it a linear switch? A gradient fade? A distinct pattern? Understanding this informed how my banner would integrate.
Consistent Food Imagery
To ensure visual consistency across all items, I utilized Gemini to generate an empty plate template first.
Using this base plate, I then generated various food items to sit on top of it. This guaranteed that the perspective, lighting, and plating remained completely uniform across the entire carousel.
Rive & Data Binding
I brought the assets into the Rive editor to construct the interactive rotating mechanism. The rotation logic is baked directly into the state machine.
Crucially, this setup is designed to be easily binded with data binding. The food images are not hardcoded—they can be swapped dynamically, making this banner highly reusable.
