> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/rive.md).

# 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="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2F7yCg72W6BxIrUNMMAkrm%2F2025-10-26_17-48-52.gif?alt=media&amp;token=4b05cadc-4563-4caf-a5e1-5be2e6471421" 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