진료과가 다르면,보여줄 원장님도 다릅니다.

이 홈페이지의 움직임

1. 01빛이 번지는 인트로

   어두운 화면 가운데의 작은 빛이 퍼지며 페이지가 밝아지고, 거대한 "Skin, as it is."가 마스크 위로 한 줄씩 올라옵니다. 병원 이름(LUMEN, 빛)을 첫 3초에 몸으로 느끼게 합니다.

2. 02커서를 따르는 스포트라이트

   히어로와 예약 섹션 인물 사진 위로 부드러운 빛이 커서를 따라 움직여 피부가 빛을 받는 순간을 보여 줍니다. 모바일에서는 빛이 저절로 천천히 떠다닙니다.

3. 03커튼 리빌

   사진이 아래에서 위로 걷히며 나타나고, 안쪽 이미지는 살짝 줄어들며 자리를 잡습니다. 과하지 않게 '드러내는' 진료 철학과 맞췄습니다.

4. 04고정 가로 스크롤 진료 갤러리

   스크롤하면 화면이 멈추고 여섯 진료 분야가 옆으로 흘러갑니다. 카드 번호·영문 이탤릭 제목·진행 바로 잡지를 넘기는 리듬을 만듭니다.

5. 05배경색 전환

   원장님·공간 섹션에 들어서면 오프화이트가 짙은 웜블랙으로 천천히 바뀌었다가 다시 밝아집니다. 조명을 낮춘 시술실에 들어서는 느낌입니다.

6. 06빛이 닿는 문장·필름 그레인·부드러운 스크롤

   철학 문장이 스크롤에 따라 한 단어씩 밝아지고, 은은한 필름 그레인과 Lenis 관성 스크롤로 인쇄물 같은 질감을 더했습니다.

이 홈페이지의 움직임

1. 01금선 프리로더

   얇은 금빛 선이 그어지고 ÉLAN 글자가 선 위로 떠오르며 악센트 획이 그려져 로고가 완성, 000→100 카운터 뒤 커튼이 위로 걷힘(첫 3초의 인상)

2. 02글자 단위 블러 등장

   히어로 세리프 문장이 한 글자씩 흐릿함에서 선명하게 나타나고, 인물 사진은 느린 줌과 스크롤 패럴랙스, 사진 위로 황금비 분할선이 그려짐

3. 03균형의 선 도해

   옆얼굴 사진 위에 세 구간 기준선·E-line·코이마각·1:φ 비율선이 스크롤에 맞춰 차례로 그려지고 수치 라벨이 떠오름(PC는 화면 고정, 설명 단계가 함께 전환)

4. 04호버 이미지 리빌

   큰 세리프 진료 목록에 마우스를 올리면 해당 사진이 커서를 따라 기울며 떠오름, 모바일은 탭하면 목록 아래 사진·설명이 전환

5. 05커스텀 커서·마그네틱 버튼

   점+원 커서가 링크에서 커지고 사진 위에서 'View'로 바뀌며, 예약 버튼이 커서에 끌려오듯 반응

6. 06세리프 마퀴·부드러운 스크롤

   채움/외곽선 세리프 문구가 느리게 흐르고 Lenis로 스크롤 전체가 묵직하게 미끄러짐, 철학 문장은 스크롤에 따라 단어별로 밝아짐

이 홈페이지의 움직임

1. 01숨쉬는 블롭 히어로

   배경의 유기적 도형과 사진 테두리가 천천히 모양을 바꾸며 숨쉬고, 마우스 쪽으로 살짝 부풀어 '부드럽고 무섭지 않은' 첫인상을 줍니다

2. 02통통 튀는 제목

   헤드라인 글자가 하나씩 튀어 오르며 자리 잡고, 마우스를 올리면 젤리처럼 다시 튑니다

3. 03쌓이는 진료 카드

   스크롤하면 파스텔 카드가 한 장씩 위로 포개지며 다섯 진료 과목을 차례로 소개합니다

4. 04그려지는 첫 방문 길

   '처음 오시는 날' 점선이 스크롤에 맞춰 이어지고 단계 아이콘이 차례로 튀어나와, 무엇을 할지 미리 보여 주는 원장의 방식을 그대로 옮겼습니다

5. 05카운트업 숫자와 회전 배지

   진료 경력·어린이 진료 횟수가 올라가고, 'SMILE · SODAM DENTAL' 원형 배지가 스크롤에 따라 돕니다

