Cyber-Sec Boutique

Metastrategy.ai is a website for a boutique consultancy that supports security decisions on three sides: companies selling security, organisations buying it and capital investing in it. The site is built in Framer, and the goal was to explain a complex, high-stakes offer in a way that feels clear, calm and credible to boards, investors and founders.

The core of the project is a set of custom code-driven animations for the Services tiles. Each one is a pyramid diagram that builds itself once it scrolls into view, with nodes, forks, chevrons, signal paths and a subtle analog-noise flicker. All of them are reusable Framer code components that share the same geometry, colour logic and trigger mechanism, so the whole set reads as one visual language. Each animation plays once and settles on a clean final state instead of looping.

Everything is positioned in relative units and tested at several container widths, so nothing drifts or gets cropped on mobile. Elements stay hidden until their moment comes, and details like chevron placement, line weights and dash patterns are matched across every animation.

On top of the design and animation work, the site includes JSON-LD structured data for the homepage, About page and blog posts, GA4 tracking that shows traffic sources (including AI assistants) and reader journeys, and a newsletter signup ready to connect to an email tool.