How it works
From a template to a file on your site
Five steps, and most of the time you only notice two of them. Here is everything that happens between "I need a loader" and the loader playing on your website.
-
Step 1
Pick a starting point
Start with the library, a file or a blank canvas. You can also make an animation with your own AI through mosso-mcp, then open its project file here.
- Use your own AIClaude Desktop, Claude Code or Cursor with mosso-mcp
- Pick a templatePosts, titles, logo reveals, scenes
- Open a fileLottie, SVG, PNG, JPEG, WebP or GIF
- Blank canvasSquare, story, banner or your own size
-
Step 2
Your brand goes on by itself
Your brand kit holds your colours, your heading and body fonts, your logo and a motion style: calm, smooth, friendly, playful or snappy. Everything you make or open picks it up, so the loader on your site and the post on your feed look like they came from the same place.
- Set it up for your next project.
- Add your colours, fonts and logo in Brand kits.
- Switch a whole project to another kit in one click.
-
Step 3
Change the layers and timing
Open the timeline and drag a keyframe, change the text or draw your own easing curve. To work with your own AI, export a Mosso project file from the local connector and open it here.
- Ready-made moves like pop in, float and bounce.
- Easing curves and springs you can shape.
- Text that animates by letter, word or line.
-
Step 4
Check it before it goes out
Play it, scrub through it and look at it at the size it will really be. Before you export, Mosso tells you roughly how big the file will be and warns you when something needs a look, like an empty canvas or a GIF that will come out heavy.
- Everything Mosso makes uses only the parts Lottie players understand.
- We review library animations in lottie-web and dotLottie. Check your edited animation in its destination player.
-
Step 5
Export it and put it where it goes
One project, many files. Lottie or dotLottie for websites and apps, MP4 for social, GIF for email, transparent video or PNG frames for your video editor, animated SVG for a plain image tag. For websites, Mosso gives you the code to paste for HTML, React, Webflow and Framer.
Export and embed guide
Under the hood
What happens under the hood
The editor and your own AI all talk to the same engine. It keeps your animation as a tidy document of layers and keyframes, then writes each file format from that one document. AI edits and hand edits use the same project format. Check your export in its destination player.
You work in
- Your own AI
- The editor
- Claude Desktop, Claude Code or Cursor
- SVG from Figma and images from your computer
One document of layers, keyframes and your brand kit. Text becomes shapes, effects become plain Lottie.
Files
- Lottie and dotLottie
- MP4 and WebM
- GIF and animated SVG
- PNG frames
Where they go
- Your website
- Your iOS or Android app
- Social posts and ads
- After Effects and Premiere
FAQ
Questions about the flow
How long does it take?
Pick a template, change it, and export. The editor is there for the times you want to spend longer on the details.
Do I need an account?
The editor, every export, templates and library are free. Use mosso-mcp with Claude Desktop, Claude Code or Cursor. The connector runs on your computer and uses your own AI account. Create a free account to download up to 50 library animations a day. The limit resets at midnight UTC. Each download is one animation.
Where do my files go?
Exports are made on your own computer and saved where your browser saves downloads. The animation file is rendered on your device. Account sync and library download checks may use our server.
Can other people on my team use the same brand?
Mosso is free. Every export format, template and library animation is included.