New in Rive: Shadows, Blurs, and Masks

Guido Rosso
Dec 11, 2019 · 2 min read

Today, as part of Flutter Interact, we’re launching some of our top-most requested features from the community: shadows, blurs, and masks. These are real-time effects that you can place on any node in Rive.

For example, we added an inner shadow to the top-most node of our spaceman character to create a dynamic lighting effect that follows the contour of multiple animated shapes (which are being deformed by bones).

See the spaceman character in realtime on Rive.

As another example, take a look at our bubble animation, which has a bunch of shadows with blend modes to create multiple glowing effects.

In the basketball bounce example, we’re using the blur effect to create dynamic motion blur. Every property of the effect can be animated in real-time, which allows the blur to disappear when the ball is moving slowly and allows the blur to get more intense as the ball moves faster.

Notice the motion blur in this still frame

Finally, we also added real masking that allows you to use alpha, luminance, and the inverse of each. The bubble effect above is using this, but we’ll be adding a clearer example of that soon.

We’re really excited about these new effects and we can’t wait to see what you’re going to create with them!

Rive

News, tips, and insights on our real-time animation tools.

Guido Rosso

Written by

Founder at Rive

Rive

Rive

News, tips, and insights on our real-time animation tools.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade