Social carousels
LinkedIn. TikTok. Instagram.
1080×1080 and 9:16
Slides that morph. Diagrams that flow.
Animated visuals for everywhere you publish.
Carousels. Reels. Explainer GIFs. Kinetic presentations. Code walkthroughs. Animated covers. Made in one tool.
✦ No credit card
✦ Free forever plan
✦ Works in your browser
One person · one tool · these outputs
Real decks. Running live. Fork any of them.
Each tile below is a published Animot project, playing in the same web component you can embed in your own site. Click through to remix in the editor.
Flow Mode
How Kafka Works
Producer → broker → consumer with animated flow markers
TikTok 9:16
Laravel Security
Vertical carousel · social-ready · code typewriter
Code Tutorial
CSS Flexbox vs Grid
Side-by-side morphing layouts with code typewriter
Cinema Mode
Kinetic Typography
Camera tour over a typographic world
Brand Intro
Animated Brand Intro
5-second logo reveal · morphing shapes
Conference HD
SOLID Principles
Conference deck · 1920×1080 · keyboard nav
What you can make
Templates for every format you publish in.
Forty starting points. Customize the content, keep the motion. Export to MP4, GIF, PDF, or embed as a live web component.
Explainer GIFs
ByteByteGo-style technical animations.
GIF + MP4 for blogs, emails
Kinetic presentations
Cinema-grade animated decks.
1920×1080 · keyboard nav
Code walkthroughs
Diff highlighting, typewriter, morphing.
200+ syntax languages
Covers & flyers
LinkedIn covers. Event flyers. Product cards.
Animated where Canva is static
Hero sections
Animated heroes for websites.
Embeddable as a web component
How it works
From idea to published in three steps.
No timelines to scrub. No keyframes to drag. Pick a template, customize the content, export to every format you publish in.
- 1
Pick a template
Browse 40+ starting points organized by format, style, or use case.
- 2
Customize
Edit text, swap colors, drop in images and code. Live preview as you type.
- 3
Export anywhere
MP4, GIF, animated PDF, or embed as a live web component. Same project, every format.
Engine features
The animation engine that does the work for you.
Element Morphing
Same id across slides → smooth tween. Position, size, color, gradient, shape — all interpolated.
Flow Mode
ByteByteGo-style animated diagrams. Markers travel along curves at any speed you want.
Cinema Mode
World-space canvas with a real camera. Pan, zoom, rotate, parallax depth — Prezi reborn.
AI Generator
Describe a deck, get a draft. Powered by Claude with the full element schema.
Web Component Embed
One <animot-presenter> tag. Embed anywhere — docs, sites, internal tools.
Brand Kits & Looks
12 named text vibes. Brand kits lock fonts, colors, gradients across every slide.
MP4 + GIF Export
Server-rendered video at any resolution. Frame-perfect, looped seamlessly for socials.
Six Canvas Formats
TikTok, Reels, Stories, square, 1080p, 4K — same project exports to every shape.
For developers
Embed a deck in your site with one tag.
Every published deck ships as a lightweight web component. No iframe wrapper, no autoplay weirdness — just a live, interactive animation in your blog, docs, or product page.
index.html
<!-- Drop into any page -->
<script src="https://cdn.jsdelivr.net/npm/animot-presenter/dist/cdn/animot-presenter.min.js"></script>
<animot-presenter
src="./my-deck.json"
autoplay
loop
controls
/>Full CSS control
Style every button, arrow, and bar in your own brand.
Neon Purple
Cyberpunk
Minimal Light
Warm Glass
Why Animot
Built for the work people actually publish.
Static design tools
Beautiful for posters and posts.
Don't animate.
Pro animation tools
Animate anything.
Steep curve. Dense timelines. No presentation mode.
★ Animot
The middle ground
Animated by default.
Templates that already work. Export to every format you publish in.
Built solo · in public
I built Animot for myself. People kept asking — so here it is.
Animot started as a tool I made for my own work — posting code walkthroughs on social, presenting at conferences, and teaching at BeeBlock (my edtech startup where kids learn to code through games).
After enough people asked "what tool is that?" — I cleaned it up, added the editor, and shipped it. Every feature is something I actually use, not a roadmap item invented to pad a pricing tier.
Got a use case I haven't covered? An idea? A bug? Send me an email. Solo product means you talk to the person who wrote the code.
Pricing
Start free. Go Pro when you're ready.
No trials, no gotchas. The free plan is free forever — Pro and Team come with a 7-day money-back guarantee.
Free
$0 forever
- 3 presentations
- 1 personal workspace
- 1 brand kit · 5 reusable blocks
- PNG & PDF export
- Embed anywhere — no watermark
- All editor features
- Browse & fork community decks
- Generate decks via Claude
- Watermark on share pages
Pro
$69.97 $39.88 /yr
$3.32/mo — first year only · renews at $69.97/yr
- Unlimited presentations
- Unlimited personal workspaces
- Video & GIF export (MP4 + animated GIF)
- No watermark on share pages
- Public sharing links
- Custom embed branding
- Unlimited brand kits & blocks
- Browse, fork & publish to community
- Generate decks via Claude
- Priority support
Team
Small Teams$219.97 /yr
$18.33/mo — flat, no per-seat math
- Everything in Pro
- 4 seats total (you + 3 invites)
- Shared team workspace
- Live collaboration — real-time edits
- Centralized billing
- Invite/remove members anytime
- Shared brand kits & blocks
- Priority support
7-day money-back guarantee. Subscribe risk-free — request a full refund from your billing page within 7 days.
FAQ
Common questions.
Do I need design or animation experience? +
No. Every template ships ready-to-use. Change text, swap colors, drop in your images. The animation already works.
What can I export to? +
MP4 (any resolution up to 4K), animated GIF, multi-page PDF, PNG, and live web component embeds. One project, every format.
What's the difference between Animot and Canva? +
Canva makes beautiful static designs. Animot makes things move. Both have their place. If you want a poster, use Canva. If you want a carousel that animates, an explainer that morphs, or a presentation that flows — Animot.
What's the difference between Animot and After Effects? +
After Effects can animate anything but takes weeks to learn. Animot is built for the 90% of animation work that's repeatable — explainers, presentations, social content — with templates that already work.
Can I use my own brand colors and fonts? +
Yes. Pro users get brand kits — define your palette, typography, and logo once and apply across every deck.
Is there a free plan? +
Yes. Three presentations, PNG and PDF export, embed anywhere — no watermark on embeds, ever. Forever free, no credit card.
Can I embed an Animot animation in my website? +
Yes. Every published deck is available as a lightweight web component. Drop a single tag and it renders live in your blog, docs, or product page.
Who built this? +
One developer — Raoni Gomes — solo. Originally built for BeeBlock, a code school for kids. Now public, in active development.
Ready to publish
Pick a template. Make something move.
Free forever plan. No credit card. Real export in under 10 minutes.