Graphic Design

Rive Animation

Figma (Graphic Design)

Rive (Animation & Interactive Design)

After Effects (Video Compositing)

This interactive animation asset was designed with elementary science education in mind, using Rive to create an engaging and hands-on learning experience.

Learners can move a magnifying glass with their cursor to observe the surface of a leaf up close. By clicking, they can zoom in further to see a short looping video of chloroplasts moving inside the leaf cells.

The project began with creating the visual design in Figma. Since the content targets young learners, I used real photo references as a base and layered sketchbook-style textures to add warmth and a tactile, educational feel. All images were compressed and optimized before importing into Rive to ensure smooth performance.

All images were compressed and optimized before importing into Rive to ensure smooth performance.

The chloroplast footage was sourced from Adobe Stock (in .mov format) and edited in After Effects to adjust brightness, timing, and length.

It was exported as an image sequence, allowing Rive to play it frame by frame as a looping animation component.

After importing the assets into Rive, I set up all interactions and animations, including:

Mouse hover and follow animation for the magnifying glass

Frame-by-frame loop animation of chloroplast movement

Click (Mouse Down) interaction to toggle between still and animated states

This project is a case study of interactive EdTech content, demonstrating how Rive’s animation and state machine features can bring scientific concepts to life in a playful and intuitive way — helping students “learn by touching.

Rive render preview : here