Selected work02E-commerce · Homeware
Hearth & Hollow
A homeware storefront with every product drawn in SVG — and a real bag, checkout and payment flow underneath.
- Role
- Design & development
- Type
- E-commerce · Homeware
Stack
- React 19
- Vite
- three.js
- GSAP + ScrollTrigger
- anime.js
- Motion
- Lenis
About the project
A single-page shop for a fictional homewares house. The catalogue filters by material, quick-look modals open each object, and the bag enforces real stock limits and promo codes before a four-step checkout with validation and a mock payment gateway that returns both approved and declined paths. Every product is a hand-authored SVG plate, so the site ships without a single photograph.
What it does
- Intro preloader and a three.js shader background that reacts to scroll and pointer
- Catalogue with material filters (clay, wood, textile, metal) and quick-look modals
- Persistent bag with real stock limits and promo codes
- Four-step checkout with validation and a mock payment gateway (approved and declined paths)
- Deep-linkable order confirmation
- Pinned horizontal "rooms" rail, animated counters and testimonial cross-fades
Worth noticing
- 01Products are drawn, not photographed — each object is an SVG plate on a dyed field
- 02Lenis and GSAP share one clock, so smooth scroll and ScrollTrigger never fight
- 03Routing is a few dozen lines of hash parsing; the storefront never unmounts, so pinned scenes survive navigation
Want something like this?
Open the live site, poke at it, then tell me what you have in mind. A two-line brief is enough to start.