GOODKIND

Overview

GOODKIND is a cinematic scroll-driven pet-boutique landing by SonoJS. Built with Vite 8, React 19, TypeScript, Tailwind CSS 4, React Three Fiber, Three.js, GSAP, and Lenis. Chapters for The arrival, Good company, Everyday objects, Our point of view, and A little closer. Illustrated pet companions (dog, cat, rabbit, parrot), product cards with dialog chrome, adaptive WebGL quality with a simple HTML fallback. Demo shop chrome only - no checkout backend. Run with npm install && npm run dev (port 5174) or host the Vite build on Cloudflare Workers.

Highlights

1. 01

   Scroll-driven 3D boutique

   R3F / Three.js world with GSAP + Lenis chapter timeline.

2. 02

   Good company

   Dog, cat, rabbit, and parrot portraits with illustrated fallbacks.

3. 03

   Everyday objects

   Product cards and dialog chrome for food, tug, grooming, bowl.

4. 04

   Adaptive WebGL

   Quality tiers plus simple HTML view when WebGL is weak or off.

You get

• Full Vite + React 19 + TypeScript source (GOODKIND)
• src/three Experience, World, pets, products
• public/pets + public/products WebP assets
• GSAP scroll timeline + Lenis smooth scroll
• Tailwind CSS 4 via @tailwindcss/vite

Run locally

From the unzipped project folder:

npm install && npm run dev