Teknosfere — Web Design & Development

Teknosfere is a specialized defense tech marketing and communications agency based in Germany, operating across global markets. They needed a website that reflected the precision, authority, and forward-thinking nature of their brand — while standing out in a sector where most competitors rely on generic corporate aesthetics. I handled the end-to-end process: UX/UI design in Figma, Webflow development, custom animations, and CMS setup.

The brief called for a high-impact web presence that communicated credibility and technical expertise without feeling cold or inaccessible. The key challenge was building a scroll-driven hero experience — inspired by sites like Waabi.ai — that worked flawlessly across desktop and mobile without sacrificing performance.

The visual language draws from the defense and aerospace world — dark backgrounds, precise grid lines, technical typography, and a restrained use of an accent orange. The result is a site that feels authoritative without being intimidating.

Typography is set in Monaspace Neon Frozen — a monospaced variable font that reinforces the technical DNA of the brand. Layout decisions were made to balance large-scale visual impact with clear information hierarchy across all pages.

The site was built entirely in Webflow with advanced custom code layers:

Scroll-driven hero animation — a JPEG frame sequence (150 frames, dual resolution for desktop and mobile) hosted on Cloudinary, rendered via HTML Canvas and controlled through scroll position using Lenis smooth scroll. This approach was chosen over video scrubbing for superior performance on mobile.

Text animations — GSAP SplitText stagger animations triggered by scroll progress, with three rotating groups of headlines and paragraphs synced to the frame sequence.

Fullscreen navigation — custom CSS and JS hamburger menu with clip-path reveal animation and staggered link entries.

CMS Blog — fully dynamic blog system with custom rich text styles, category filtering, and a custom-styled template for individual posts.

Contact form — custom validation, email format checking, scroll position preservation on submit, and a fake submit button pattern to allow full design control over the native Webflow form.

Button interactions — character-level stagger hover animations on all CTAs using CSS text-shadow duplication technique.