Lostgarden
DESCRIPTION
Furniture Design Archive
DURATION
Dec 2025 - Jan 2026
MY ROLE
- UX/UI Design: minimal, composed web design built on the LOST GARDEN identity.
- Full-stack Development: archive system and API integration on Next.js and Supabase.
- Motion Development: scroll-driven interaction and visual effects in GSAP.
- Infrastructure & Security: Cloudflare configuration and custom domain setup.
TECH
Next.js · TypeScript · Tailwind CSS
GSAP · Framer Motion · ScrollTrigger
Supabase · Vercel
Cloudflare
Project Purpose
"Crafting Silence in a Noisy World." LOST GARDEN does not make objects so much as atmosphere, and the site was built to carry that rather than to list a catalogue. A minimal layout and slow organic motion put the texture and mass of each piece first, so moving through the collection is closer to walking an exhibition than to shopping one. • Aesthetic Minimalism: neutral tones and quiet typography, so nothing on the page competes with the detail of the furniture. • Experiential Archive: a living archive that answers to scroll, rather than a list that pages.
Scope
- · Brand Identity Establishment
- · Interactive Web Design
- · Full Stack Development
- · CMS Build
Key Technical Features
Dynamic Collection Gallery
- · A flexible grid holds furniture images at mixed sizes and reveals the specifications on hover, so the layout never has to be broken up by labels.
- · Category filtering keeps a large archive navigable without a search box.
Immersive Motion Storytelling
- · GSAP-driven parallax moves images and text at different rates against scroll speed, which is what gives a flat page its sense of room.
- · Page transitions run without a flash, so the brand's composure survives navigation.
High-Performance Visual Asset Management
- · High-resolution furniture photography is served through the Next.js Image component with lazy loading and WebP conversion, which is where the LCP gain came from.
- · Supabase Storage and Postgres hold the specifications and the imagery together, so adding a piece is one record rather than a deploy.
Design Points
Typography & Hierarchy
A serif carries 'The Archive' where the page needs authority; a highly legible sans carries everything the visitor actually has to read.
Sculptural Interaction
Furniture is placed large enough for the object's own weight to register, and the motion around it is held back so nothing competes with looking.
Inquiry at the End of the Walk
A short inquiry form sits at the foot of the archive, where someone who has been browsing for a while is most likely to ask.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.