6. 06무한 키워드 띠·기울어지는 사진·젤리 버튼

   스크롤 속도에 반응하는 진료 키워드 띠, 마우스에 따라 살짝 기우는 사진 카드(터치에서는 스크롤로 대체), 누르면 말랑하게 출렁이는 버튼, Lenis 부드러운 스크롤

이 홈페이지의 움직임

1. 01히어로 '움직임의 회복'

   코발트 인트로 뒤 큰 문장이 줄 단위로 솟아오르고 '바로 서도록' 아래로 오렌지 밑줄이 그려지며, 달리는 인물 사진에는 패럴랙스와 속도선이 흘러 회복된 일상의 속도감을 전합니다.

2. 02인터랙티브 인체 부위 선택기

   직접 그린 인체 실루엣 위 어깨·척추·손목·무릎·발목 점이 맥박처럼 깜빡이고, 누르면 스캔 라인이 그 부위로 이동하며 증상·질환·우선 치료 패널이 바뀝니다. 환자가 "내 이야기"를 바로 찾게 합니다.

3. 03고정 스크롤 진료 과정

   섹션이 화면에 고정된 채 스크롤에 따라 진행 바가 차고 진단→비수술 치료→재활→복귀가 사진과 함께 한 단계씩 넘어갑니다. 한 원장이 이어 보는 '하나의 흐름'을 그대로 체험시킵니다.

4. 04카운트업 지표와 상단 진행 바

   경력·진료 부위·치료실·단계 수가 0부터 올라가고, 화면 맨 위 오렌지 바가 읽은 만큼 채워져 데이터 중심의 인상을 더합니다.

5. 05스크롤 속도 반응 기울기 + 재활센터 가로 갤러리

   사진이 스크롤 속도에 따라 살짝 기울었다 돌아오고, 재활센터는 세로 스크롤을 가로 이동으로 바꿔 공간을 걸어 보듯 둘러보게 합니다.

6. 06Lenis 부드러운 스크롤

   모든 움직임이 끊김 없이 이어져 '부드럽게 회복되는 움직임'이라는 콘셉트를 마무리합니다.

이 홈페이지의 움직임

1. 01호흡하는 물결

   히어로의 여러 겹 물결 선이 4초 들숨·4초 날숨 리듬으로 부풀고 가라앉으며, 마우스(모바일은 터치)가 닿으면 물결이 살며시 비켜 갑니다. 옆의 '숨을 고르세요' 인디케이터가 같은 박자로 숨쉬어 불안한 방문자의 호흡을 먼저 늦춥니다.

2. 02숨 한 번 인트로

   숲색 화면에서 세이지 구슬이 한 번 들이쉬고, 원형으로 열리며 첫 문장이 단어 단위로 천천히 떠오릅니다.

3. 03고정 사진 클리닉

   갑상선·유방·하지정맥 사진이 왼쪽에 고정된 채 크로스페이드로 바뀌고, 오른쪽 설명이 스크롤되면 scroll-spy로 현재 클리닉만 또렷해집니다. 세 클리닉을 하나의 원칙으로 묶어 보여 줍니다.

4. 04검사 당일 타임라인

   스크롤에 맞춰 물결 모양 선이 그려지고 09:30 접수 → 09:45 원장 직접 초음파 → 10:05 결과 설명 → 10:20 귀가가 차례로 켜집니다. '당일 진단'을 말이 아닌 시간표로 증명합니다.

5. 05색온도 스크롤 전환

   섹션마다 배경이 리넨 → 연세이지 → 세이지 → 숲색으로 부드럽게 바뀌어, 읽는 동안 마음이 가라앉는 흐름을 만듭니다.

6. 06아치 마스크 등장·부드러운 아코디언

   사진이 아치 모양으로 아래에서 열리고, 제목의 핵심 단어에는 물결 밑줄이 그려지며, FAQ는 천천히 열리고 닫힙니다. 전체는 Lenis 부드러운 스크롤과 느린 easing으로 통일했습니다.

이 홈페이지의 움직임

1. 01먹이 번지는 인트로

   한지 위에 먹물 한 방울이 번지며 그 안에서 히어로 사진이 피어나고, 세로쓰기 '淡然'과 문장이 붓이 지나가듯 써지며 낙관이 찍힘. 이름의 뜻 '담백하고 고요하게'를 첫 3초에 체험하게 함

2. 02스크롤 먹 번짐 사진

   맥진·탕약·원장님·치료실 사진이 화면에 들어올 때마다 같은 먹 번짐 마스크로 드러남(SVG 노이즈 왜곡, 끝나면 일반 이미지로 교체해 가볍게)

