kusa® — Matcha Tea House

Name: kusa® — Matcha Tea House
Brand: Brand Motion Studios
Price: 12.99 USD
Availability: InStock

Matcha For Your moment. Brutalist type, hand-drawn vectors, no photography.

A specialty matcha tea house built without a single photograph: every cup, pouch, bowl, whisk and leaf is a hand-drawn SVG, so the artwork parallaxes, tilts and scales crisply and recolours with the palette. Six sections, each with its own motion. The hero reveals its headline through line masks while the cup and pouch answer the pointer at different depths and float on their own idle loops. The menu rolls its prices on an odometer as the cards stagger in. The locations section scales a live clock on scroll while the drinks counter-parallax past it. The manifesto runs a 34-leaf depth-parallax field with every leaf tumbling on its own axis. The order-ahead receipt prints top-down out of a printer, driven by scroll position rather than by time. Lenis smooth scrolling is driven by the GSAP ticker so scrubbed sections share a frame and do not jitter, every moving object owns its own transform layer so GSAP and CSS never overwrite each other, and prefers-reduced-motion drops the motion layer and renders the final state. Vite, React 19, TypeScript, Tailwind v4, GSAP ScrollTrigger, Lenis and SplitType.

How to run this

Works the same on Windows, macOS and Linux. No prior setup beyond Node.js, and nothing to configure — the pack runs as-is.

Built with: Vite 7
Requires: Node.js 20 or newer
Opens at: http://localhost:5173

✦ Or let an AI agent set it up for you

Already using Claude Code, Antigravity, Cursor or Windsurf? Unzip the pack, open the folder as a project, and just ask:

Install the dependencies and run this project, then give me the URL

It reads the README included in the pack, runs the right commands for this project, and sorts out anything that trips along the way. You still need Node.js installed (step 1 below) — everything after that it can handle.

Or run it yourself

1
Install Node.js, if you don't have it
Download the LTS build from nodejs.org and run the installer — on Windows and Mac it handles everything. Mac users with Homebrew can run brew install node instead.
To check it worked, run node --version. It should print a number like v22.11.0.
2
Unzip the pack, then open a terminal inside the folder
Windows: open the unzipped folder in File Explorer, click the address bar, type powershell and press Enter.
Mac: press Cmd+Space, type terminal, press Enter. Then type cd (with a trailing space) and drag the unzipped folder onto the terminal window — it fills in the path for you. Press Enter.
3
Install the dependencies
Run npm install
One-time, and takes roughly 30–60 seconds. It creates a node_modules folder — that's expected, and it's why the zip doesn't ship one.
4
Start it
Run npm run dev
Then open http://localhost:5173 in your browser. Leave the terminal open while you use it — closing it stops the site. Press Ctrl+C in the terminal to stop.
5
Optional — build for production
When you're ready to deploy, npm run build produces the optimised output. The pack deploys to Vercel, Netlify or any Node host with no changes.

+ If something goes wrong

“npm is not recognised” / “command not found: npm”: Node.js isn’t installed, or the terminal was open before you installed it. Close the terminal, open a new one, and try again.
“Port 5173 is already in use”: Something else is running there — often a previous copy of this site. Close the other terminal, or stop it with Ctrl+C.
The page loads but images or video are missing: Make sure you ran the command from inside the unzipped kusa® — Matcha Tea House folder itself, not the folder containing it.
npm install shows warnings: Warnings (as opposed to errors) are normal and safe to ignore. Only a message starting with ERR! needs attention.

Still stuck? Email us and we'll get it running with you.

Source $12.99 · or All-Access

Unlock kusa® — Matcha Tea House

One of ours — sold as the complete source. Take it on its own, or get All-Access for every design in the store.

Complete source

$12.99

The finished build, as a download that runs today.

Or get All-AccessEvery design in the store, from $99 a year

Secure checkout by Lemon SqueezySecure checkout by Razorpay · UPI, cards, netbanking
Instant access the moment payment clears
Anything broken on our side is fixed or refunded within 7 days. Policy

What's included

✦Complete Vite + React 19 + TypeScript source — no assets to download, it runs from npm install
✦Every product drawn as a real vector in one file — cup, pouch, chawan, latte, iced matcha, plated slab, leaf and whisk — each minting its own gradient ids so duplicates never collide
✦The whole palette and type scale as Tailwind v4 @theme tokens, so the site re-themes from a single block
✦The motion layer, documented: Lenis on the GSAP ticker, layered transforms, SplitType line reveals refreshed on document.fonts.ready, and a reduced-motion path
✦Six sections wired end to end — price odometer, scaling clock, tumbling leaf field and the scrub-driven receipt printer

kusa® — Matcha Tea House

How to run this

More like this

VAARĀ — A Palace Resort, Travelled by Scroll

Monolith Type — ORBITAL Variable Type Foundry

Ruturaj Jena — Augmented Portfolio

AURELIAN Calibre 01 — Skeleton Automatic