# @liveposter/core

Core animation library for Liveposter - a framework-agnostic image animation system.

## Installation

```bash
npm install @liveposter/core
```

## Usage

### ES Modules

```javascript
import ImageAnimator from "@liveposter/core";

const config = {
  container: "#slideshow",
  mode: "diaporama",
  loop: true,
  timing: {
    duration: 2000,
    transition: 500,
  },
  images: [
    { src: "image1.jpg", alt: "Image 1" },
    { src: "image2.jpg", alt: "Image 2" },
  ],
};

const animator = new ImageAnimator(config);
await animator.init();
```

### UMD (Browser)

```html
<script src="node_modules/@liveposter/core/dist/liveposter.umd.js"></script>
<script>
  const animator = new ImageAnimator(config);
  animator.init();
</script>
```

### CommonJS

```javascript
const ImageAnimator = require("@liveposter/core");

const animator = new ImageAnimator(config);
animator.init();
```

## CSS

Include the base styles:

```html
<link
  rel="stylesheet"
  href="node_modules/@liveposter/core/styles/animator.css"
/>
```

Or import in your CSS:

```css
@import "@liveposter/core/styles/animator.css";
```

## API Documentation

### Constructor

```javascript
new ImageAnimator(config);
```

### Methods

- `init()` - Initialize the animator (returns Promise)
- `pause()` - Pause animation
- `resume()` - Resume animation
- `goToSlide(index)` - Jump to specific slide
- `next()` - Go to next slide
- `previous()` - Go to previous slide
- `destroy()` - Clean up and remove

### Events

```javascript
animator.on("ready", () => {
  console.log("Animator ready");
});

animator.on("slideChange", (data) => {
  console.log("Current slide:", data.currentIndex);
});

animator.on("complete", () => {
  console.log("Animation complete");
});
```

### Static Methods

```javascript
// Load from external JSON file
const animator = await ImageAnimator.loadFromFile("config.json", "#container");
```

## Animation Modes

- `hardcut-slideshow` - Instant transitions
- `diaporama` - Crossfade transitions
- `pan-slideshow` - Panning effect
- `lenticular` - Input-driven switching
- `parallax-layers` - Multi-layer parallax
- `zoom-slideshow` - Ken Burns zoom

## Input Types

- `mouseX` - Horizontal mouse position
- `mouseY` - Vertical mouse position
- `tiltX` - Device tilt (horizontal)
- `tiltY` - Device tilt (vertical)
- `scroll` - Scroll position

## Easing Functions

- `linear`
- `ease-in`, `ease-out`, `ease-in-out`
- `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`
- `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`

## TypeScript

TypeScript definitions coming soon!

## License

MIT