A three-woman soap company competing against Instagram-optimized aggregators. The storefront had to feel like the packaging — hand-cut edges, botanical stains, small-run care — and not like another square-frame product grid the algorithm rewards.
Isla Suds
3D as texture, not spectacle
Each bar has a low-poly WebGL turnaround weighing under 80KB, rigged to scroll. The rotation is slow enough to read as a slab of soap turning on a table, not a spinning trophy. Reduced-motion swaps in a hand-photographed silhouette.
One long scroll, not five pages
The whole storefront is a single vertical composition — story, catalog, ingredient index, checkout invitation. Navigation is a jump list, not a top nav. The reader always knows where they are because they haven't gone anywhere.
Checkout borrows nothing from Shopify's defaults
Hydrogen's default cart is invisible; the custom cart uses the site's typography, its own transitions, and a two-column layout that keeps the soap in view while the reader edits quantities. Checkout is a continuation of the storefront, not a hand-off to a foreign shell.
Motion has a job.
Every animation in this project earns a place by telling the reader something they'd otherwise have to guess at.
Bar-tumble hero
The hero soap bars tumble into position on first paint with a weighted-object easing — one bar catches the corner and pivots slightly, so the composition doesn't land dead-square. It reads as three hands placing bars on a table.
Scent-note reveal on hover
Hovering a bar reveals its scent-note stack (top / heart / base) as three staggered lines rising from beneath the price. A tactile disclosure that never blocks the click.