3. 03산 능선 패럴랙스

   안개 낀 산 사진을 먼 산·중간 능선·앞 소나무 세 겹으로 나눠 다른 속도로 움직이고 그 위에 철학 문장이 차례로 떠오름. '천천히 균형을 찾는다'는 진료 철학을 풍경으로 보여 줌

4. 04섹션을 잇는 붓 선

   스크롤을 따라 굵기가 변하는 먹선이 여백을 타고 그려지며 모든 섹션을 한 획으로 연결. 진료 과정이 끊기지 않고 이어진다는 인상

5. 05먹이 차오르는 진료 과목 카드

   氣·痛·女·體·補 큰 한자 카드에 마우스를 올리거나 누르면 아래에서 먹이 번지듯 차올라 설명으로 바뀜(모바일은 화면 가운데 온 카드가 자동으로 차오름)

6. 06한지 결과 부드러운 스크롤

   은은한 종이 질감과 Lenis 관성 스크롤, 마지막 예약 영역에는 스크롤에 맞춰 원(엔소)이 그려짐

이 홈페이지의 움직임

1. 01바벨 로딩 인트로

   원판이 한 장씩 '쿵' 끼워질 때마다 화면이 흔들리고 진행 바와 무게(KG)가 차오른 뒤, FORGE 대문자가 떨어져 안착하며 히어로가 열립니다. 첫 3초에 '단련'의 무게감을 몸으로 느끼게 합니다.

2. 02키네틱 타이포 + 반응형 마퀴

   거대한 영문 타이포가 스크롤 속도만큼 기울고 늘어나며, REP · SET · REST · REPEAT 띠는 스크롤 방향과 속도에 맞춰 흐름이 바뀝니다. 반복의 리듬을 화면 전체로 전합니다.

3. 03운동 목표 선택기

   감량·근력·체형·재활·바디프로필을 누르면 주 몇 회, 12주 주차별 구성 막대그래프(근력·컨디셔닝·가동성), 기록 항목이 애니메이션으로 바뀝니다. 방문자가 "내 경우"를 바로 찾게 합니다.

4. 0412주 기록지(고정 스크롤)

   화면이 고정된 채 스크롤에 따라 1~12주가 넘어가며 무게 숫자가 올라가고 라인 차트가 그려지고, 코치 메모와 '대표 코치 리뷰' 도장이 바뀝니다(가상 예시 표기). '기록하는 PT'를 그대로 체험시킵니다.

5. 05라임 스포트라이트 + 셔터 reveal

   어두운 사진 위 라임빛 조명이 커서를 따라가고(모바일은 스스로 이동), 사진은 등장할 때 수평 슬릿이 셔터처럼 열립니다.

6. 06Lenis 부드러운 스크롤·마그네틱 버튼·상단 진행 바·SET 카운터

   지금 몇 번째 세트(섹션)인지 기록지처럼 알려 주며 끝까지 리듬을 유지합니다.

이 홈페이지의 움직임

1. 01숨 한 번 인트로

   화면 가운데 테라코타 원이 들숨·날숨 4초 리듬으로 부풀었다 줄며 '숨' 한 글자가 떠오르고, 원 안에 사진이 차오른 뒤 그대로 아치 창 모양으로 열리며 히어로 사진이 됩니다. 방문자의 호흡부터 늦추는 첫인상입니다.

2. 02척추 라인 모핑

   체형 평가 섹션이 화면에 고정된 채, 마디 점이 있는 굽은 척추 선과 기울어진 어깨·골반 선이 스크롤에 따라 기준선 위로 곧게 정렬되고, 옆의 평가 항목 6개가 차례로 체크됩니다. 원장님의 '첫 수업 전 평가'를 한 장면으로 보여 줍니다.

3. 03창문 햇살과 잎 그림자

   화면 전체에 반투명 잎 그림자가 바람에 흔들리듯 움직이고, 스크롤 위치에 따라 빛이 아침의 연노랑에서 오후의 호박색으로 바뀝니다. 오른쪽 아래의 작은 해시계가 지금 '몇 시의 빛'인지 알려 줍니다.

4. 04리포머 캐리지 슬라이더

   리포머를 단순화한 일러스트의 캐리지가 스크롤이나 드래그에 따라 레일 위를 오가며 스프링이 늘어나고, 멈추는 자리마다 1:1·2:1·3인·체형 교정·산전·산후 수업 설명과 사진이 바뀝니다.

5. 05아치 마스크·숨 쉬는 문장

   사진은 작은 아치에서 커지며 열리고, 세리프 제목은 단어마다 흐림에서 또렷하게 숨 쉬듯 떠오릅니다. 철학 문장은 스크롤을 따라 한 단어씩 밝아집니다.

