One tag, any framework
Web component works the same in plain HTML, React, Svelte, Vue, Next.js, Astro, Nuxt — anywhere modern browsers run. No framework-specific package; the tag IS the API.
Use Case · Embedding
Interactive infographics in your blog or docs.
One <code><animot-presenter></code> tag. Works in Svelte, React, Vue, plain HTML — same API everywhere. NPM + CDN with version pinning. No iframe weirdness.
- Frameworks supported
- Any
- NPM package
- animot-presenter
- CDN with version pinning
- jsdelivr
- CSS variables for theming
- Yes
Features
Built like a real component, not an iframe
Most loyalty embed tools use iframes. We embed via native web component — no Z-index hell, no scroll bugs, no "load delay" flash, and proper event listeners.
NPM package
Install <code>animot-presenter</code> via npm for Svelte projects (proper component wrapper). Or pull <code>animot-presenter</code> standalone for any framework. Tree-shakeable, TypeScript types included.
Version-pinned CDN
Lock to a specific version via jsDelivr. Your blog post embedded in 2024 keeps rendering the same in 2027 — even after the engine updates.
CSS variables for theming
Override colors, fonts, controls styling via CSS variables. Match your blog's palette without forking the component or hacking via !important.
Lazy-loaded
Engine ships at ~84KB gzipped. Shiki (syntax highlighting) lazy-loads only when a code element appears. Your blog post stays fast.
Programmatic API
Listen to <code>onslidechange</code> and <code>oncomplete</code> events. Sync external scroll, fire analytics, jump to specific slides on user input. The component exposes a real JS surface.
Templates
Embeds that ship today
Compact looping animations meant for hero sections, blog inserts, doc pages.
I drop the embed tag in my Notion-exported blog and the diagram just plays. No iframe weirdness, no Z-index hell. The web component pattern is the right call.
FAQ
Common questions
Why a web component instead of an iframe? +
Iframes work but bring trade-offs: separate scroll context, harder to style, slower to render, sometimes blocked by CSP, and you can't listen to internal events. Animot ships as a real web component — it lives inside your DOM, respects your CSS, fires events you can subscribe to, and renders without the iframe load flash.
Show me the actual embed code. +
Two lines:
Then anywhere on your page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animot-presenter@0.2.9/dist/style.css">
<script src="https://cdn.jsdelivr.net/npm/animot-presenter@0.2.9/dist/animot-presenter.js"></script>Then anywhere on your page:
<animot-presenter src="https://animot.io/p/your-deck-id" autoplay loop></animot-presenter>Does it work in Notion / Hashnode / Medium? +
Notion: yes via the "Embed" block (it's a web component, but Notion wraps it in an iframe automatically — still works). Hashnode: yes natively. Medium: not directly (Medium restricts custom HTML); use the public share URL instead, which renders an OG preview.
What's the bundle size? +
Core engine: ~84KB gzipped. Shiki for syntax highlighting: lazy-loaded only when needed. canvas-confetti: lazy-loaded only when a slide uses confetti. Your blog page stays fast.
Can I customize the player controls? +
Yes. Pass props:
controls, arrows, progress, keyboard — turn each on/off independently. Style them via CSS variables. See presenter docs.Will my embed break if you ship a new version? +
No. The CDN URL pins to a specific version. Your blog post from 2024 keeps rendering the same in 2027. Upgrade by changing the version number in the URL when you're ready.
Ready
Embed it. Forget about it.
Free tier includes public sharing + embed with no watermark on your embedded decks. Pro removes the watermark from public share pages and unlocks unlimited presentations.