Liveposter

Why Liveposter?

JSON-Driven Animations

Define your animations with simple JSON configurations. No coding required - just describe what you want and let Liveposter handle the rest.

Framework-Agnostic

Works everywhere. Use it with vanilla JavaScript, React, Vue, or any other framework. Drop it into any project without friction.

Rich Animation Modes

Choose from slideshow, fade transitions, continuous panning, parallax layers, lenticular effects, and cinematic zoom. Mix and match for stunning results.

Augmented Reality (AR)

Bring posters to life with WebXR-powered AR experiences. Overlay 3D models, videos, and images on physical posters using just a mobile browser - no app required. Automatic target generation means no manual image uploads or conversion.

Zero Dependencies

Lightweight and self-contained. The core library has no external dependencies, keeping your bundle size minimal.

Perfect for Digital Signage

Built with digital signage and smart TV displays in mind. Includes fullscreen kiosk mode and auto-start capabilities.

Developer-Friendly

Hot-reload development mode, CLI tools, and instant preview. Get up and running in seconds with npx liveposter.

Quick Start

Get started instantly without installation:

# Try the demo - see all animation modes in action
npx liveposter

# Serve your own poster configuration
npx liveposter path/to/your-poster.json

# Development mode with hot-reload
npx liveposter dev path/to/your-poster.json

# Launch in fullscreen kiosk mode
npx liveposter kiosk path/to/your-poster.json

# Build AR experience (mobile WebXR)
npx liveposter ar-build poster.json --output dist-ar

# Generate AR targets automatically from your images
npx liveposter ar-compile-targets poster.json

That’s it! The server starts at http://localhost:3000 and you can begin creating beautiful animations immediately.

Simple JSON Configuration

Create stunning image animations with just a few lines of JSON:

{
  "container": "#slideshow",
  "mode": "diaporama",
  "loop": true,
  "timing": {
    "duration": 3000,
    "transition": 500
  },
  "effects": {
    "type": "fade",
    "easing": "ease-in-out"
  },
  "images": [
    { "src": "image1.jpg", "alt": "Beautiful sunset" },
    { "src": "image2.jpg", "alt": "Mountain vista" },
    { "src": "image3.jpg", "alt": "Ocean waves" }
  ]
}

Animation Modes

Slideshow

Classic instant transitions between images - perfect for fast-paced product showcases.

Fade Transitions

Smooth crossfade effects for elegant, professional presentations.

Pan & Zoom

Continuous panning across wide images or cinematic Ken Burns zoom effects.

Parallax Layers

Multi-layer depth effects with interactive mouse-driven motion.

Lenticular

Interactive image switching that simulates lenticular printing effects.

Augmented Reality

Overlay 3D models, videos, and images on physical posters using MindAR and A-Frame. Works in mobile browsers without app installation.

Custom Effects

Extensible architecture makes it easy to create your own animation modes.

Perfect For

Digital Signage

Display dynamic content in retail stores, lobbies, and public spaces. Built-in kiosk mode makes deployment effortless.

Smart TV Displays

Create engaging presentations for smart TVs and large displays. Optimized for performance on embedded devices.

Interactive Kiosks

Build interactive experiences with mouse, touch, or tilt-driven animations. Supports multiple input types.

Web Galleries

Showcase photography, artwork, or portfolios with professional transitions and effects.

Product Showcases

Highlight products with eye-catching animations. Multiple modes let you match your brand’s style.

Event Displays

Create memorable visual experiences for conferences, exhibitions, and special events.

AR Experiences

Turn physical posters into interactive AR experiences. Perfect for museums, galleries, retail displays, and marketing campaigns.

What Makes Liveposter Special?

No Build Step Required - Use npx liveposter to instantly preview your animations without installing anything.

Hot-Reload Development - Edit your JSON and images, see changes instantly. No manual refresh needed.

Deploy Anywhere - From Raspberry Pi to enterprise displays, Liveposter runs wherever JavaScript does.

Full Kiosk Support - One command launches Chrome in fullscreen kiosk mode, ready for production deployment.

Truly Framework-Agnostic - Integrate with any tech stack. Works with vanilla JS, React, Vue, Angular, or anything else.

WebXR Augmented Reality - Build AR experiences that work in mobile browsers using MindAR and A-Frame. No app store, no installation required. Automatic target generation eliminates the manual process of uploading and converting poster images - just run one command and all .mind files are generated from your images.

Ready to Create?

Get Started Now →See Examples