The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Meet Cosmo, the AI mentor for the CodeSignal learning app and my entry for the Rive Character Challenge.
He celebrates your progress and gives feedback when your answer isn't quite right. Depending on the situation, he can be playful and funny, sad or disappointed, thoughtful, or full of energy.
Cosmo remains visible for most of the learning experience, either at the top or bottom of the screen, and constantly responds to user actions.
I created a system of expressions that can be mixed and matched with hand gestures to form many different combinations. This allows Cosmo to feel less predictable and react naturally to the user's actions in any situation.
To keep the runtime lightweight, I created different rigs for different poses and used the same facial animation library for all of them.
• 36 reusable facial expressions
• 10+ animated poses
• Reactions to user answers, learning progress, and achievements
• Mix-and-match facial expressions and gestures for more varied feedback
• Light and dark mode support with runtime colour switching
• UI animations
• Day Streak animation
Product: Cosmo: Learn GenAI & More
You can check out a sitting pose here: https://rive.app/s/MiVniVKA-0ODUjtcaOXRTA/?runtime=rive-renderer
This file includes 5 gestures (at the top) and a set of expressions.
Each gesture and expression has its own trigger.
To create a combination, choose an expression from the "Expression" list, then trigger a gesture. The default expression is "Correct_nod".
I hope you enjoy getting to know Cosmo as much as I enjoyed bringing him to life =)
Great
Recent Brand Work ⚡️
Kairos is a high-end sales platform helping brands work through AI-engineering their RFP's and get a competitive advantage over other manually filled out RFPs. ☁️
Client sourced via @Contra HQ - been a great collaboration so far! ✅
Like the logo and vibe in general! Cozy office style
UhA UhA!
Another entry for the @Rive Character Challenge on Contra. This time with a personal project where I'm still developing the visuals.
This character is just hungry and losing his baby teeth.
Inspired by the song "The Cannibal Kid," I developed this peculiar child as part of a future musical interaction.
Here's a bit of the rigging and animation mixing process.
UhA UhA! And just say UhA!
::::::::::::......::::::::::::.......::::::::::::......::::::::::::......:::::::::::......::::::::::::......::::::::::::
Love the character design and overall project aesthetic. Gives the old school animation vibes while staying clean and not too cartoony. Lovely work, thanks for sharing!
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
fifaworldcup2026
The World Cup is here and the whole world's watching. How are you designing for the world stage?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?