Engineering a web experience as refined as woven material
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
OUTDOOR PEOPLE SINCE 1979.
Fabrics &
technologies
Quantum
Quantum air
Quantum pro
Shield
Shield air
Shield pro
Equilibrium
Diamond fuse
Y fuse
Endurance
Evolve
Explore
pertex
Contact
Pertex Quantum uses a tightly woven structure to provide a light and soft downproof fabric that allows insulation to fully loft, providing both comfort and enhanced thermal performance.
Precisely constructed from incredibly fine yarns, Pertex Quantum fabrics are designed to trap still air and improve the efficiency of insulation. A durable water repellent (DWR) finish sheds light rain and snow to provide additional weather protection.
Scroll, scroll, scroll
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.
Hamilton’s spirit remains at the core of Pertex’s innovation ethos. Our design solutions are creative, sometimes unexpected. We combine and build on highly specialist knowledge sets, coordinating expertise from diverse domains unconstrained by industry norms. This way, we create qualitatively new solutions, exclusive technologies, and unique end user benefits.
Lancashire
Japan
Canvas rendering for next-level video experiences
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 canvas element, 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.
consumer
recycled nylon
recycled nylon
recycled polyester
Our partner Bureo works directly with fishing communities to collect their discarded fishing net waste and bring positive, end-of-use solutions to the most harmful form of ocean pollution.
These nets are recycled into nylon pellets, spun into yarn and woven to create Pertex fabrics.
We recover waste material from the production process, to be recycled into nylon pellets, thereby reducing use of virgin fossil fuel derived inputs.
Post-consumer PET waste is mechanically recycled back into polyester pellets.
Pixel-perfect on every device
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.
WEFT BR 20D/20F
Double abrasion
Resistance
Increased stability
Superior water
Resistance
Unique technical
Sheen
Empowering editors and designers with instant visual feedback
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
