# Rive ✅

{% hint style="success" %}
Rive Canvas **RELEASED** in **Sygnal Media v0.1.2**  

Rive WebGL2 **RELEASED** in **Sygnal Media v0.1.5** 
{% endhint %}

Webflow has a native Rive element, based on Rive's Canvas renderer.  This allows widespread support but does not support Rive's WebGL2 capabilities like vector feathering. 

<figure><img src="/files/JWecVrxIPa32rnH8SkGL" alt=""><figcaption></figcaption></figure>

## Features&#x20;

* Two components, Rive Canvas and Rive WebGL2&#x20;
  * Allows you to choose the right capabilities and support level for your audience&#x20;
  * Vector feathering support, in Rive WebGL2&#x20;
  * Broader backwards compatibility, in Rive Canvas&#x20;
* CMS property binding support for both components  &#x20;
* External Rive hosting support for both components&#x20;
* As much as possible, match any integration capabilities&#x20;

Currently unsupported;&#x20;

* IX2 / IX3 integration&#x20;

## Demonstration&#x20;

{% embed url="<https://webflow-core-component-test.webflow.io/rive>" %}

{% embed url="<https://www.loom.com/share/2d704a5ac7af4b15906f663b858ff393>" %}

## Properties

<table><thead><tr><th width="155">Property</th><th width="196">Type</th><th>Description</th></tr></thead><tbody><tr><td>Rive File</td><td>Asset or URL </td><td>Link to a <code>.riv</code> file in assets, or specify a URL to link to an external file. </td></tr><tr><td>Artboard</td><td>Text</td><td>Case-sensitive, must enter exactly.  Unfortunately no pick list support. </td></tr><tr><td>State Machine</td><td>Text</td><td>Case-sensitive, must enter exactly.  Unfortunately no pick list support. </td></tr><tr><td>Fit </td><td>Variant pick list</td><td><ul><li><strong>Contain</strong>: Animation scales to fit within bounds maintaining aspect ratio</li><li><strong>Cover</strong>: Animation scales to fill entire container, may crop content</li><li><strong>Fill</strong>: Animation stretches to fill container exactly, may distort</li><li><strong>Fit Width</strong>: Animation scales to match container width</li><li><strong>Fit Height</strong>: Animation scales to match container height</li><li><strong>None</strong>: No scaling, uses original animation size</li><li><strong>Scale Down</strong>: Like contain but never scales up, only down</li></ul></td></tr><tr><td>Align</td><td>Variant</td><td>Alignment, e.g. top-left, middle-center, ... </td></tr><tr><td>Width</td><td>Text ( measure )</td><td>Width of the component </td></tr><tr><td>Height</td><td>Text ( measure )</td><td>Height of the component </td></tr><tr><td>Responsive</td><td>Boolean</td><td></td></tr><tr><td>Autoplay</td><td>Boolean</td><td></td></tr><tr><td>Touch Scroll Behavior</td><td>Boolean</td><td></td></tr><tr><td>Automatically Handle Events</td><td>Boolean</td><td></td></tr><tr><td>Lazy Load</td><td>Boolean</td><td></td></tr></tbody></table>

## Technical Notes&#x20;

### Rive, Canvas v. WebGL Rendering&#x20;

Rive has two distinct renderers;&#x20;

* **`@rive-app/canvas`**: Uses CanvasRenderingContext2D renderer - **no vector feathering support**
* **`@rive-app/webgl2`**: Uses WebGL2 with Rive Renderer - **supports vector feathering**

Vector feathering requires WebGL2 and the Rive Renderer, which cannot be achieved with the canvas-based runtime.&#x20;

{% hint style="success" %}
Rather than choosing, Sygnal Components takes the approach of two components.&#x20;
{% endhint %}

### Why Support Both Canvas and WebGL?&#x20;

