Problem/Opportunity: Research shows visitors only give 3 seconds of attention to your website. How do we grab their attention directly to show our product?

Solution: Designed a loading animation that directs visitors' attention to the product without beating around the bush with aesthetics

Role: UI/UX Designer / Motion Designer / Rive Dev

Client/Brand: Stacks, a startup project for the Solana Collessum hackathon.

Services: Product Design, Framer Development

Tools: Figma, Rive, Framer

I kept coming across loading animations on the internet, which have aesthetic loaders but are applied on creative websites that are more design-focused, but what if we used these loading animations to cut to the chase and directly showcase our product?

Before adding any sort of motion, the hero sections must look like a well-curated landing page, which is complemented by meaningful and fitting motion animations.

Here's the static website after the loading animation, which was not yet designed, is supposed to look

After multiple iterations i released the animation has to have a smooth transition from the loading animation to "FIT" back in the Hero / Landing page.

The Animation places the product in place, which is intentionally cut out to force the viewer to get up from their chair 😂 and scroll, grabbing their attention and making them check out the rest of the product and website with intention.

Created a Live website with Framer integration. Smooth handoff between Rive and Framer thanks to the built-in Rive plugin in Framer.