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
Title : EcoCity Guardian AI – Interactive Smart City Dashboard
Description : EcoCity Guardian AI is an advanced, fully interactive dashboard designed for real-time monitoring of urban environmental data. The project features an intelligent AI character that serves as the central interface, providing visual feedback based on pollution levels. By integrating dynamic data visualization with responsive character animation, the dashboard autonomously transitions between safe (Green), warning (Blue), and danger (Red) states. Every element, from the AI’s facial expressions and eye movements to the energy, water, and traffic metrics, reacts in real-time to user input, offering a cohesive and immersive city monitoring experience.
How I Built It :
This project was entirely designed and developed within Rive, utilizing its core features to create a seamless interactive experience:
State Machine Logic: I utilized Rive’s State Machine to manage complex logic, enabling the dashboard to trigger specific animations and data updates based on input changes.
Interactive Listeners: I implemented custom Listeners combined with Opaque Targets, allowing for direct, real-time user interaction with the dashboard buttons.
Dynamic Data Synchronization: The dashboard features synchronized animations where UI bars (Pollution, Energy, Water, Traffic) and text values update automatically to reflect the current city status.
Organic Character Animation: I achieved a living AI guardian effect by utilizing image sequences combined with breathing animation keyframes and cubic interpolation for smooth, realistic movement.
Emotional & Crisis Response: The system includes nuanced state transitions, such as accelerated eyeball movement during high-pollution (Red) alerts, providing immediate visual feedback on the city's health.
Wow, everything bases on meshes? Nice!
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 all use file transfer services like WeTransfer or SwissTransfer daily, but the experience is often quite austere.
For the #RiveChallenge, I wanted to inject some fun and original interaction into this mundane step.
The Concept The goal was to create the sensation that there is a character behind the screen, as if the user is looking through a window with a plunging view into a tech-colored environment.
The interaction transforms a simple loading bar into a playful moment.
Technical Process & Challenges To achieve the specific visual style and interaction, I had to push the technical capabilities of Rive:
Custom Strokes: I built tapered strokes directly using Luau scripts to get the desired organic look that standard strokes couldn't provide.
Advanced Scrolling: The interaction required a custom scroll model with more options than the default, which also had to be handled via Luau scripting.
From 2D Rough to Final A significant part of my process involved creating a 2D rough animation in Animate first. This was crucial to validate the system mechanics and get a quick preview of the motion, similar to an animation film pipeline.
Initial Concept: During creation, I explored using the scroll system for micro-narratives (where each scroll tells a small story about the character falling, etc.). While this is a feature for a larger future project, I stuck to the initial interactive concept for this challenge.
Refinement: The 2D rough served as the guideline for the final keyframing work in Rive.
Try it out Here !
I hope you enjoy this concept as much as I enjoyed building it. I invite you to test the interaction and have fun with it.
(Optional: You can see the 2D rough version that guided the keyframes here: https://rive.app/s/EJWSVx8gUUakzES_Aok5uA/?runtime=rive-renderer)
#RiveChallenge #InteractionDesign #Luau #MotionDesign #UX #Animation
so sick!! 🔥
Is it too hot for a ginger?
Look up a cities weather and see if it's safe for a ginger to go out in.
This let's you look up a cities weather and see if it's safe for a ginger to go out in. Ginghee, our character, reacts in real time to the temperature data. It connects to weather API, so the data is live and the Rive animations update instantly.
Silly ideas are the best.
Nice man!
Mood Companion
Mood Companion is an interactive onboarding character designed to make the first moments inside an app feel warm, welcoming, and engaging.
When the app opens, the bear greets the user with a friendly wave and asks, "Hello, how are you?" The user can express their mood through buttons or a continuous emotion slider, while the bear responds with natural facial expressions, head movement, and body language.
The interaction extends beyond the character itself. As the bear's mood shifts, the surrounding sky responds as well, creating a shared emotional environment rather than changing the character alone. The bear also follows the user's pointer, making the experience feel more natural and connected.
The goal was to design a character that feels like a part of the product experience—one that welcomes, guides, and emotionally connects with the user from the very first interaction.
Built entirely in Rive using State Machines, Blend Trees, Data Binding, and interactive inputs. https://editor.rive.app/file/sweetbearworkingmedozaprimer/2354577 https://www.instagram.com/reel/DaMx4a9vZBE/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
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.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
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?