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

2

215

INKBLOT is a fictional streetwear and illustration brand built around INDEL, a living ink spirit that crawled out of an old bottle and never went back. Mischievous, stylish, and impossible to erase, he was designed to stay unmistakably himself across poster, merch, stickers, social, and motion. I built the full mascot system in Recraft Studio, including the character, wordmark, consistency sheet, and final brand applications. Recraft project: https://www.recraft.ai/project/73370fc9-0bf4-4b59-8dec-63e04775f722 X post: x.com/Haseeb47176936/status/2072104076171739575 (https://x.com/Haseeb47176936/status/2072104076171739575?s=20)

2

188

Meet Dewey 💧 Your Favorite Water Enforcer Standard hydration trackers usually rely on boring, static progress bars. For my second entry into the @rive_app Interactive Character Challenge, I wanted to see if I could replace a progress bar with an emotional feedback layer that actually motivates the user. Enter Dewey. Instead of just checking a box, your input directly affects his well-being. At zero glasses, he is shriveled, dark, and gasping. But as you log your water intake, Dewey gets rehydrated and transforms into a plump, sparkling, fully-hydrated companion. Behind the Build: Vector & Rigging: Fully hand-crafted UI and character mesh, rigged specifically for dynamic state changes. Logic: Built a custom Rive State Machine to seamlessly connect the UI buttons (Register a Glass, Reset) to Dewey’s physical transformations. Audio Design: Baked custom timeline audio (gulping, squeaks, and dehydrated breathing) directly into the keyframes for frame-accurate sound design. Check out the video walkthrough below, or play with the live, interactive UI yourself right here: https://editor.rive.app/file/dewey/2389042?linkId=XBt_m1PzRkONnJuPjcgSMg X Post : https://x.com/Haseeb47176936/status/2070274218739355726?s=20

4

528

Meet The Sentry: a little security guard who lives inside your login screen. Instead of a standard progress bar, he acts as the UI's emotional feedback layer, reacting in real time to your password strength. As you type, his posture tells you everything you need to know. A weak password literally puts him to sleep, while a medium one makes him snap to attention. Nail a strong password, and he stands proud with his arms crossed. When you finally hit login, he either gives you a crisp salute on a success, or goes into full panic mode on a failure. Mess up too many times? He completely locks you out with a firm "nuh-uh" attitude. I designed the character from scratch in Adobe Illustrator, brought the layered SVG into Rive, and rigged him up using 4 bones and 7 distinct animations. The logic is all tied together with a state machine that listens to three specific inputs: a strength number, a success boolean, and a login trigger. To ground the whole piece, I built out a sleek mobile UI mockup directly on the artboard—complete with a phone frame, text fields, and a login button. It places him right where he belongs: inside a living, breathing product, rather than just floating in an empty void. X Post : https://x.com/Haseeb47176936/status/2069391146011480149?s=20

2

6

852

Muhammad Haseeb

Graphic Designer, Al-Assisted Web Developer & UI/UX Designer