rive-generator

📁 stevysmith/rive-skills 📅 Jan 26, 2026

总安装量

周安装量

#48949

全站排名

安装命令

npx skills add https://github.com/stevysmith/rive-skills --skill rive-generator

Agent 安装分布

opencode 2

claude-code 2

codex 1

Skill 文档

Rive Generator Skill

Generate Rive animations programmatically using TypeScript.

Installation

First, install the npm package:

npm install @stevysmith/rive-generator

Quick Start

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

const riv = new RiveFile();

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

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

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

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

// Export
writeFileSync('my-animation.riv', riv.export());

Running

# With TypeScript (Node 22+)
node --experimental-strip-types generate.ts

# Or compile first
npx tsc generate.ts && node generate.js

API Reference

RiveFile

Main class for building .riv files.

Method	Description
`addArtboard(options)`	Add an artboard (canvas)
`addNode(parent, options)`	Add a transform group
`addShape(parent, options)`	Add a shape container
`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
`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
`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()`	Returns `Uint8Array` of .riv binary

Colors

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

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

PropertyKey

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)

Important Constraints

Use a single Node container – All shapes must be children of ONE Node under the Artboard.
Gradient shapes must be LAST – Add shapes with gradients after solid color shapes.
DO NOT use CubicVertex – Use addVertex() only. Approximate curves with many straight vertices.
DO NOT use cornerRadius – Use plain rectangles or PointsPath for rounded corners.

First shape position bug – Add a tiny transparent dummy shape first:

const dummy = riv.addShape(container, { name: 'Dummy', x: 0, y: 0 });
riv.addRectangle(dummy, { width: 1, height: 1 });
const dummyFill = riv.addFill(dummy);
riv.addSolidColor(dummyFill, hex('#00000000'));

Animation Example

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

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

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'));

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

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' });

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());

Viewing Generated .riv Files

Rive Editor – Import to view/edit
rive.app/preview – Quick online preview
Your app using @rive-app/canvas or @rive-app/react-canvas

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台