Embed Examples

Drop animated presentations into any website with the animot-presenter web component. Works with plain HTML, React, Vue, Svelte, Angular — any framework. For the full props/install reference see Presenter Package.

Quick Start

Add two lines to your HTML and you're done:

HTML
Loading...

Getting Your Presentation JSON

  1. Create your presentation in the Animot editor
  2. Click Export → Export JSON in the toolbar
  3. Host the JSON file on your server or CDN
  4. Pass the URL to the src attribute

Attributes

Attribute Type Description
src string URL to your presentation JSON file
data string Inline JSON string (alternative to src)
autoplay boolean Start playing automatically
loop boolean Loop back to the first slide after the last
controls boolean Show play/pause and slide indicator bar
arrows boolean Show left/right navigation arrows
progress boolean Show a progress bar at the bottom
keyboard boolean Enable arrow key navigation
duration number Override autoplay duration per slide (ms)
start-slide number Start on a specific slide (0-indexed)
mute-narration boolean Force-disable per-slide voice narration even when the project's settings.narrationEnabled is true. Useful for previews / gallery cards where audio would be intrusive.

NPM Install

For framework projects, install via npm:

Terminal
Loading...

Svelte

Svelte
Loading...

React

React / TSX
Loading...

CSS Customization

Override internal styles with plain CSS. All internal elements use .animot- prefixed classes:

CSS
Loading...

Available CSS Targets

  • .animot-controls — bottom control bar
  • .animot-controls button — play/pause and other buttons
  • .animot-slide-indicator — "1 / 5" slide counter text
  • .animot-arrow — left/right navigation arrows
  • .animot-progress-bar — progress bar track
  • .animot-progress-fill — progress bar fill

Sizing & Aspect Ratio

The component fills its container. Set aspect-ratio on the element or its parent to control the shape:

CSS
Loading...

AI Generation with Claude Code

Generate complete animated presentations from a text prompt using the @animot/presentation-generator Claude Code skill. Describe what you want, and it creates the full JSON with morphing animations, code blocks, and visual effects.

Terminal
Loading...

Usage in Claude Code

Claude Code
Loading...

What It Generates

  • Complete project JSON importable at animot.io/editor
  • Morphing shapes that persist across slides with spring easing
  • Code blocks with typewriter and highlight-changes animations
  • Property sequencing — position, then size, then color, then filters animate in order
  • CSS filters (blur, brightness, contrast, saturate, grayscale) with cross-slide animation
  • Staggered wave effects between grouped elements
  • AI-generated images via Gemini (optional, requires API key)
  • Support for all canvas formats: HD, TikTok, Instagram, Square