Responses by Resn.

Background: Alpine Bio is a biotechnology company that sustainably and affordably produces some of the world’s most expensive and resource-intensive ingredients. The website needed to communicate its offerings and promote its innovative platform.

The site serves as a central hub for engaging Alpine Bio’s stakeholders, supporting investor relations, and driving awareness within the biotech and agricultural communities. The target audience includes growers, agricultural professionals, regulators and biotech experts interested in cutting-edge biomanufacturing solutions. Given the diversity of the audience, the site needed to make complex scientific concepts accessible while reinforcing Alpine Bio’s position as a technological leader in the industry.

Design core: One recurring visual signature is the circle motif. An existing part of Alpine Bio’s identity, the circle reinforces Alpine Bio’s brand while adding depth and excitement to the design. We opted for a layered, collage-driven aesthetic with overlapping bright colors, asymmetrical layouts and contrasting elements to create a distinct visual experience. The fusion of organic imagery and structured scientific elements reflects the intersection of agriculture and technology central to the Alpine Bio brand.

Challenges: Building the flexible circle asking system while ensuring smooth performance. We also had to create a system that allowed for dynamic visual storytelling without sacrificing usability or speed; this required extensive experimentation and optimization. We ended up using two different approaches: WebGL for the high-performance homepage animations, and GPU-accelerated SVG canvas drawing for the rest of the site. This enabled us to achieve a seamless, visually rich experience while allowing more flexibility for client-side content management.

Navigation structure: The navigation was designed to guide users through Alpine Bio’s mission, technology and solutions while helping them find specific information without disrupting the flow. Because of the complexity of the subject matter, we used clear, section-based navigation to help streamline the user journey. We also injected scroll-driven interactions to imbue a sense of movement.

Technology: We built the front end with Vue 3, styled with SCSS and animated using GSAP for precise motion control. For the homepage, we used three.js and GLSL to handle the shader effects. For one of the key scrolling animations—a half-tone shader that transitions through a strand of DNA, a protein molecule and a growing seedling—we used Tweakpane to fine tune the animation in real time. For the back end, we used Sanity, which provides a headless CMS for structured content management.