Blackteq — Full-Site Design & Development

Led end-to-end design and development for Blackteq, a defense technology company producing precision loitering munition drones. Delivered a fully custom Webflow build with production-grade motion design — going well beyond what Webflow's native toolset supports out of the box.

Blackteq needed a site that communicated technical precision and reliability — the same qualities as their product — without relying on generic template patterns. The brief called for cinematic scroll-driven storytelling to showcase two drone platforms (COBRA-E and COBRA-T), a CMS-powered news section editors could manage independently, and page transitions that felt deliberate and premium rather than a simple fade. All of it had to remain fully editable by a non-technical team after launch.

Custom interaction system: built a scroll-driven "hero blinds" component using SVG masking to transition between product imagery, ending in animated odometer-style counters that reveal live spec data — all packaged as a reusable Webflow Component with variants, so the client can duplicate it for future products without touching code.

Page transitions: implemented Barba.js + GSAP for seamless SPA-style navigation across the site, including a signature curtain-wipe reveal with the brand mark, carefully tuned to match the same easing curves used in the site's navigation menu for visual consistency.

CMS-driven filtering: built a client-side category filter for the News section, reading Webflow's native CMS reference fields to count and filter posts by category — with zero reliance on third-party filtering apps.

Component architecture: used Webflow's Component Properties and Variants system throughout (buttons, cards, navigation states) so content edits and even visual variants remain fully manageable inside the Designer, no code required.

Performance-conscious custom code: every animation was hand-written and centralized in a single, well-structured codebase — avoiding the common pitfall of scattered, duplicated Code Embeds that make CMS sites hard to maintain long-term.

A production site that pairs Webflow's content-management strengths with agency-grade motion design — the kind of build that shows what's possible when you treat Webflow as a real development platform rather than a page builder. The client can manage all content (posts, product specs, imagery) independently, while the interactive systems (transitions, filters, animated components) keep working exactly as designed.

Webflow · GSAP · Barba.js · JavaScript (custom) · Webflow CMS · Component Variants