Scroll-film 개인 사이트
스크롤이 재생 헤드 역할을 하는 개인 또는 포트폴리오 사이트를 구축합니다. 비디오 파일이 아닙니다. 편안한 속도, 완전 반응형, 점진적 개선.
권한
- CSS sticky 씬과 scroll-driven 애니메이션을 우선 사용합니다. 타임라인 라이브러리는 CSS가 고정 또는 스크러빙을 할 수 없을 때만 사용합니다.
- 저장소의 아트 디렉션 또는 취향 스킬을 따릅니다. 그 취향과 맞지 않는 일반적인 프론트엔드 킷을 사용하지 마세요.
- 설치된 공식 scroll-timeline 스킬을 사용합니다.
- 아이디어만 목록화 (예/아니요): 블러-페이드, 글레어-호버, 스크롤 진행, 지연 포인터, 노이즈, 광선. CSS 또는 타임라인 라이브러리로 다시 구현합니다. 다른 프레임워크의 모션 기본 요소를 붙여넣지 마세요.
prefers-reduced-motion: reduce를 존중합니다 — 스틸 이미지, 동일한 콘텐츠 순서, 모션에 의존하는 콜 투 액션 없음.
카메라 사다리 (지탱하는 첫 번째 단계에서 멈춤)
- 중복 씬을 삭제합니다.
- CSS: sticky 씬,
animation-timeline: view()/scroll(), transform과 opacity만 사용합니다. - CSS가 한 씬을 고정 또는 스크러빙할 수 없는 경우에만 스크롤 트리거 라이브러리를 사용합니다. 부드러운 스크러빙, 선형 이즈, 언마운트 시 정리. transform과 opacity만 애니메이션합니다.
- 타사 smooth-scroll 하이재킹, 캔버스 프레임 시퀀스, 3D 히어로, 또는
<video>currentTime 스크러빙을 추가하지 마세요.
씬 문법
- 최대 4–6개 씬. 인접한 컷은 동일한 레이아웃 패밀리를 공유하지 않아야 합니다.
- 열기, 유지(pin + scrub), 컷, 닫기.
- 핀 패턴: 긴 스크롤러 + sticky 전체 뷰포트 스틸.
- 전체 페이지 필수 scroll snap 없음.
- JavaScript가 꺼져 있어도 콘텐츠를 읽을 수 있어야 합니다. 스크롤 하이재킹 금지. mousemove 또는 scroll에서 틱당 프레임워크 상태 금지.
개인 사이트 콘텐츠 (브리프에 따라 조정)
일반적인 비트: 정체성, 내가 만드는 것, 현재 제품, 링크(그들이 제공한 실제 프로필), 마무리 콜 투 액션. 링크는 실제 URL만 가능 — 프로필을 절대 지어내지 마세요. 누락된 경우 실제 것을 요청하세요.
커서
스프링 지연 또는 글레어 효과가 있는 사용자 정의 커서는 점진적 개선으로 허용됩니다. 기본 커서는 reduced-motion 및 터치에서 사용 가능하게 유지하세요. 프레임워크 상태를 모든 이동마다 업데이트하지 말고 animation-frame 스로틀링을 적용한 포인터 리스너를 선호합니다.
스택 기본값
- 최신 웹 프레임워크를 사용해도 좋습니다.
- 소유자의 호스팅 계정에 배포하며, 다른 팀의 계정이 아닙니다.
- 코딩은 로컬 코딩 기본값을 따릅니다: 구현 후 두 번째 리뷰를 거치고 점검 루틴을 실행합니다.
완료 조건
- 소유자 계정 아래의 라이브 URL
- 스크롤이 영화처럼 느껴짐 (편안하고, 빠르지 않음)
- 반응형; reduced-motion 스틸 이미지
- 실제 링크만 사용
- 라이브 상태가 되면 URL 보고