WebGL is [widely supported](https://caniuse.com/?search=webgl2) but is still a relatively newer technology with higher processing demands.&#x20;

<table><thead><tr><th width="166.33331298828125"></th><th valign="top">RiveCanvas </th><th valign="top">RiveWebGL2 </th></tr></thead><tbody><tr><td>Features</td><td valign="top"><ul><li>Uses <code>@rive-app/canvas</code> runtime</li><li>Better browser compatibility</li><li>Works everywhere</li><li>Does NOT support vector feathering</li></ul></td><td valign="top"><ul><li>Uses <code>@rive-app/webgl2</code> runtime</li><li>Supports vector feathering effects</li><li>Requires WebGL2 support</li><li>Better error message if WebGL2 unavailable</li></ul></td></tr><tr><td>Support</td><td valign="top"><p>~99.9% of global users<br></p><ul><li>✅ Chrome/Edge: Yes (since forever - 2004 spec)</li><li>✅ Firefox: Yes (since 2005)</li><li>✅ Safari: Yes (since 2006)</li><li>✅ Samsung Internet: Yes</li><li>✅ IE11: Yes (though IE11 is dead)</li><li>✅ <strong>All iOS devices</strong>: Yes (including iOS 12+)</li><li>✅ <strong>All corporate/locked browsers</strong>: Yes (cannot be disabled)</li></ul></td><td valign="top"><p>~97% of global users</p><p></p><ul><li>✅ Chrome/Edge: Yes (since 2017)</li><li>✅ Firefox: Yes (since 2017)</li><li>✅ Safari: Yes (since iOS 15/macOS Big Sur - 2021)</li><li>✅ Samsung Internet: Yes</li><li>❌ <strong>IE11: No</strong> (but IE11 is dead)</li><li>⚠️ <strong>Older iOS devices</strong> (pre-iOS 15): No</li><li>⚠️ <strong>Some corporate/locked browsers</strong>: May have WebGL disabled for security</li></ul></td></tr><tr><td>Advantages </td><td valign="top"><ul><li><strong>Guaranteed compatibility</strong> - Works literally everywhere, even with WebGL disabled</li><li><strong>Lower GPU requirements</strong> - Uses 2D rendering context, less demanding</li><li><strong>Corporate environments</strong> - Some IT departments disable WebGL for security</li><li><strong>Fallback safety</strong> - If GPU is struggling, Canvas might still work</li><li><strong>Predictable performance</strong> - CPU-based rendering is more consistent</li></ul></td><td valign="top"><ul><li><strong>Vector feathering support</strong> - The primary modern Rive feature (Canvas cannot do this)</li><li><strong>GPU acceleration</strong> - Hardware-accelerated rendering, much faster for complex animations</li><li><strong>Better performance</strong> - Offloads work to GPU, keeps CPU free for other tasks</li><li><strong>Future-proof</strong> - All new Rive features require WebGL2/Rive Renderer</li><li><strong>Scales better</strong> - Multiple animations on page don't bog down CPU</li><li><strong>Modern standard</strong> - Part of the web platform direction (97% adoption)</li></ul></td></tr><tr><td>Disadvantages</td><td valign="top"><ul><li><strong>No vector feathering</strong> (defeats your purpose)</li><li><strong>Slower for complex animations</strong></li><li><strong>Missing modern Rive features</strong></li></ul></td><td valign="top"><ul><li><strong>~3% of users</strong> could see broken animations</li><li><strong>iOS 14 and older</strong> (still ~5-8% of iOS users) won't work</li><li><strong>Accessibility concern</strong> - some users disable WebGL for medical reasons (seizures)</li><li><strong>Corporate firewalls</strong> - locked-down environments might block it</li></ul></td></tr><tr><td>Use When </td><td valign="top"><ul><li>✅ You have enterprise/B2B clients (conservative IT)</li><li>✅ You support government/education sectors (old hardware)</li><li>✅ You have significant iOS 14 traffic</li><li>✅ Your Rive animations work fine without feathering</li><li>✅ You want maximum reach over bleeding-edge features</li></ul></td><td valign="top"><ul><li>✅ You're targeting modern consumers (B2C)</li><li>✅ You need vector feathering (your animations use it)</li><li>✅ Your analytics show &#x3C;1% legacy iOS traffic</li><li>✅ You're okay with a graceful fallback message for the 3%</li><li>✅ Your animations are performance-intensive anyway</li></ul></td></tr></tbody></table>

### Webpack Build Efficiency&#x20;

{% hint style="info" %}
Webflow code components use Webpack.&#x20;
{% endhint %}

Static imports mean Webpack can properly tree-shake

In our tests, the build output confirms Webpack is properly code-splitting.  WebGL2 runtime will only be bundled if `RiveWebGL2` component is actually used

If user only adds `RiveCanvas` to their Webflow site, the WebGL2 runtime **never gets bundled** into the deployment at all


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/rive.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.