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.

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.

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.

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

The animated graphic elements were easier to execute since there's no interaction in place:

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.

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.