threatER (threater.com) is the leading active defense platform in the cybersecurity industry today. To reflect that they invited Fixel (wearefixel.com), a premium design agency led by Vin Thomas, to redesign their website.
One of the project's main goals was to quickly explain threatER's security solution to all website visitors, even non-experts. That's when Fixel invited me to create an interactive hero and three other animations to easily convey such a complex concept.
Pre-production: Loom and Figma
Vin sent me a Loom video explaining the idea behind the elements his team envisioned. They also provided me with a web design Figma file, which works great since I prefer to export my own assets when planning for the interactions and animations I pretend to build.
Hero layout in Figma
Execution: interactions and animations in Rive
Over the years I developed an iterative workflow to can catch issues in early stages, giving me time to pivot: I start by blocking the basic movements I want to see on screen and observing how the entire piece comes together; after that, I create the state machines and logic for the main interactions and behaviors.
Rive editor
On the hero piece, there were five expected behaviors I was trying to achieve:
The row of squares had to be animated in a loop
Squares should shatter upon colliding with the wavy shield
The wavy shield and threatER logo should move with the cursor
The four bubbled icons’ should have hover state
Rive behind the scenes details
The animated graphic elements were easier to execute since there's no interaction in place:
Animated graphics in homepage section
Handoff: Google Drive, Notion page, Loom and ClickUp
With the client's approval the only step left is the handoff. For all my clients I deliver a Google Drive folder with ready to ship .riv files and a shared Notion page with details that can be handy for implementation.
Handoff documentation in Notion on the left and ClickUp chat with Fixel's team on the right
Depending on the client's preferences, I also use other tools. For Fixel, with whom I have a long-standing partnership, I frequently use ClickUp, Loom, and quick calls to ensure a smooth handoff.