Inspiration
Logos are everywhere, but animating them typically requires specialized skills in animation and coding. Animify bridges this gap by using Claude Sonnet 3.7 to understand your logo and how it should move naturally.
It uses the SVG image format which is available on every design software.
The application analyzes your SVG's structure, identifies individual layers, and suggests animations that make sense for each element—whether it's a bird that should fly, a wave that should undulate, or text that should fade in at just the right moment.
What it does
Takes in an SVG file -> Breaks it down into layers -> Animates it.
It's that simple.
How we built it
We built it around Claude 3.7 Sonnet.
Claude analyzes the logo and its different layers to generate an animation concept.
It then writes animation code based on the concept. This code is a combination of its own unique code and calling preset animations that we've exposed it to.
It then renders the code as a web-based animation that we then export.
Challenges we ran into
Figuring out how to export the animation smoothly.
Accomplishments that we're proud of
The Prompt Engineering that led to a lot of cool animations and interactions with the model.
What we learned
How to engineer around AI models and create products people want.
What's next for Animify
We're going to launch it as a micro service that allow people to animate their logos for a flat fee.
Built With
- animate.css
- anime.js
- claude
- next.js
- react
- shadcn
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.