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
Making game UI more engaging with animation
To help attract players’ attention, I created a looping bounce animation for both the gift box and coin stack, along with a subtle gleam effect to make the rewards feel more eye-catching.
Since the message box uses a responsive layout, I used constraints, Follow Path, and Data Binding in Rive to connect the animations to the layout while keeping everything flexible and responsive.
It was a great opportunity to combine animation and interactive UI techniques to make the experience feel more dynamic without being too distracting.
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
We can't wait to kick off the Rive Halloween Challenge 🎃
We're challenging you to build haunted UI, eerie shader effects, 3D scenes, and spooky games using two of our newest tools: the Rive CLI and GPU Canvas.
Find out more here 👀
Paws & Pour: 3D Interactive Booking for Experiential Cafés 🐾
Business Name: Paws & Pour Cat Café
Location: Kemang, South Jakarta
Archetype: Appointment-based Experiential Café
Realistic Problems:
The solo owner is drowning in WhatsApp DMs and playing "table tetris" every single day. Customers don't just want any table; they want to sit near specific resident cats (like Mochi or Pepper). Additionally, due to high demand, the café strictly caps visits at 30, 60, or 90-minute sessions. This causes endless back-and-forth messaging, manual double-booking errors, and frustrated walk-ins.
I transformed a chaotic, manual DM-based reservation process into a self-serve, mobile-optimized 3D map, allowing guests to independently secure their exact table, time slot, and preferred cat companion instantly.
Fixing the Front Door :
To turn an inbound inquiry into a confirmed booking with zero effort from the owner, I completely redesigned the customer-facing booking flow. Instead of a boring, standard form, I built an immersive 3D seating map where customers can:
- Pick Their Vibe: Visually explore the café layout and select a specific cozy corner. See where their favorite resident cats are currently hanging out on the map.
- Lock in the Rules: Select precise session lengths (30, 60, or 90 minutes) during the booking process, automatically setting expectations.
- Book Anywhere: Experience a flawless, fully mobile-optimized booking journey directly from their phone.
The Impact:
The owner’s manual work goes from hours of coordinating schedules, answering DMs, and managing table assignments to zero. The real-time admin portal automatically handles availability, updates the seating chart, and tracks guest sessions. The owner can finally focus on running the café and taking care of the cats instead of staring at a screen.
Lovable Public Link: https://paws-and-pour-cafe.lovable.app/
Social Post: Check on twitter!
#lovable #catcafe #cat #webdesign
3D interaction while booking looks great!
I built Hanabi as an interactive archive for a five-generation Japanese fireworks workshop. Instead of putting their history and summer schedule on a plain editorial layout, I set the entire page against an active night sky over a river. As you scroll down the page, mortars fire from the banks and break directly behind the reading text.
The interface gives visitors direct control over what is firing. You can switch between 4-sun, 8-sun, and 12-sun calibers and launch four traditional shell types. Kiku throws a tight sphere of tailed sparks. Botan expands fast and vanishes instantly without trailing smoke. Yanagi drops heavy charcoal-gold streamers down toward the waterline, and Kamuro produces a slow glittering crown that floats near the apex before dying out.
Under the hood, everything runs on a raw HTML5 Canvas particle loop with sound effects synthesized in real time via the Web Audio API. Stepping up to larger calibers increases the launch velocity, extends the climb duration, raises the explosion height, and spawns more stars. Each particle recalculates air resistance, gravity falloff, color fade, and alpha trails every frame. At the bottom edge of the screen, a mirrored pass draws soft vertical reflections over the water, and reaching the end of the text dims the interface so a scheduled finale can take over the canvas.
Most of my tuning time went into balancing contrast. If I threw too many particles into the air at once, the background got muddy and the text became impossible to read. The shells started looking right only after I dialed in drag math and burn lengths instead of adding more particles. Getting the willow trails to stall at their peak and drift down toward their water reflection made the whole scene feel physical without fighting the typography.😊
