A little interactive experiment I made in Rive, just for fun, exploring how animations and playful interactions can bring a retro-futuristic illustration to life. The view outside the window also syncs with the viewer's local time.
Play with the music player, hover over the clock, and move your cursor around. There are a few more surprises to discover!
The first rough sketch, exploring the composition and overall atmosphere of the scene.
A quick look at how the scene came together in Adobe Illustrator, from basic shapes to the final vector illustration.
After importing the illustration into Rive, I gradually brought the scene to life by adding small animations to different elements.
Next, I set up data binding in Rive, connecting different elements and properties to prepare the scene for interactivity.
I created and refined all 24 hourly states of the city outside the window, showing how the scene changes throughout the day and night.
Finally, I used a bit of JavaScript to bring everything together in a web build, adding music playback and syncing the scene with each visitor's local time.
