Pip's Delivery Co. | Interactive File Upload UI

Overview Waiting for files to upload is usually pretty boring. For my final entry in the Rive interactive character challenge, I wanted to see if I could make a standard progress bar a bit more fun. Meet Pip, a digital courier who reacts to your file sizes.

The Concept Instead of a standard loading spinner, I tied the animation directly to the size of the upload. Small files are a breeze for him, but if you drop a massive 5GB file into the drop-zone, he physically struggles and starts sweating. It’s just a simple trick to make the wait time a little more entertaining.

Under the Hood The whole component is pretty lightweight and runs on a single number input in Rive (fileSize).

Simple Logic: I mapped that one input to three different animation timelines, allowing Pip to smoothly transition from a happy, bouncy flap to a heavy, exhausted struggle depending on the number.

Adding Weight: To sell the illusion of a heavy file, I used some slight downward translation and scaling. When the file size gets larger, gravity actually pulls him down a bit in the UI.

The Interface: I wrapped the character in a clean, minimalist frosted-glass card. I wanted the overall design to still feel like a functional piece of software you'd actually use, letting the Rive animation provide all the personality.

The Result A fun, interactive UI component that proves functional design doesn't always have to take itself so seriously. Rive Project : https://editor.rive.app/file/pip/2393868?linkId=pdg68woDFU2Crc0OcHmPCA X Post : https://x.com/Haseeb47176936/status/2072435026470531133?s=20