6. 06Lenis 부드러운 스크롤·종이 질감

   호흡 리듬의 느린 easing과 은은한 종이 질감으로 전체를 하나의 고요한 템포로 묶었습니다.

이 홈페이지의 움직임

1. 013·2·1 GO! 인트로

   수업 타이머처럼 큰 이탤릭 숫자가 코발트·레드 배경 스윕과 함께 카운트다운되고, "GO!"와 함께 두 줄 사선 띠가 화면을 가르며 히어로가 열립니다. 첫 3초에 '이제 같이 시작한다'는 수업의 긴장감을 줍니다.

2. 02스크롤 심박 라인(ECG)

   화면을 가로지르는 심박 선이 스크롤 속도만큼 빨라지고 BPM 숫자(헤더·히어로·구분선)가 72에서 170대까지 오르내립니다. 사이트를 내리는 행동 자체가 '같이 움직이는 리듬'이 됩니다.

3. 03인터랙티브 주간 시간표

   컨디셔닝·스트렝스·로잉·엔진·모빌리티·입문 필터를 누르면 해당 수업 칩만 튀어 오르고 나머지는 흐려지며, 칩에 올리면(모바일은 탭) 강도·정원·담당 코치 두 명이 툴팁으로 보입니다. 모바일은 요일 탭으로 바뀝니다.

4. 04사선 키네틱 띠

   기울어진 코발트·레드 띠 두 줄이 서로 반대로 흐르고, 스크롤 방향을 바꾸면 흐름도 뒤집히며 속도에 맞춰 빨라집니다. "12 PEOPLE · 2 COACHES"를 리듬으로 각인시킵니다.

5. 05난이도 3단계 토글

   스쿼트·푸시업·런지마다 쉬움·보통·어려움을 누르면 SVG 피규어가 튕기듯 자세를 바꾸고(박스·기둥 소품 등장) 반복 동작을 보여 주며, 설명·코치 큐·강도 막대가 함께 전환됩니다. "각자의 난이도로 같이"를 직접 체험시킵니다.

6. 06스티커 팝 · 스코어보드 카운트업 · Lenis

   사진과 태그는 알약·스탬프 모양으로 back 이징을 타고 튀어나오고, 12 : 02 스코어보드 숫자가 경기장 전광판처럼 올라가며, 부드러운 스크롤로 전체 리듬을 이어 갑니다.

이 홈페이지의 움직임

1. 01정제된 선 인트로

   화면 가운데 얇은 크롬 선이 그어지고, 그 선을 축으로 POISE 글자가 위아래로 갈라져 나타난 뒤 선이 화면 끝까지 늘어나며 위아래 판이 열려 표지가 공개됩니다. 정확하고 차가운 첫인상으로 '선'을 먼저 보여 줍니다.

2. 02리퀴드 크롬

   표지 배경에 WebGL로 그린 은빛 액체 금속 덩어리가 천천히 흐르며 서로 녹아 붙고, 마우스를 따라 작은 방울이 합쳐집니다(모바일은 스스로 움직임). 크롬 리포머와 거울의 질감을 화면 전체의 분위기로 옮겼습니다.

3. 03포즈 시퀀스

   화면이 고정된 채 선 하나로 그린 인체가 스크롤에 따라 티저→스완→사이드 킥→아라베스크로 모핑되고, 동작마다 V 75°·흉추 30° 같은 각도 호와 정렬 가이드선, 라인 포인트 3가지가 바뀝니다. 원장님의 '라인 메소드'를 한 장면으로 설명합니다.

4. 04룩북 가로 갤러리

   다섯 수업을 LOOK 01~05 패션 룩북처럼 가로로 넘기고, 사진 옆에 정원·시간·레벨·수강료(상담 후 안내) 크레딧을 붙였습니다. PC는 스크롤·드래그, 모바일은 스와이프로 넘깁니다.

5. 05얼음 굴절 사진

   사진은 세로 슬라이스로 어긋나 있다가 정렬되며 맞춰지고, 마우스를 올리면 얼음을 통과한 듯 미세하게 굴절(SVG feDisplacementMap)되며 크롬 테두리에 빛이 흐릅니다.

6. 06매거진 내비게이션

   Lenis 부드러운 스크롤, 상단의 얇은 크롬 진행선, 오른쪽의 'ISSUE 07 / LINE · P.0X' 페이지 표기가 지금 읽는 페이지를 알려 줍니다.