An interactive storefront for Kapu: a playground and shop where you watch caterpillars munch and slide glass.
Hydrogen
: Shopify's framework that contains Remix optimized components and integrated Storefront APIRemix
: for smooth data fetching and renderingGraphQL
: for querying Shopify datap5.js
: for its neat vector math supportRough.js
: for the hipness purgatory lookTailwindCSS
: for stylingReact
Node.js
JavaScript
Every collection page features a different slide and illustrations. Only 3 products are displayed at a time, and to view other products, you'd have to scroll or drag on the little caterpillar UI at the bottom.
Each slide shape is saved in an SVG, so the positions on slide can be obtained by calling getPointAtLength
.
Caterpillars "munch" at the featured images on the homepage.
The caterpillars search for nontransparent pixels in their proximity and move towards colors, or simply pick random direction if it's in the wild (no colored pixels around). Their movements are stored in a buffer and used to mask another buffer of featured images. The result is then rendered directly on the homepage.
There's a shape shifting butterfly, procedurally generated with p5.js, that follows the mouse on web.