An interactive clock built in Rive with visuals generated by Adobe Firefly. The idea was to combine AI-generated art with real-time animation — the clock face is Firefly, the motion is Rive, and they work together seamlessly.
Clocks are a great canvas for interactive animation because they're inherently stateful — the time is always changing, so the animation is always relevant. I wanted to see what happens when you pair that with AI-generated aesthetics.
Firefly for the visuals — I generated several clock face concepts in Adobe Firefly, looking for textures that would work with overlaid animated hands. The best ones had depth and grain — qualities that make flat vector hands feel grounded.
Rive for the motion — the clock hands are driven by number inputs (hours, minutes, seconds) that map to rotation. But it's not just rotation — each hand has a subtle overshoot on tick, and the second hand has a sweep option vs. tick option, switchable via a boolean input.
Interactive elements — tapping the clock face cycles through Firefly-generated themes (brass, ceramic, wood). Each theme transition is a cross-fade handled by Rive's blend states. The hands maintain their position during the transition.
AI-generated assets are usually static — you generate an image and place it. This project treats Firefly output as a texture layer inside an interactive system. The AI art becomes a material, not a finished piece.
Adobe Firefly — clock face textures and themes Rive — real-time animation with number inputs and blend states