Apple Researchers Introduce Keyframer: An LLM-Powered Animation Prototyping Tool that can Generate Animations from Static Images (SVGs)

Large language models (LLMs) promise to revolutionize various creative fields, including animation, but face challenges in effectively interpreting natural language descriptions of motion. Recent research has demonstrated LLM-powered design tools across visual design, creative writing, and 3D modeling, leveraging natural language prompts to democratize design processes and foster skill development. However, adapting prompting strategies from text-to-image generators to new domains remains to be determined, necessitating further exploration of domain-specific requirements.

The rise of LLMs such as ChatGPT4 has spurred interest in applying generative AI to design fields. Challenges in Human-Computer Interaction arise from the uncertain nature of generative design. Natural language input lowers barriers to creative engagement. Various interface paradigms, including co-creation with AI, have been proposed across graphic design, software development, writing, and more. Current research focuses on developing effective prompting strategies for steering output in generative AI tools, with efforts to visualize related keywords and provide multiple options to support user’s creative processes. A common challenge in natural-language-based productive AI tools is developing effective prompting strategies for steering generated output.

The researchers from Apple have proposed Keyframer, leveraging LLMs for animation design, a less explored domain where technical skills span motion design principles and coding. They argue that more than one-shot prompting interfaces are needed for animations, necessitating iterative construction. Keyframer is an AI-powered animation tool combining language-based prompting with LLM code generation. Keyframer enables users to create animated illustrations from static images via natural language, supporting refinement and iteration through sequential prompting and direct editing features.

Keyframer utilizes natural language prompts to generate CSS animations. Users input Static Vector Graphics (SVG) code and prompts, with Keyframer providing real-time feedback on animation previews. The system supports iterative design exploration and refinement through multiple editor modes, including direct CSS editing and property-specific UI controls. It allows users to build animations with sequential prompts iteratively and provides a sidebar for saving and revisiting favored designs.

The study evaluated Keyframer, a tool leveraging LLMs for animation design, with 13 participants across various skill levels. Overall satisfaction was high, with users appreciating Keyframer’s efficiency and support for animation prototyping. Users employed decomposed and holistic prompting strategies, with semantic prompts proving effective. Keyframer facilitated exploration and refinement through code editing and promoting, empowering users to iterate on their animation designs effectively.

In conclusion, the researchers from Apple present Keyframer for empowering Animation Design using LLMs. Keyframer utilizes LLMs to support iterative animation design by integrating natural language input and code generation. It underscores the importance of enabling users to refine their designs through prompting and code editing. It highlights the beneficial role of unexpected LLM output in inspiring creativity. The study suggests avenues for future animation design tools that blend generative capabilities with dynamic editors for enhanced creative control and iteration.

Check out the Paper. All credit for this research goes to the researchers of this project. Also, don’t forget to follow us on Twitter and Google News. Join our 37k+ ML SubReddit, 41k+ Facebook Community, Discord Channel, and LinkedIn Group.