Online shop demo, brand name not yet decided
Hangwa brand shop demo
An online shop that tells the brand's story in six scroll scenes and carries on into choosing products and the cart.
Project notes
Real screens
The product photos on screen are staged images made with an AI image tool.
Introduction
An online shop demo for a jeonggwa brand (nuts candied in syrup). There is no brand name yet, so it reads ○○정과. The home page is six scroll scenes, followed by products, gift sets and a cart.
Purpose
Show, before the brand is settled, a jeonggwa shop that holds both the brand story and a real buying flow.
Main features
- Six home scenes, in order: the opening on hanji paper, which moves in on a bowl of jeonggwa (nuts candied in syrup); light and gloss; a closer look with two products side by side; the story of how they are made; gift wrapping; and the shop, with the product list. Scroll up and they play back in reverse.
- Pages for all products, product details, gift sets, the brand story, the cart, FAQ and contact.
- Choosing an option and quantity updates the total at once, and the item goes into the cart. Sold-out items are marked.
- On phones a buy bar appears at the bottom only in the shopping section.
- Per-page metadata, Open Graph, product structured data, sitemap.xml and robots.txt are included.
- On slow phones it scales back the effects, and with reduced motion turned on, the pinned scenes and scroll effects switch off.
Technology
- Next.js 16 (App Router)
- The whole site
- TypeScript
- Code
- Tailwind CSS 4
- Styling
- GSAP ScrollTrigger
- Scroll scenes
- Motion
- Transitions and small motion
- Lucide
- Icons
- localStorage
- Cart and wishlist storage, on the device only
- Playwright
- Automated browser checks
How it was made
- Built the home, shop, product, gift, story, cart, FAQ and contact pages first.
- Turned the home page into six scroll scenes.
- Softened the hanji texture and made the scroll cue readable on phones.
- Checked it with 122 automated browser checks (the scenes, the cart and the layout at each screen width) and 26 interaction tests.
Problems and fixes
- Fixed
Problem: Live blur and compositing stuttered on low-end devices.
How it was fixed They were replaced with pre-rendered images, and only transform, opacity and CSS variables are animated.
- Fixed
Problem: Scroll effects that hijack scrolling make a page hard to use.
How it was fixed Scenes are pinned with CSS sticky only, and the scroll speed and position are never forced.
- Fixed
Problem: There is no brand name, price list or real product photography yet. They go in once they are decided.
How it was fixed All content lives in data files, and an empty value shows as “등록 대기” (pending). The photo slots hold staged images made with an AI image tool, demo mode labels prices as examples, and the order button only says payment is not connected yet.
- Still open
Problem: Lighthouse's default (simulated) mobile LCP came out at 2.2 to 4.8 s, over the 2.5 s target.
How it was fixed Measured with real network throttling and 4x CPU slowdown it was 0.7 to 2.0 s. It needs re-checking with real-user data after deployment.
Result
On a local production build (2026-10-13), it passed 122 automated browser checks and 26 interaction tests, layout shift (CLS) stayed at or under 0.005 on 8 pages, and the desktop Lighthouse performance score was 99 to 100. Payment is not connected, and it has not been checked on real iPhones, Galaxy phones, Safari or Firefox.
See it working
- Working build
Hangwa brand shop demo
The shop front end as built, published as a static copy. The cart and wishlist are kept in this browser only; there is no ordering, payment or contact. The brand name is not settled, so it reads ○○정과. Product photos are staged images made with an AI image tool; the two raw ingredient photos are from Unsplash.
- Demo video
A recording of the real screen.
The screens in these demos are in Korean.
Related projects
My part and AI tools
Where AI tools were used
- Pages, scroll scenes and test code were made with an AI coding tool (Claude), per the repository history of 2026-10-13.
- The placeholder copy was also written with AI and is marked on screen as placeholder copy.
- The staged product and scene images were made with an AI image tool. Two reference photos are from Unsplash.