SECAWA

SECAWA is a premium cybersecurity brand. The site had to communicate its technological level and leadership position at first glance. The result is a fully custom website built on reusable Gutenberg blocks, with a bespoke animation engine generating a three-dimensional wave-shaped background.

The brief

A premium cybersecurity leader with a site that did not reflect the company technological level. The site had to communicate innovation and leadership at first glance, while also giving the team a tool to manage content comfortably without touching code. My role was the full technical implementation.

A system of reusable blocks

Instead of rigid templates, the site is built on a set of several dozen custom Gutenberg blocks built on ACF. Each block (hero, offer section, philosophy section, testimonials, training section, blog and contact sections) is reusable and configurable, with separate spacing for desktop and mobile, a background color or image, and animation controls. The client assembles and rebuilds pages like building blocks, while keeping visual consistency.

A bespoke animation engine

The most distinctive element of the brand is the animated wave-shaped background. It is not an off-the-shelf library or a simple graphic, but a bespoke engine rendering a three-dimensional wave mesh in WebGL (Three.js), with shaders and a bloom glow effect. The engine is fully parameterized, from colors, amplitude, frequency and speed to dozens of other settings, with support for multiple layers.

I put a lot of weight on making sure the effect would not hurt performance or accessibility. The animation respects the reduced-motion preference (prefers-reduced-motion) and pauses automatically when it scrolls out of view. The striking background therefore costs neither page speed nor user comfort.

A custom editor

So the client could actually use these capabilities, I extended the Gutenberg editor itself. The standard group block gained an extra "background and animation" panel with an animation toggle and live-editable parameters, gradient overlay controls (radial, linear, blend modes, position, size, blur) and background image management. Configuration that would normally require code happens with a few clicks in the editor.

Result

The site conveys the high-tech, premium character of the brand from the first second, and the custom editor streamlined day-to-day content work. The client got not just a striking website, but independence too. They can build new pages and control the effects without a developer.