Skip to content

02E-commerce · Homeware

Hearth & Hollow

A homeware storefront with every product drawn in SVG — and a bag, promo codes and a validated demo checkout underneath.

Self-initiated demonstration (live, completed)

Role
Design and development: Syed Ahad Haider
Type
E-commerce · Homeware

Stack

  • React 19
  • Vite
  • three.js
  • GSAP + ScrollTrigger
  • anime.js
  • Motion
  • Lenis
Visit live site
Hearth & Hollow home page: "Objects made to outlive us" beside an illustrated carafe on a terracotta field

About the project

A single-page shop for a homewares house, built as a demonstration. The catalogue filters by material, quick-look modals open each object, and the bag enforces stock limits and promo codes before a four-step checkout with field validation. Every product is a hand-authored SVG plate, so the site ships without a single photograph.

The problem it solves

Keeping pinned scroll scenes and a three.js background alive across navigation. Routing is a few dozen lines of hash parsing rather than a router, so the storefront never unmounts and a scene that was pinned stays pinned; Lenis and GSAP share one clock, so smooth scrolling and ScrollTrigger never fight each other.

Scope and limits

  • Deployed as a demonstration: the objects, stock numbers and promo codes are self-created content.
  • Payment is simulated — the gateway step returns an approved or a declined path so both can be designed and tested. No money moves, no card details are handled, no order is stored.

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 stock limits and promo codes
  • Four-step checkout with field validation
  • Simulated payment step with approved and declined outcomes (no real transactions)
  • Deep-linkable order confirmation
  • Pinned horizontal "rooms" rail, animated counters and testimonial cross-fades

Worth noticing

  1. 01Products are drawn, not photographed — each object is an SVG plate on a dyed field
  2. 02Lenis and GSAP share one clock, so smooth scroll and ScrollTrigger never fight
  3. 03Routing is a few dozen lines of hash parsing; the storefront never unmounts, so pinned scenes survive navigation
Hearth & Hollow catalogue: "Eight things, chosen slowly" with material filters and illustrated product cards
Hearth & Hollow home page on a phone

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.

This is react & next.js storefronts work — what it covers, what it does not, and how it is quoted.

Open Hearth & HollowHire me

Related work