Metastrategy.ai
SCOPE:
RESPONSIVE WEB DESIGN
FRAMER DEVELOPMENT
YEAR:
2026
Metastrategy is a boutique consultancy that helps boards, investors and founders make better decisions in the cybersecurity market. I designed and built their website in Framer, from the information structure to a set of custom animated diagrams that explain what the consultancy actually does.
Problem
Most security websites sell fear. Red alerts, padlocks and urgency. Metastrategy wanted the opposite. Their clients are not buying a product, they are buying judgment, so the site had to feel calm, mature and credible.
The harder part was the content. The services are abstract: decision support for boards, venture building for security companies, commercial strategy for B2B security firms. Text alone would turn that into a wall of jargon, and generic icons would say nothing. The site needed a visual language that explained the structure behind each service without adding noise.
Process
One shape, many stories. I built the whole visual system around a single pyramid, a simple representation of a decision hierarchy. Each Services tile uses the same pyramid differently. Different layers light up, and a maroon marker (the consultancy's input) connects to a different part of the structure depending on who the service is for. A board sees a different diagram than a founder does, but it all reads as one language.
Animations as code components. Every diagram is a reusable Framer code component. They share the same geometry, colour logic and trigger, so adding a new one means reusing proven parts instead of starting over. Each animation starts when the tile scrolls into view, plays once and settles on a clean final state. No looping, because calm was the brief.
Details that nobody notices. Everything is positioned in relative units and tested at several container widths, so nothing drifts or gets cropped on mobile. Elements stay fully hidden until their moment comes, line weights and arrowheads are matched across all diagrams, and dashed lines use fixed patterns so they look identical wherever they are placed.
Under the hood. I added structured data (JSON-LD) for the homepage, About page and articles, and set up GA4 so traffic sources are visible, including AI assistants as a channel. The newsletter signup is prepared to connect to an email tool.
Outcome
The site gives Metastrategy a distinct, quiet identity in a market full of alarm. The services are explained through structure instead of slogans, and the animation system is ready to grow with new offers without a redesign.
