LogoMotion: Visually-Grounded Code Synthesis for Creating and Editing Animation

TL;DR

LogoMotion is an AI-powered tool that simplifies logo animation creation and editing for novices by automatically generating semantically meaningful code through visual analysis and providing interactive widgets for control and refinement.

Contribution

It introduces visually-grounded code synthesis and program repair for logo animation, enhancing content-awareness and user control compared to existing tools.

Findings

LogoMotion outperforms industry-leading tools in content-aware animation generation.

Code-connected widgets improve user control and creative expression in animation editing.

User study shows effective assistance in animation creation and editing.

Abstract

Creating animation takes time, effort, and technical expertise. To help novices with animation, we present LogoMotion, an AI code generation approach that helps users create semantically meaningful animation for logos. LogoMotion automatically generates animation code with a method called visually-grounded code synthesis and program repair. This method performs visual analysis, instantiates a design concept, and conducts visual checking to generate animation code. LogoMotion provides novices with code-connected AI editing widgets that help them edit the motion, grouping, and timing of their animation. In a comparison study on 276 animations, LogoMotion was found to produce more content-aware animation than an industry-leading tool. In a user evaluation (n=16) comparing against a prompt-only baseline, these code-connected widgets helped users edit animations with control, iteration, and creative expression.