Click to download Brand Assets .zip (7mb) Click to download Merlin's Brandbook
Client
erthos®
Partner
WØRKS
Description
Crafting an award-winning web experience for erthos® that's elegant, performant and accessible together with WØRKS. View Project

erthos®

The Case

Crafting an award winning experience for erthos® to rid the world of plastics

erthos® is a biomaterials company reimagining the building blocks of plastics.
Our team worked closely with erthos® and WØRKS to create a custom website that embodies the innovative spirit of the bio-plastics company. With a strong focus on accessibility, we created an experience that captivates visually while being inclusive for users of all abilities. The elegant motion and seamless transitions throughout the site reflect the forward-thinking nature of erthos®.

View Website
Ingredients used by Erthos

Key Objectives

  • Create a scalable content system: We created a Dynamic Templating system on top of DatoCMS with NextJS (React)
  • Ensure WCAG Level 2 compliance: To ensure accessibility and to follow the US law, we tested and applied various accessibility measures
  • Performant Animation: We used CSS animations throughout the site combined with Framer Motion when needed.
  • Seamless Light and Dark themes: We built a seamless ligh to dark switch that transitions the complete user interfaces smoothly to the new color when visiting that section in the menu or on the website
  • Stability: We use Vercel's bespoke hosting and security system, capable of handling any attack or load thrown at it.

ZYA by Erthos

Accessible, though motion-filled

For erthos®, we built a site that's both accessible and visually compelling. We followed WCAG standards to ensure compatibility with screen readers and keyboard navigation. This wasn't just about ticking boxes - we wanted real, seamless usability for all visitors. At the same time, we crafted thoughtful animations and micro-interactions that elevate the visual experience. It's this balance of function and form that we're particularly proud of. The end result is a site that works well for everyone while still delivering an engaging digital experience.

Asset handling for performance

We created a video and image system that downloads video's from the CMS, optimizes the video for web and uses them from its own domain for performance gains and to remove the necessity to go on a paid plan. The videos are played only when they are in view and we use a new CSS performance boost called: content-visibility which disabled images and video from rendering when out of view.

"This project was all about showing people the vision and mission of erthos®. We got extra motivated due to the nature of this amazing company."
Mees Rutten, Founder @ Merlin Studio
Erthos®

Results & Ongoing Partnership

erthos® won Site of the Day on Awwwards, The FWA's and CSS Design Awards. We also won Developer Award on Awwwards. The website is often updated, gets traction from news sites and is often used in design inspiration directories. Together with WØRKS, we look back on a positive collaboration that gave many insights during our retrospective and continue to work on projects.