Written by
Helena Dang
Security companies have a branding problem. Everything is dark blue, everything has a padlock, and everything looks like it’s about to tell you bad news.
So when I worked on a CyStack landing page, I wanted one thing on that page to feel fun. The logo.
The idea
A ring of glossy purple fins circling the CyStack logo, like a shield that’s also a little bit of a toy. The kind of thing you want to grab and spin.
[ I first thought about it when my current boss said he wanted something dynamic, strong, and not boring. My mind clicked, and I thought of using Spline and 3D for interactive movement. I thought, why not? I’m always that girly at a company. People ask why, me? I ask why not. ]
Learning 3D on a real project
This was my first proper 3D experiment on a real website, which is a fancy way of saying I learned a lot of things the hard way. Two things I’d tell anyone starting out:
Lights matter more than shapes. The same fins can look flat and sad or glossy and expensive, and the only difference is the lighting.
Motion should be slow. Calm rotation feels premium. Fast rotation feels like a loading spinner.
What I’d do differently now
Plan for slow phones from day one. 3D looks great on my laptop and melts an old Android. I’d make a lighter version for mobile and a still image for people who prefer less motion.
Decide what the 3D is for. A spinning logo is nice. A spinning logo that reacts when you scroll to the security section is a story.
Keep a static backup. If the 3D fails to load, the page should still look finished.
Why bother?
Because a security brand can be trustworthy and still be a little bit delightful. People remember the thing they wanted to touch.
[ The dev team wasn’t too excited about the change at first, haha, but I’ve always had a good relationship with them. After talking it through, we agreed on a 3D video with the right timing instead of adding an interactive 3D model to the website, since they already have a lot on their plate. My boss loved the idea, and users are starting to notice CyStack more instead of seeing the same old 2D cybersecurity illustrations. ]
