Paintgun — Performance-First Webflow Development

Paintgun is a full-service creative agency that uses AI-powered analysis to help brands produce and improve advertising content.

I was responsible for transforming the provided Figma design into a responsive Webflow website. The project included complete Webflow development, media optimization, responsive implementation and custom JavaScript for handling multiple background videos efficiently.

The website relies heavily on video content to present Paintgun’s work and capabilities. Loading every video when the page opened would have created unnecessary traffic, increased the initial loading time and negatively affected performance.

The challenge was to preserve the visual impact of the original design without allowing the large amount of media to slow down the website.

Complete Figma-to-Webflow development

Responsive implementation across desktop, tablet and mobile

Image and video compression and optimization

Custom background video lazy-loading system

Separate desktop and mobile video sources

Safari, iOS and Low Power Mode video handling

Custom JavaScript implementation

Performance testing and optimization

Instead of loading every background video immediately, I developed a reusable JavaScript solution based on IntersectionObserver.

The script detects when a video section is approaching the viewport and loads its media only when needed. This reduces the amount of data requested during the initial page load while keeping the video ready when the visitor reaches the section.

Videos load only as the corresponding section approaches the viewport

Different horizontal and vertical files can be served to desktop and mobile devices

Posters provide a visual fallback before the video becomes available

Video elements are generated automatically from configurable data attributes

Additional fallback behaviour supports Safari, iOS and energy-saving conditions

I later turned this implementation into a reusable development tool with documentation and ready-to-use code:

All image and video assets were prepared and optimized for web delivery. Combined with conditional video loading, this allowed the website to retain its media-rich presentation while achieving green Google performance indicators at the time of delivery.

Rather than removing videos or simplifying the design, the development approach focused on loading each asset at the right moment.

The finished website translates Paintgun’s visual identity into a responsive Webflow experience while handling a large amount of video content more efficiently.

The project demonstrates how custom development can extend Webflow beyond its standard functionality and solve performance problems without compromising the creative direction.

Live website: paintgun.io