Rive ✅

Rive Canvas RELEASED in Sygnal Media v0.1.2

Rive WebGL2 RELEASED in Sygnal Media v0.1.5

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.

Features

• Two components, Rive Canvas and Rive WebGL2

  • Allows you to choose the right capabilities and support level for your audience

  • Vector feathering support, in Rive WebGL2

  • Broader backwards compatibility, in Rive Canvas

• CMS property binding support for both components

• External Rive hosting support for both components

• As much as possible, match any integration capabilities

Currently unsupported;

• IX2 / IX3 integration

Demonstration

Rivewebflow-core-component-test.webflow.io

Properties

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

Technical Notes

Rive, Canvas v. WebGL Rendering

Rive has two distinct renderers;

• @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.

Rather than choosing, Sygnal Components takes the approach of two components.

Why Support Both Canvas and WebGL?

WebGL is widely supported but is still a relatively newer technology with higher processing demands.

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

Webpack Build Efficiency

Webflow code components use Webpack.

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