2026Interior

Lostgarden

DESCRIPTION

Furniture Design Archive

DURATION

Dec 2025 - Jan 2026

MY ROLE

UX/UI Design: Overall minimal and sophisticated web design that embodies the identity of 'LOST GARDEN'.
Full Stack Development: Developed archive system using Next.js and Supabase, and integrated APIs.
Interactive Motion Development: Implemented scroll-based interactions and visual effects using GSAP.
Infrastructure & Security: Stabilized service through Cloudflare security settings and custom domain integration.

TECH

Frontend

Next.js · TypeScript · Tailwind CSS

Animation

GSAP · Framer Motion · ScrollTrigger

Backend

Supabase · Vercel

Infrastructure

Cloudflare

Project Purpose

"Crafting Silence in a Noisy World." Beyond simply creating objects, we implemented the brand philosophy of 'LOST GARDEN' that sculpts atmosphere in digital space. By expressing the texture and sculptural beauty of furniture through the website's minimal layout and organic animations, we aimed to provide users with an experience akin to viewing an exhibition. • Aesthetic Minimalism: Designed achromatic tones and clean typography to allow focus on the details of furniture. • Experiential Archive: Built a living archive that responds to user scrolling, not just a simple listing.

Scope

· Brand Identity Establishment
· Interactive Web Design
· Full Stack Development
· CMS Build

Key Technical Features

Dynamic Collection Gallery

· Implemented an interactive gallery with a flexible grid layout that arranges furniture images of various sizes in an artistic grid, revealing detailed information on hover.
· Designed intuitive exploration of vast archives through category-based filtering functionality.

Immersive Motion Storytelling

· Applied parallax effects where images and text move at different layers according to user scroll speed using GSAP Scroll Effects, adding spatial depth.
· Implemented seamless transitions during page navigation to maintain the brand's sophisticated image.

High-Performance Visual Asset Management

· Optimized high-resolution furniture photography using Next.js Image Component for lazy loading (LCP improvement) and WebP format optimization.
· Designed backend structure using Supabase Storage & DB for efficient management of furniture specifications and high-resolution images.

Design Points

Typography & Visual Hierarchy

Applied serif typeface to 'The Archive' title to convey authority and trust, and placed highly readable sans-serif in body text to achieve balance.

Sculptural Interaction

Placed furniture images large to convey the power inherent in the objects themselves, and used restrained motion so interactions do not distract from the gaze.