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

TL;DR

LogoMotion introduces a visually grounded approach to automatic code generation and editing for logo animation. By combining visually grounded code synthesis and visually grounded program repair with code connected editing widgets, LogoMotion generates semantically meaningful animations and enables intuitive user edits via a narrative timeline, layer panel, and quick actions. In large scale evaluations, LogoMotion outperformed an industry tool on relevance to the logo design and achieved a high repair success rate of up to 96% with visual context, while novices using the editing widgets demonstrated greater exploration and longer iteration. The work argues for broader applicability to other design tasks and outlines practical system design decisions to balance semantic control with precise GUI based 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.

Figures (9)

• Figure 1: Visually-Grounded Code Synthesis Overview. In Step 1, a PDF of a logo is converted into an HTML representation of the canvas. In Step 2, LogoMotion augments the HTML with information from visual analysis steps. In Step 3, LogoMotion suggests a design concept for the animated logo. In Step 4, a VLM implements animation code for the design concept. This code animates the logo HTML.
• Figure 2: Visually-grounded program repair takes visual feedback from the canvas to self-debug animation code errors. It identifies bugs in animation code by checking for differences between elements in the target layout and elements in the last frame of the animation. If there is a visual error, a VLM receives 1) an image pair of the element with an error (the rest of the layout behind the skier element is pictured only for context), 2) a bug description, and 3) the original code. It outputs a code fix that is merged back into the animation code.
• Figure 3: LogoMotion provides users code-connected widgets to edit their animation. It provides quick actions (B), a narrative timeline (C), a layer panel (D), and prompt-based interactions (E). These widgets help users make targeted edits to the motion, grouping, and timing of their animation. An example animation edit output is shown in (F).
• Figure 4: Comparison Study. a) Examples of LogoMotion-generated logo animations. These animations show how LogoMotion is able to create motion that is characteristic of the design elements, layout-aware, and logically sequenced. b) We report the average top-2 relevance across conditions. LogoMotion was rated to be significantly better in terms of relevance to canvas content.
• Figure 5: When LogoMotion is given more attempts to debug each error (increase in $k$), LogoMotion improves in solve rate. The trend is higher when image context is provided ($Repair_{+Imgs}$). Bars represent standard error.