PHPackages                             darinlarimore/statamic-rive - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. darinlarimore/statamic-rive

ActiveLibrary

darinlarimore/statamic-rive
===========================

1.1.5(3mo ago)1106[1 issues](https://github.com/darinlarimore/statamic-rive/issues)VueCI passing

Since Jan 13Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/darinlarimore/statamic-rive)[ Packagist](https://packagist.org/packages/darinlarimore/statamic-rive)[ RSS](/packages/darinlarimore-statamic-rive/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (15)Used By (0)

[![](readmeAssets/icon.svg)](readmeAssets/icon.svg) Statamic Rive Field
=======================================================================

[](#-statamic-rive-field)

> Statamic Rive Field is a Statamic addon that accepts an a .riv file upload, displays an animiation preview and gives configuration options for the Rive animation.

Features
--------

[](#features)

This addon does:

- Upload a .riv Rive file
- Configure settings for the Rive Model
- Display a preview of the Rive animation
- Display file information about the Rive animation

[![Editor View](/readmeAssets/editorView.png)](/readmeAssets/editorView.png)

How to Install
--------------

[](#how-to-install)

You can search for this addon in the `Tools > Addons` section of the Statamic control panel and click **install**, or run the following command from your project root:

```
composer require darinlarimore/statamic-rive
```

How to Use
----------

[](#how-to-use)

### Allow .riv file types in `config/statamic/assets.php`

[](#allow-riv-file-types-in-configstatamicassetsphp)

```
'additional_uploadable_extensions' => [
		'riv',
],
```

### Add the field to a blueprint

[](#add-the-field-to-a-blueprint)

[![Rive Field](/readmeAssets/fieldType.png)](/readmeAssets/fieldType.png)

Name the field handle `rive_animation` or whatever you like.

### Configure the field settings

[](#configure-the-field-settings)

Choose an asset container. [![Rive Field Configuration](/readmeAssets/configure.png)](/readmeAssets/configure.png)

### Use the field in your template

[](#use-the-field-in-your-template)

Use the `rive_animation` handle in your template. The field will have the following properties:

- `url` - The URL of the Rive animation
- `width` - The width of the animation
- `height` - The height of the animation
- `stateMachine` - The state machine of the animation
- `animation` - The timeline name of the animation
- `artboard` - The artboard of the animation
- `shouldDisableRiveListeners` - Whether or not to disable Rive listeners

### Install Rive.js from NPM or CDN

[](#install-rivejs-from-npm-or-cdn)

```
npm install @rive-app/canvas
```

### Import Rive.js into your project

[](#import-rivejs-into-your-project)

```
import { Rive } from "@rive-app/canvas";

window.Rive = Rive;
```

### Example Usage

[](#example-usage)

Using Alpine.js to initialize the Rive animation:

```

```

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance66

Regular maintenance activity

Popularity15

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 75% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~38 days

Recently: every ~89 days

Total

11

Last Release

102d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f87bfd3084b748a8890d0b72c7ddc1c29922d72e4641aab0a824b29a9909a58b?d=identicon)[darinlarimore](/maintainers/darinlarimore)

---

Top Contributors

[![darinlarimore](https://avatars.githubusercontent.com/u/20300635?v=4)](https://github.com/darinlarimore "darinlarimore (21 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")

### Embed Badge

![Health badge](/badges/darinlarimore-statamic-rive/health.svg)

```
[![Health](https://phpackages.com/badges/darinlarimore-statamic-rive/health.svg)](https://phpackages.com/packages/darinlarimore-statamic-rive)
```

###  Alternatives

[statamic/statamic

Statamic

824170.4k](/packages/statamic-statamic)[statamic-rad-pack/runway

Eloquently manage your database models in Statamic.

135192.6k5](/packages/statamic-rad-pack-runway)[statamic/ssg

Generate static sites with Statamic.

254302.4k](/packages/statamic-ssg)[statamic/eloquent-driver

Allows you to store Statamic data in a database.

125598.8k7](/packages/statamic-eloquent-driver)[statamic/seo-pro

65440.7k](/packages/statamic-seo-pro)[rias/statamic-redirect

28298.4k](/packages/rias-statamic-redirect)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)