Link table
Summary and 1 Introduction
2 related works
2.1 Program summary
2.2 Creativity support tools for animation
2.3 Generative tools for design
3 training stages
4 logomotion and input system 4.1
4.2 Visual pre-process information
4.3 Visually grounded code synthesis
5 reviews
5.1 Evaluation: Program repair
5.2 Methodology
5.3 Results
6 Assessment with beginners
7 Discussion and 7.1 Breaking with models
7.2 Generating code around the visual
7.3 Limitations
8 Conclusion and references
7 discussion
We introduce an automated approach to animation, which shows how LLMs can be applied to a highly complex visual task involving awareness, sequencing, and coordinated screen movement.
7.1 Model Romance
Templates and presets are the standard approach to animation for both beginner designers and everyday creators. Beyond logos, they’re the norm for applying motion to content of all types (e.g. slideshows, videos, motion graphics, etc.), but from our experience, we’ve found that they can be brittle and lack flexibility. LLMs can open up the motion design space quite a bit for beginner designers. They can start with a custom animation for their content, rather than working backwards to make a template work for them. This approach can benefit beginner designers, who can have an alternative to searching for templates and template creators, who have to continually come up with new ways to populate template galleries. Additionally, Logomotion has shown that beginners can quickly find animation options they’re happy with and easily customize animations using natural language.
7.2 Generating code around the visual
We focused on generating code for animated logos, a highly specified type of design artifact for which we made design assumptions (e.g., the presence of a primary element). However, there are many more design patterns and types of logos and layouts that Logomotion could expand upon. For example, Logomotion’s LLM method can also be applied to layouts such as square social media posts (e.g., flyers), email banners, and digital brochures. Each format has different “rules” and design norms. For example, the zero-hero effect required for logos is not as relevant to these other forms of visual communication, which may be more text-heavy and prioritize the display message (thus requiring more minimal or subtle animation). A next step for this work could be to look at how the callouts, which are built into this pipeline, could be modified depending on the layout type to make the pipeline more flexible overall.
Furthermore, we found that the design concept stage was important in several ways. This stage created a tighter coupling between the image layers and their semantic content, and gave the code more scaffolding for how it could be implemented in terms of translation, flexibilization, timing, and duration. Furthermore, in our early exploration with pipeline prompts, we found that when queried multiple times on the same layout without a design concept, LLMS would tend to produce the same or similar animations upon execution (e.g., a car would slide in from the left blade of the screen each time). The design concept stage helped diversify the range of design options presented to users. It is also a novel instance of how a technical specification for code can be provided in narrative form (a story for the design elements) rather than as a technical specification or pseudocode, as is often done in the code generation literature.
