A high-end cinematic landing page for NEON, featuring premium motion design and immersive film showcases. Built with Next.js 14, Framer Motion, GSAP, and Three.js to deliver an award-winning web experience.
NEON은 현대적인 웹 인터랙션 기술과 시네마틱한 스토리텔링을 결합한 럭셔리 영화 스튜디오 웹사이트 프로젝트입니다. 큐레이션된 영화 라이브러리, 인터랙티브한 수평 스크롤 섹션, 그리고 몰입형 3D 굿즈 숍을 통해 사용자에게 마치 극장에 있는 듯한 매끄러운 경험을 제공합니다.
이 프로젝트는 고성능 애니메이션과 부드러운 스크롤 시스템을 활용하여, 아방가르드한 영화적 감성을 프리미엄 웹 인터페이스로 구현하는 데 중점을 두었습니다.
- Cinematic Hero Carousel: Embla Carousel과 Framer Motion을 결합하여 역동적인 타이포그래피와 부드러운 전환 효과를 제공하는 전체 화면 히어로 섹션.
- Interactive Film Grid: 반응형 그리드 레이아웃을 통해 최신 개봉 영화를 직관적으로 탐색하며, 호버 시 감각적인 상태 변화를 제공.
- Horizontal Discovery: "Watch at Home" 섹션에서 가로 스크롤 방식을 채택하여 모바일과 데스크톱 모두에서 탁월한 탐색 경험 구현.
- Immersive 3D Merch Store: Three.js (@react-three/fiber) 기반의 인터랙티브한 상품 전시와 Zustand를 활용한 통합 장바구니 시스템.
- Smooth Interaction (Lenis): Lenis를 프로젝트 전반에 통합하여 기기와 관계없이 일정하고 부드러운 시네마틱 스크롤 품질 확보.
- Premium UX Details: 사용자 움직임을 추적하는 Custom Cursor와 감각적인 Preloader 애니메이션으로 몰입도 극대화.
| Category | Technologies |
|---|---|
| Languages |     |
| Frontend |     |
| Animation/3D |    |
| Tools/Backend |    |
먼저, 개발 서버를 실행하세요:
npm run dev
# or
yarn dev
# or
pnpm dev
브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.
src/components: UI 컴포넌트들을 기능별(home,layout,ui)로 체계적으로 구성.src/store: Zustand를 이용한 전역 상태 관리 (장바구니, UI 메뉴 등).src/app: Next.js App Router 기반의 페이지 및 레이아웃 구조.public/images: 프로젝트에 사용된 고해상도 시네마틱 에셋 및 상품 이미지.
Developed with a focus on cinematic excellence and visual impact.