실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
행을 손가락으로 밀어 숨은 액션을 꺼내고, 끝까지 밀면 바로 삭제. 드래그 중 리렌더 없이 ref로 직접 움직이는 Pointer Events 스와이프 리스트입니다.
ECMAScript 2025 Set 메서드 시각화 + 미지원 환경 폴백
보내면 즉시 표시(전송 중) 후 저장 완료 시 확정 - form action과 결합
document.startViewTransition + view-transition-name으로 SPA 라우터 없이 모핑
실수 클릭으로 삭제되는 사고를 막는 press-and-hold 버튼. 누르고 있으면 링이 차오르고, 끝까지 채워야 실행됩니다.
스크롤 진행에 맞춰 문장이 단어 단위로 흐림→선명하게 차오르는 modern 랜딩 텍스트 연출.
스위치를 누르면 해가 달로 바뀌고, 하늘이 낮에서 밤으로 전환되며 구름이 별로 교차하는 애니메이션 토글입니다.
좋아요 버튼에 마우스를 올리거나 탭하면 👍❤️😆😮😢😡 반응이 떠오르고, 하나를 고르면 버튼이 그 반응으로 바뀌는 SNS식 리액션입니다.
앞면과 뒷면을 겹쳐두고 입체로 뒤집어 정보를 전환하는 카드.
복권처럼 표면을 긁으면 상품이 드러나고, 일정 비율을 넘으면 자동 공개.
이미지 위 커서/터치 지점을 확대 렌즈로 크게 보여주는 hover 줌.
여러 문구를 한 글자씩 입력하고, 멈췄다 지우고 다음 문구로 넘어가는 타이핑 효과.
남은 시간이 줄면 바뀐 자릿수만 위에서 아래로 접히는 클래식 플립 클럭.
포인터·터치에 레이어마다 다른 비율로 움직여 깊이를 만드는 패럴랙스 장면.
포인터를 따라 빛의 잔상이 따라오는 canvas 트레일 — 파티클/스네이크 두 방식.
