Your Full-Stack
Vector Animation Editor
Not just a generator. Type a sentence, get a real vector, animate it on a full timeline, and export production-ready code for React, Vue, Angular or plain HTML. Video too.
Sentence in. Motion out.
A real animation editor, with AI as the sous chef. Chat when you want, edit every layer yourself, export production code. This is not a mockup.
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. Easing.
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 to React.
Straight Into Your Codebase.
One click turns your animated vector into a production-ready React component, or clean raw SVG.
Readable code, named layers, no messy exports. Paste it in and ship.
1import { useLayoutEffect, useRef } from 'react';2import { mount } from '@stew-engine/player';34// the timeline you built in Stew, as data5const SCENE = { v: 1, doc: { duration: 1.2, tracks: [6 { targetUid: 'tail', property: 'rotate', keyframes: [7 { time: 0, value: 0, easing: 'sine.inOut' },8 { time: 0.6, value: 12, easing: 'sine.inOut' },9 { time: 1.2, value: 0 },10 ] },11 /* ...the ears and the body */12] } };1314export const Raccoon = () => {15 const ref = useRef(null);1617 // Stew Engine plays it on your artwork18 useLayoutEffect(() => {19 const scene = mount(ref.current, SCENE);20 return () => scene.destroy();21 }, []);2223 return (24 <svg ref={ref} viewBox="0 0 375 375">25 <g id="body">{/* ... */}</g>26 <g id="tail">{/* ... */}</g>27 <g id="left_ear">{/* ... */}</g>28 {/* every layer named + editable */}29 </svg>30 );31};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 { useLayoutEffect, useRef } from 'react';2import { mount } from '@stew-engine/player';34// the timeline you built in Stew, as data5const SCENE = { v: 1, doc: { duration: 1.2, tracks: [6 { targetUid: 'tail', property: 'rotate', keyframes: [7 { time: 0, value: 0, easing: 'sine.inOut' },8 { time: 0.6, value: 12, easing: 'sine.inOut' },9 { time: 1.2, value: 0 },10 ] },11 /* ...the ears and the body */12] } };1314export const Raccoon = () => {15 const ref = useRef(null);1617 // Stew Engine plays it on your artwork18 useLayoutEffect(() => {19 const scene = mount(ref.current, SCENE);20 return () => scene.destroy();21 }, []);2223 return (24 <svg ref={ref} viewBox="0 0 375 375">25 <g id="body">{/* ... */}</g>26 <g id="tail">{/* ... */}</g>27 <g id="left_ear">{/* ... */}</g>28 {/* every layer named + editable */}29 </svg>30 );31};Start animating now
Your first animated vector is one sentence away.