Florent Le Page
White R-Flow mini air purifier

Product site

R-Flow

The website for a mini air purifier, connected to Shopify through the Storefront API.

Live

5 languages
0 dependencies: in-house generator
3 Cloudflare functions

A custom site, in five languages, selling a mini air purifier: the cart lives in the page and goes through the Shopify API, with no theme. It is also where I push motion furthest: CSS scroll-driven animations, view transitions, reduced motion respected.

Stack: HTML, CSS, JavaScript, Shopify Storefront API, Cloudflare Pages.

R-Flow home page

Scroll-driven animations

The site

  • In-house static generator, with zero dependencies.
  • Cart in the page, connected to Shopify through the Storefront API.
  • Five languages.

Server side

  • Three Cloudflare functions: geolocation, server-side Meta tracking, waitlist per color.

Motion

  • CSS scroll-driven animations, with a fallback for browsers without them.
  • View transitions between pages, scroll reveals.
  • Everything stops when the device asks for less motion.