For Pertex, a pioneer in high-performance fabrics trusted by iconic outdoor brands like Patagonia and Goldwin, Systems Studio crafted a digital experience that blends compelling storytelling with seamless interactivity. By thoughtfully integrating scroll-triggered animations, tailored videos, and dynamic visual elements, we transformed browsing into an immersive exploration of Pertex’s heritage and innovative materials. Our primary focus was ensuring every interaction felt exceptionally smooth and engaging.

We partnered on Frontend + backend development, Server management

Design Systems Studio

Year 2024

At the heart of the project was the idea that scrolling isn’t just navigating—it's storytelling. Two key pages were fully designed as immersive "scrollytelling" journeys, placing user scroll behavior at the center of every animation and transition. Achieving buttery-smooth performance was essential, significantly shaping how users experience and connect with the brand narrative.

Although GSAP, a popular JavaScript animation library, could have provided a ready-made solution, we chose Locomotive Scroll as our framework, complemented by custom-built scripts. Writing bespoke animations provided unmatched flexibility, allowing precise performance control. This approach minimized unused code delivered to the browser, drastically reducing load times and optimizing site responsiveness.

Critically, our animations enhance rather than overwrite structured HTML content. This strategic choice ensures that search engine bots can effortlessly index every page, maintaining optimal visibility in search results.

Rich video content was essential to showcase Pertex’s dynamic capabilities, with some pages featuring multiple clips simultaneously. Simply compressing videos wasn’t always sufficient, particularly on lower-end devices where browsers struggle with heavy decoding tasks. To tackle this, we proactively sought innovative solutions to deliver uncompromised quality without sacrificing performance.

Inspired by high-performance showcases like Apple’s product pages, we implemented "video-as-image sequences," rendering each video frame individually into a canvaselement, rapidly swapping frames based on scroll position. While this slightly increased the total data transferred, bypassing video decoding dramatically improved overall performance, creating an exceptionally fluid browsing experience.

We meticulously used vector graphics wherever possible, preserving crisp detail at any scale and eliminating compression artifacts. Traditionally static elements, such as charts, became dynamic, responsive, and interactive visual tools. We built these from scratch, ensuring seamless scaling and smooth animations that adapt fluidly across devices. The result? Crystal-clear visual precision on screens of any size, notably enhancing readability on mobile devices.

Great design often emerges from real-time experimentation. To empower both designers and Pertex’s editorial team, we integrated Storyblok, a sophisticated yet user-friendly visual editing system. Storyblok offers instant previews and effortless editing of videos, images, and textual content. Its intuitive, block-based structure simplifies handling complex content, aligning seamlessly with Systems Studio’s meticulous approach and Pertex’s exacting standards for digital excellence.

Identity and website by Systems Studio, all illustrations and 3D models done internally.

Frontend: Nuxt 3, Three.js, Locomotive Scroll CMS: Storyblok