Presenter Package

animot-presenter is a Svelte 5 component library that renders Animot JSON presentations. Use it as a web component (works in any framework, no build), a Svelte component, a React component, or anywhere ESM imports work.

Install

Via CDN (no build)

<!-- Drop into any HTML page (no build step) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animot-presenter/dist/cdn/animot-presenter.css">
<script src="https://cdn.jsdelivr.net/npm/animot-presenter/dist/cdn/animot-presenter.min.js"></script>

<animot-presenter
  src="https://your-site.com/presentation.json"
  autoplay
  loop
  controls
></animot-presenter>

The web component is registered globally as <animot-presenter> after the script loads.

Via npm

npm install animot-presenter

Frameworks

Svelte

<script>
  import { AnimotPresenter } from 'animot-presenter';
  import 'animot-presenter/styles';
</script>

<AnimotPresenter
  src="/presentation.json"
  autoplay
  loop
  controls
  duration={5000}
  startSlide={0}
  onslidechange={(i) => console.log('on slide', i)}
  oncomplete={() => console.log('done')}
/>

React

import { AnimotPresenter } from 'animot-presenter/react';
import 'animot-presenter/styles';

export default function Hero() {
  return (
    <AnimotPresenter
      src="/presentation.json"
      autoplay
      loop
      controls
    />
  );
}

Vue / Angular / vanilla JS

<script setup>
import 'animot-presenter';
import 'animot-presenter/styles';
</script>

<template>
  <animot-presenter src="/presentation.json" autoplay loop controls />
</template>

The web component works in any framework that allows custom elements.

Inline data instead of URL

<!-- Pass project JSON inline instead of fetching from a URL -->
<animot-presenter id="hero" autoplay loop></animot-presenter>

<script>
  fetch('/api/my-project').then(r => r.json()).then(data => {
    document.getElementById('hero').data = data;
  });
</script>

Props

Prop	Type	Description
`src`	string	URL to a project JSON.
`data`	object	Inline project JSON. Takes priority over `src`.
`autoplay`	boolean	Start playing on mount.
`loop`	boolean	Loop back to slide 0 after the last slide.
`controls`	boolean	Show the play/pause/scrub bar.
`arrows`	boolean	Show prev/next arrow buttons.
`progress`	boolean	Show the bottom progress bar.
`keyboard`	boolean	Enable arrow-key navigation.
`duration`	number	Override per-slide duration (ms). Otherwise uses each slide's own.
`startSlide`	number	0-indexed slide to open on.
`muteNarration`	boolean	Force-disable per-slide voice narration regardless of the project's `settings.narrationEnabled`. Use on preview/gallery surfaces where audio would be intrusive. (As an HTML attribute: `mute-narration`.)
`class`	string	Extra class on the root element.
`onslidechange`	(index) => void	Fires whenever the active slide changes.
`oncomplete`	() => void	Fires once the deck reaches the last slide (when not looping).

Styling

/* All classes are prefixed with animot- to avoid clashes */
animot-presenter {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}

/* Override the controls bar */
animot-presenter::part(controls) { backdrop-filter: blur(8px); }

Every element in the presenter has an animot- class prefix so nothing clashes with your site's CSS. The component scales itself to the host container via ResizeObserver — no manual sizing needed.

What renders

The presenter mirrors everything the Animot editor produces — morphing elements, idle motion presets (float, breathe, wiggle, sway, drift, bob, tilt, pulse), entrance / exit / emphasis presets (slide, pop, bounce, scale, rotate, blur, flip, glow-flash, shake, tada), motion paths, code typewriter / highlight-changes, 16 text animation modes (typewriter, fade-letters, bounce, drop, scramble, slot-machine, glitch, blur-in, stretch, slide-words, wave, marquee, handwriting, and more), arrow flow markers and draw animations, decorative effects (glow, shimmer, animated gradients, RGB split), Cinema-mode camera transitions, particles and confetti, video and GIF embeds.

Export caveats: YouTube / Vimeo iframe embeds can't be captured into a GIF/MP4 export — the cross-origin player content is opaque to Animot's renderer, so the export shows the provider's poster frame instead. For an exportable video, use a local file via the Add Video button.

Versioning

The package follows semver. Pin a specific version in production:

<script src="https://cdn.jsdelivr.net/npm/animot-presenter@0.5.7/dist/cdn/animot-presenter.min.js"><\/script>

JSON projects exported from the editor include a schemaVersion field — any version of the presenter targeting the same major schema will play them.