Imperfect Foods

The Ask

Imperfect Foods is a grocery delivery service (and Public Benefit Corporation) on a mission to reduce food waste. After raising their Series D ($110M) in early 2021, they needed to quickly upgrade their marketing site, which receives about 2 million visits per month.

They had already invested in an extensive redesign with detailed annotated mocks. What they needed was implementation—specifically developers with experience in CSS animations and highly interactive React components. We took on the technical lead role, working with two other developers on the project.

The goal was modular, well-documented components via Storybook, with accessibility for keyboard and screen reader users.

The Process

We built several interactive components that are still on their site:

Pantry Component: A carousel scrolling through product categories, with each slide animating via a background wipe and fade-in foreground. Cory Alvernaz led this component; we collaborated on swipe animations and the auto-playing feature.

Badge Carousel: Large buttons arranged in a semi-circle along the left side. Clicking each triggers coordinated animations showing specific products. Rob Kayson and I worked on this together. The tricky parts were animating multiple SVGs in perfect harmony and aligning the badges in a semi-circle—which required dusting off our geometry knowledge.

Impact Slider: A slider showing how much water, food, CO2, and time could be saved by using their service. This was a solo effort. The scrolling numbers were implemented in pure JavaScript, with SVGs animated via CSS. The slider was built with divs but made accessible with proper ARIA attributes:

<div aria-valuemin="0" aria-valuemax="2" aria-valuenow="1" aria-orientation="horizontal">

The Outcome

The components launched as part of Imperfect Foods' major site refresh. Each component was delivered with full Storybook documentation, enabling their internal team to maintain and extend the work. The animations run smoothly across devices while remaining accessible to all users.