@stevysmith/rive-generator

@stevysmith/rive-generator

Generate .riv files programmatically with TypeScript.

Installation

npm install @stevysmith/rive-generator

Quick Start

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

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:

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

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