NEPER
네퍼 · 아날로그 신시사이저 (가상 브랜드)'손에 답하는 악기'라는 컨셉을 GSAP 인터랙션 최대치로 구현한 영문 제품 런치 사이트입니다. 로드되면 장비가 켜지듯 3분할 패널이 순차 점등하고, 스크롤을 내리면 필터·시퀀서·파형이 캔버스로 살아 움직입니다.
전부 직접 기획하고 코드로 그린 실제 구동 화면입니다.
템플릿·빌더 없이, 브랜드마다 다른 문법으로.
'손에 답하는 악기'라는 컨셉을 GSAP 인터랙션 최대치로 구현한 영문 제품 런치 사이트입니다. 로드되면 장비가 켜지듯 3분할 패널이 순차 점등하고, 스크롤을 내리면 필터·시퀀서·파형이 캔버스로 살아 움직입니다.
크림 에디토리얼 톤으로 서촌의 부티크 한옥 스테이를 영문 사이트에 담았습니다. 페이지를 열면 사진이 차가운 톤에서 따뜻한 톤으로 데워지고, 스크롤을 내릴수록 화면 전체의 색온도가 서서히 올라갑니다.
어둠 속에서 조명이 하나씩 켜지는 순간을 실시간 3D로 구현했습니다. 스크롤을 내리면 카메라가 제품 앞까지 다가가고, 제품은 360°로 돌려볼 수 있습니다.
'밤 10시 이후'라는 통금 세계관을 사이트 전체에 입혔습니다. 22시부터 06시 사이에 접속하면 사이트가 스스로 야간 모드로 바뀌고, 룩북에서는 커서가 손전등이 되어 어둠을 비춥니다.
다크 톤과 정제된 타이포로 '실사급 3D 설계'라는 프리미엄 신뢰를 시각화했습니다.
고양이의 시간이 먼저인 공간. 감성 사진과 부드러운 모션으로 '조용한 오후'를 첫 화면에 담았습니다.
밝고 활기찬 컬러와 인터랙션으로 '뛰어놀 준비 됐나요?'라는 에너지를 전면에 세웠습니다.
'조명 없이 24시간 돌아가는 무인 공장'이라는 컨셉을 다크 산업 톤과 라임 단일 액센트로 시각화했습니다. 스크롤에 반응하는 가로 슬라이드와 0에서 실적까지 올라가는 카운터로 규모감을 전달합니다.
업종과 목표를 들려주시면,
어떤 문법이 맞을지부터 무료로 봐드립니다.
* 버튼을 누르면 카카오톡 채널 상담으로 연결됩니다.