Earth's Best
View LiveTechnologies used
- Alpine.js
- Tailwind
- Craft CMS
- Blitz
- Twig
- A11y
- WCAG
Overview
Full build and creative front-end development for Earth's Best, the American baby food brand known for organic, parent-trusted products since 1985. Commissioned by Abstrakt, the brief was to translate the brand's Playtime campaign into an interactive digital experience built around trust, nutrition and joy.
I worked closely with Abstrakt's in-house design team and illustrators to turn the creative vision into a working site. Every animation and transform stays within native CSS, which kept performance smooth across devices without leaning on animation libraries. Alpine.js and Tailwind carry almost all the interactivity between them, so the dependency footprint stayed minimal throughout.
Ingredient animations
Product ingredient visuals respond to hover and scroll, popping out from product cards across the recipe and shop pages. Small detail, but it's the kind of thing that gives the Playtime energy somewhere to live in the actual product browsing experience, not just the hero sections.
The product filter was one of the more interesting technical pieces. I built a client-side filtering and sorting system as a custom Alpine.js component: product data loads server-side in Twig, then gets normalised and injected into the component for instant filtering and sorting without a server round trip. I also wired in the browser history API, so filter state persists properly across back and forward navigation rather than resetting.
Built on Craft CMS with Twig templating and Blitz for caching, the stack gave the client straightforward content management without complicating the front-end build. Accessibility was a first-class requirement throughout, the site meets WCAG standards, which shaped decisions around focus states, colour contrast and interaction patterns from early on rather than being retrofitted at the end.
The result is a site that carries the Playtime campaign's tone through to the product and recipe pages, not just the marketing surface, while staying fast and accessible across devices.