Opal Security Interactive Rive Hero

Opal Security / Website / 2026

Six cards, one policy story.

An interactive Rive hero for Opal Security's website, followed by a logo animation and design-system work on their Framer site.

My role: Rive animation and interaction design, Framer design-system support

Delivered: An interactive hero animation (with a standalone demo, structure diagram and developer docs), a looping logo animation, and a typography and design-system extraction for the Framer site

Tools: Rive (state machines, ViewModels, Luau scripting), Framer

The brief

Opal Security needed a hero animation for its access-governance website that could carry its messaging (see, encode and enforce identity, policy and entitlement) without a video file.

The build

The first version is a 1920 x 1080 scene with six cards in two columns, joined by connector lines over a scrolling-number background and a rotating gradient. Hover reactions run entirely in the state machine through listeners, so the page needs no code beyond loading the file. Card labels are ViewModel strings, and a small Luau script streams the text in. Later versions reworked it into a 1440 x 402 banner. After the hero, I made a logo-spin animation and documented the typography and design system of their Framer site.

The delivered experience

The hero was handed off as a .riv with a self-contained HTML demo and developer docs listing the inputs. Screen captures of the hover states and the logo spin are in my archive.