npm package: @stevysmith/rive-generator
Description: Generate .riv files programmatically with TypeScript
Author: stevysmith
Latest version: 0.1.1

# @stevysmith/rive-generator

Generate `.riv` files programmatically with TypeScript.

## Installation

```bash
npm install @stevysmith/rive-generator
```

## Quick Start

```typescript
import { writeFileSync } from 'fs';
import { RiveFile, hex, PropertyKey } from '@stevysmith/rive-generator';

// Create a new Rive file
const riv = new RiveFile();

// Add an artboard
const artboard = riv.addArtboard({
  name: 'My Animation',
  width: 400,
  height: 400,
});

// Add a shape
const shape = riv.addShape(artboard, {
  name: 'Circle',
  x: 200,
  y: 200,
});

// Add an ellipse path
riv.addEllipse(shape, { width: 100, height: 100 });

// Add a fill with color
const fill = riv.addFill(shape);
riv.addSolidColor(fill, hex('#3498db'));

// Export to .riv file
writeFileSync('output.riv', riv.export());
```

## API

### RiveFile

Main class for building .riv files.

#### Structure Methods

| Method | Description |
|--------|-------------|
| `addArtboard(options)` | Add an artboard (canvas) |
| `addNode(parent, options)` | Add a transform group |
| `addShape(parent, options)` | Add a shape container |

#### Path Methods

| Method | Description |
|--------|-------------|
| `addEllipse(shape, options)` | Add an ellipse/circle |
| `addRectangle(shape, options)` | Add a rectangle |
| `addPointsPath(shape, options)` | Add a custom vector path |
| `addVertex(path, options)` | Add a straight vertex to path |

#### Paint Methods

| Method | Description |
|--------|-------------|
| `addFill(shape, options)` | Add a fill |
| `addStroke(shape, options)` | Add a stroke |
| `addSolidColor(paint, color)` | Set solid color |
| `addLinearGradient(paint, options)` | Add linear gradient |
| `addRadialGradient(paint, options)` | Add radial gradient |
| `addGradientStop(gradient, options)` | Add gradient color stop |

#### Animation Methods

| Method | Description |
|--------|-------------|
| `addLinearAnimation(artboard, options)` | Add an animation |
| `addKeyedObject(animation, targetId)` | Link animation to object |
| `addKeyedProperty(keyedObject, propertyKey)` | Specify property to animate |
| `addKeyFrameDouble(keyedProperty, options)` | Add a keyframe |

#### Export

| Method | Description |
|--------|-------------|
| `export()` | Returns `Uint8Array` of .riv binary |

### Color Helpers

```typescript
import { hex, rgba } from '@stevysmith/rive-generator';

hex('#ff0000')           // Red
hex('#3498db')           // Blue
rgba(255, 0, 0, 255)     // Red with full opacity
rgba(0, 0, 0, 128)       // Semi-transparent black
```

### PropertyKey

Constants for animatable properties:

```typescript
import { PropertyKey } from '@stevysmith/rive-generator';

PropertyKey.x          // X position
PropertyKey.y          // Y position
PropertyKey.scaleX     // X scale
PropertyKey.scaleY     // Y scale
PropertyKey.rotation   // Rotation (radians)
```

## Animation Example

```typescript
import { RiveFile, hex, PropertyKey } from '@stevysmith/rive-generator';

const riv = new RiveFile();
const artboard = riv.addArtboard({ name: 'Pulse', width: 200, height: 200 });

// Create shape
const shape = riv.addShape(artboard, { name: 'Circle', x: 100, y: 100 });
riv.addEllipse(shape, { width: 50, height: 50 });
const fill = riv.addFill(shape);
riv.addSolidColor(fill, hex('#e74c3c'));

// Create animation
const anim = riv.addLinearAnimation(artboard, {
  name: 'pulse',
  fps: 60,
  duration: 60,  // 1 second
  loop: 'pingPong',
});

// Animate scale
const keyed = riv.addKeyedObject(anim, shape);
const scaleX = riv.addKeyedProperty(keyed, PropertyKey.scaleX);
riv.addKeyFrameDouble(scaleX, { frame: 0, value: 1.0, interpolation: 'cubic' });
riv.addKeyFrameDouble(scaleX, { frame: 30, value: 1.2, interpolation: 'cubic' });
riv.addKeyFrameDouble(scaleX, { frame: 60, value: 1.0, interpolation: 'cubic' });

// Same for scaleY
const scaleY = riv.addKeyedProperty(keyed, PropertyKey.scaleY);
riv.addKeyFrameDouble(scaleY, { frame: 0, value: 1.0, interpolation: 'cubic' });
riv.addKeyFrameDouble(scaleY, { frame: 30, value: 1.2, interpolation: 'cubic' });
riv.addKeyFrameDouble(scaleY, { frame: 60, value: 1.0, interpolation: 'cubic' });

writeFileSync('pulse.riv', riv.export());
```

## License

MIT