The AI
Animation Editor
Not just a generator. Type a sentence, get a real vector, animate it on a full GSAP timeline, and export a production-ready React component straight into your codebase.
Sentence in. Motion out.
A real prompt: generated, animated, and exported in front of you. This is not a mockup.
useGSAP(() => {
gsap.timeline({ repeat: -1, yoyo: true })
.to("#cheeks", { rotation: 10 })
.to("#body", { y: -6 }, 0);
});Super Simple.
No Limits.
Generate an SVG and edit it on the spot: every layer named, every node draggable. There is no limit to what you can create.
No pen-tool PhD, no import/export dance. One canvas from first word to final asset.
Cute Cat
Cute Banana
Cute Couple
Cute Dog
Cute Chick
Cute Apple
Cute Bird
Cute Raccoon
Angry Hedgehog
Cute Spider
Cute Bug
Nice House
A Full Motion Engine.
Timeline. Keyframes. GSAP.
Not a preset pack: a real timeline with keyframes, easing, motion paths, morphs, warp cages and bone rigs.
Every part is grouped meaningfully, so posing and animating feels like After Effects - minus the learning curve.
Export React + GSAP.
Straight Into Your Codebase.
One click turns your animated vector into a production-ready React component powered by GSAP - or clean raw SVG.
Readable code, named layers, no messy exports. Paste it in and ship.
1import { useRef } from 'react';2import { gsap } from 'gsap';3import { useGSAP } from '@gsap/react';45export const Raccoon = () => {6 const ref = useRef(null);78 // the timeline you built in Stew, as code9 useGSAP(() => {10 gsap.timeline({ repeat: -1, yoyo: true })11 .to('#tail', {12 rotation: 12,13 transformOrigin: '20% 80%',14 ease: 'sine.inOut',15 duration: 0.6,16 })17 .to('#left_ear, #right_ear', {18 scaleY: 1.15,19 stagger: 0.08,20 }, 0)21 .to('#body', { y: -6 }, 0);22 }, { scope: ref });2324 return (25 <svg ref={ref} viewBox="0 0 375 375">26 <g id="body">{/* ... */}</g>27 <g id="tail">{/* ... */}</g>28 <g id="left_ear">{/* ... */}</g>29 {/* every layer named + editable */}30 </svg>31 );32};Infinite Scaling.
Crystal Clear.
Resolution independent vector graphics ensure your assets look crisp on any screen size.
Scale from a tiny icon to a massive billboard perfectly.
Super Simple.
No Limits.
Generate an SVG and edit it on the spot: every layer named, every node draggable. There is no limit to what you can create.
No pen-tool PhD, no import/export dance. One canvas from first word to final asset.
Cute Cat
Cute Banana
Cute Couple
Cute Dog
Cute Chick
Cute Apple
Cute Bird
Cute Raccoon
Angry Hedgehog
Cute Spider
Cute Bug
Nice House
1import { useRef } from 'react';2import { gsap } from 'gsap';3import { useGSAP } from '@gsap/react';45export const Raccoon = () => {6 const ref = useRef(null);78 // the timeline you built in Stew, as code9 useGSAP(() => {10 gsap.timeline({ repeat: -1, yoyo: true })11 .to('#tail', {12 rotation: 12,13 transformOrigin: '20% 80%',14 ease: 'sine.inOut',15 duration: 0.6,16 })17 .to('#left_ear, #right_ear', {18 scaleY: 1.15,19 stagger: 0.08,20 }, 0)21 .to('#body', { y: -6 }, 0);22 }, { scope: ref });2324 return (25 <svg ref={ref} viewBox="0 0 375 375">26 <g id="body">{/* ... */}</g>27 <g id="tail">{/* ... */}</g>28 <g id="left_ear">{/* ... */}</g>29 {/* every layer named + editable */}30 </svg>31 );32};Start animating now
Your first animated vector is one sentence away.