실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
왼쪽엔 연락 정보·소셜, 오른쪽엔 검증 들어간 문의 폼. 모바일에선 자연스럽게 한 줄로 쌓이는 2분할 Contact 섹션.
about·회사 페이지용 팀 멤버 카드 그리드. hover나 탭하면 카드가 살짝 떠오르고 소셜 아이콘이 아래에서 슬라이드업.
탭을 누르면 패널이 전환되고, 가만히 두면 진행 바와 함께 다음 탭으로 자동 진행.
기능을 카테고리로 묶어 플랜을 비교하는, sticky 헤더와 모바일 카드 전환 매트릭스.
자동 재생 + 드래그·스와이프 + 화살표·점 인디케이터를 갖춘 후기 캐러셀.
스크롤하면 지금 보는 섹션을 목차에 강조하고, 목차를 누르면 해당 섹션으로 스무스 스크롤하는 긴 문서용 패턴.
Apple/Linear 스타일의 비대칭 Bento 그리드. 12-col 위에 big·medium·small 6장을 배치해 핵심 기능 한 화면 요약.
뷰포트에 들어오면 수치가 카운트업되고 밴드가 떠오르는 통계 섹션
섹션이 viewport에 머무는 동안 가운데 라인이 0 → 100%로 차오르고, 좌우 카드가 시차로 reveal되는 zigzag 타임라인.
단일 sticky 컨테이너 위에서 Hero copy → Counting stats → AI tracks가 한 진행도(0~1) 위에서 매끄럽게 교차되는 풀스크린 인트로 시퀀스.
SaaS 랜딩의 정석 컴포넌트. 빌링 토글로 가격이 동적으로 변경되고, 인기 플랜은 그라디언트 보더와 배지로 강조됩니다.
버튼 한 줄로 항목을 열고 닫는 단일 열림 아코디언입니다. grid-template-rows로 높이를 애니메이션하고, 닫힌 패널에는 inert로 보조 기술 포커스를 줄입니다.
콘텐츠를 두 번 이어 붙이고 translateX(-50%) 키프레임으로 끊김 없는 가로 마퀴를 만드는 예시
PC에서는 sticky 뷰포트로 섹션을 겹쳐 두고 페이드로 바꾸고, M에서는 세로 나열 레이아웃으로 바꾼 인터랙션
