스크롤 비디오 웹사이트

사용 시기

이 스킬은 사용자가 다음과 같은 작업을 원할 때 사용합니다.

Apple 스타일의 스크롤 애니메이션을 동영상으로 구축;
스크롤 제어 또는 스크롤 스크러빙 비디오 웹사이트 생성;
제품 동영상을 시네마틱 랜딩 페이지로 변환;
동영상 기반 스크롤텔링 경험 구축;
동영상을 스크롤 애니메이션용 최적화된 이미지 시퀀스로 변환;
스크롤로 제어되는 캔버스 기반 제품 공개 페이지 생성;
기존 생성된 스크롤 비디오 프레임 시퀀스 최적화.

일반적인 자동 재생 비디오 배경이나 관련 없는 스크롤 효과에는 사용하지 마십시오.

제품 애니메이션 뷰어와 같은 최소한의 전체 페이지 경험을 만듭니다. 페이지 자체가 스크롤 거리를 제공하고, 고정된 캔버스가 뷰포트를 채우며 사용자의 동영상에서 파생된 프레임 시퀀스를 스크러빙합니다. 애니메이션이 인터페이스이며, 기존 랜딩 페이지 뒤의 배경이 아닙니다.

호출

이 스킬에는 두 가지 모드가 있습니다. 동영상에서 스크롤 비디오 웹사이트를 빌드하거나, 기존 프레임 시퀀스를 최적화합니다. 첫 번째 인수가 optimize이면 references/optimize.md를 따르고 아래 빌드 워크플로를 실행하지 마십시오.

다음 간결한 형식을 완전한 빌드 요청으로 취급합니다.

$scroll-video-website <path/to/video.mp4>

비디오 경로는 스킬 이름 뒤의 첫 번째 인수여야 합니다. 경로 뒤의 모든 내용은 스타일, 레이아웃, 텍스트 또는 동작에 대한 선택적 사용자 지시입니다.

$scroll-video-website ./media/product-reveal.mp4
$scroll-video-website ./media/product-reveal.mp4 검은 배경과 간결한 타이포그래피 사용

첫 번째 예시는 프레임 시퀀스를 파생하고 아래 설명된 전체 기본 스크롤 애니메이션 웹사이트를 빌드함을 의미합니다. 두 번째 예시에서는 추가된 시각적 지시를 따르면서 동일한 동영상 기반 애니메이션 아키텍처를 유지합니다. 이 스킬을 사용하는 에이전트가 프롬프트의 나머지 부분을 해석하고 구현하도록 합니다. 이 스킬은 스타일 옵션에 대한 별도의 명령어 문법을 정의하지 않습니다.

비디오 경로는 절대 경로가 아닌 한 현재 작업 디렉토리를 기준으로 해석합니다. 경로에 공백이 포함된 경우 사용자가 따옴표로 묶어야 합니다. 정확한 경로를 먼저 확인하십시오. 파일 이름만 있는 경우 해당 파일이 없으면 종속성, 빌드, 캐시 및 VCS 디렉토리를 제외하고 현재 프로젝트에서 정확한 파일 이름 일치를 검색합니다. 정확히 하나의 일치 항목이 있으면 자동으로 계속 진행합니다. 일치 항목이 없거나 여러 개인 경우 사용자에게 정확한 경로를 요청하십시오. <path/to/video.mp4> 또는 {video_path}의 중괄호는 플레이스홀더를 나타내며 실제 경로의 일부가 아닙니다. use 키워드를 요구하거나 해석하지 마십시오.

기존 시퀀스를 최적화하려면 정확히 다음과 같이 실행합니다.

$scroll-video-website optimize

optimize 명령은 경로나 다른 인수를 사용하지 않습니다. 현재 프로젝트에서 생성된 프레임 시퀀스를 검사합니다. 정확히 하나의 시퀀스를 식별할 수 있으면 계속 진행합니다. 여러 개를 식별할 수 있으면 목록을 보여주고 사용자에게 최적화할 시퀀스를 묻습니다. 시퀀스를 찾을 수 없거나 확실하게 인식할 수 없으면 프레임 폴더를 찾을 수 없다고 사용자에게 알리고 중지합니다.

프로젝트 및 소스 비디오 설정

편집하기 전에:

프로젝트 구조, 스크립트, 프레임워크, 스타일링, 라우팅, 에셋 규칙 및 로컬 지침을 검사합니다.
위의 호출 규칙을 사용하여 사용자가 제공한 비디오를 찾습니다. 비디오나 경로가 제공되지 않았고 확실하게 식별할 수 없으면 구현하기 전에 요청합니다.
기존 작업 스택을 재사용합니다. 이미 작동하는 프로젝트가 있으면 교체 프로젝트를 구성하지 마십시오.
ffprobe를 사용할 수 있는 경우 비디오의 크기, 길이, 프레임 속도, 프레임 수 및 파일 크기를 검사합니다.
관련 없는 동작은 유지하고 필요한 최소한의 변경 집합을 만듭니다.

대체 아트워크를 만들거나 제공된 푸티지를 교체하지 마십시오. 빌드에 필요한 경우가 아니면 소스 비디오를 복제하지 마십시오.

비디오를 프레임 시퀀스로 변환

기본 렌더링 경로는 video.currentTime이 아닌 번호가 매겨진 WebP 프레임 시퀀스입니다. 프로젝트의 public/static 에셋 영역에 frames/frame_0001.webp와 같이 0으로 채워진 이름으로 프레임을 추출합니다.

최대 30fps로 소스 프레임율을 유지합니다. 긴 클립의 경우 총 240~300프레임 정도로 샘플링하여 페이로드가 실용적이도록 유지합니다.
소스 종횡비를 유지합니다. 78~82 정도의 적절한 WebP 품질을 사용하고 설정이 적절하다고 가정하지 말고 결과를 검사합니다.
구현에서 실제 추출된 프레임 수를 기록합니다. 추측 상수를 남기지 마십시오.
ffmpeg를 사용하여 추출하는 것을 선호합니다. 대표적인 명령어는 ffmpeg -i input.mp4 -vf fps=30 -c:v libwebp -quality 80 frames/frame_%04d.webp입니다. 입력, fps, 출력 경로 및 기존 프로젝트 도구에 맞게 조정하십시오.
관련 없는 에셋을 삭제하거나 덮어쓰지 마십시오. 대상에 이미 시퀀스가 있는 경우 교체하기 전에 이 애니메이션에 속하는지 확인합니다.

프레임 추출을 사용할 수 없거나 결과 프레임 페이로드가 명백히 부적합한 경우에만 직접 일시 중지된 비디오 탐색을 사용합니다. 대체하는 경우 트레이드오프를 설명하고 동일한 고정 단계, 양방향, 부드러운 스크롤 동작을 유지합니다.

참조 경험과 일치

사용자가 추가 레이아웃 또는 텍스트 방향을 제공하지 않은 경우 캔버스 전용 페이지를 생성합니다.

흰색 페이지와 100vw x 100vh를 덮는 고정되고 오버플로우가 숨겨진 스테이지;
약 8초 또는 약 240프레임 소스에 대해 약 400vh의 의도적인 스크러빙을 위한 충분한 보이지 않는 문서 높이;
내비게이션 바, 카드, 제목, 클릭 유도 문구, 그라데이션 또는 가상의 마케팅 카피 없음;
스테이지를 채우고 각 프레임을 두 축에서 cover 기하학으로 가운데에 그리는 캔버스;
빈 프레임 깜박임을 방지하기 위해 첫 번째 프레임이 준비된 후에만 짧은 불투명도 표시;
흰색 배경, 약간의 대비 조정, 또는 흰색 배경 제품 렌더링의 경우 mix-blend-mode: multiply와 같이 푸티지에 적합한 경우에만 절제된 이미지 처리.

사용자가 콘텐츠를 요청하는 경우 캔버스의 시각적 지배력을 줄이지 않으면서 의도적인 애니메이션 순간 사이 또는 위에 콘텐츠를 배치하고 적게 유지합니다. 기본 캔버스와 브라우저 API로 충분할 때 애니메이션 종속성을 도입하지 마십시오.

캔버스 스크러빙 구현

aria-hidden 캔버스를 포함하는 고정 또는 스티키 스테이지를 사용합니다. 백킹 버퍼의 크기를 약 2로 제한된 장치 픽셀 비율로 조정하면서 CSS 픽셀로 그리기 측정값을 유지합니다. 리사이즈 시 새로운 DPR 스케일을 적용하기 전에 캔버스 변환을 재설정하여 스케일이 누적되지 않도록 합니다.

클램핑된 총 페이지 진행률을 전체 시퀀스에 매핑합니다.

const range = document.documentElement.scrollHeight - innerHeight
const progress = range > 0 ? Math.min(1, Math.max(0, scrollY / range)) : 0
targetFrame = progress * (frameCount - 1)

앞으로 스크롤하면 애니메이션이 진행되고 뒤로 스크롤하면 되감겨야 합니다. 스크롤 및 리사이즈 핸들러는 저렴한 측정값 또는 대상만 업데이트해야 합니다. 단일 requestAnimationFrame 루프를 실행하고 프레임 속도 독립적인 지수 보간으로 부동 소수점 재생 헤드를 부드럽게 처리합니다.

const dt = Math.min((now - lastTime) / 1000, 0.1)
const alpha = 1 - Math.exp(-dt * 9)
currentFrame += (targetFrame - currentFrame) * alpha

재생 헤드의 각 측면에 있는 정수 프레임을 그리고 소수점 나머지에 의해 다음 프레임을 교차 페이드합니다. 먼저 캔버스 배경을 지우거나 칠하고, 그린 후 globalAlpha를 재설정하고, 리사이즈 시 다시 그립니다.

프레임 프로그레시브 로딩

전체 시퀀스에서 첫 페인트를 차단하지 마십시오.

먼저 프레임 1을 로드하여 그리고 캔버스를 표시합니다.
타임라인에 걸쳐 균등하게 분산된 프레임(예: 8프레임마다)을 대기열에 추가하여 조기 탐색을 위한 가까운 대체 프레임을 확보합니다.
나머지 모든 프레임을 대기열에 추가합니다.

요청된 프레임과 로드된 프레임을 별도로 추적하여 우선 순위 패스와 나머지 패스가 동일한 이미지를 두 번 요청하지 않도록 합니다. 요청된 프레임이 아직 로드 중인 경우 가장 가까운 로드된 프레임을 그립니다. 이미지 로드 실패를 처리하여 시퀀스의 나머지 부분을 중단시키지 않습니다.

프로젝트의 기본 경로 및 배포 대상과 함께 작동하는 에셋 URL 전략을 사용합니다. 소유 컴포넌트가 마운트 해제될 때 스크롤, 리사이즈, 미디어 쿼리 리스너, 옵저버 및 애니메이션 프레임을 정리합니다.

반응형 동작 및 접근성

좁은 화면에서 cover 렌더링을 유지하고 의도적인 크롭을 수용합니다. 이미지를 왜곡하지 마십시오. 데스크톱 및 모바일 크기에서 중요한 피사체 배치를 확인합니다. 표시되는 콘텐츠가 있는 경우 모바일 뷰포트 변경 및 안전 영역을 고려합니다.

prefers-reduced-motion: reduce의 경우 스크러빙을 중지하고 첫 번째 적절한 프레임을 유지합니다. 모든 페이지 콘텐츠에 접근 가능하도록 유지하고 스크롤을 가로채지 마십시오. 장식용 캔버스는 중복된 스크린 리더 콘텐츠를 생성하지 않아야 합니다.

결과 확인

프로젝트의 검사를 실행하고 가능한 경우 브라우저에서 결과를 검사합니다. 다음을 확인합니다.

첫 번째 및 마지막 스크롤 위치가 첫 번째 및 마지막 추출 프레임에 도달하는지;
앞뒤 스크롤이 갑작스러운 점프, 재생, 깜박임 또는 보이는 빈 캔버스 없이 연속적으로 느껴지는지;
프레임 요청이 중복되지 않고 누락되거나 느린 프레임이 근처에 로드된 대체 프레임을 사용하는지;
cover 크롭, DPR 리사이즈 및 캔버스 스케일링이 데스크톱 및 모바일 크기에서 작동하는지;
reduced motion이 정적 프레임을 유지하고 컴포넌트 정리가 완료되는지;
생성된 시퀀스에 예상된 수, 크기, 순서 및 허용 가능한 총 크기가 있는지;
관련 없는 프로젝트 동작이 여전히 작동하는지.

경험, 추출된 프레임 수 및 페이로드, 실행된 검사 및 남은 소스 미디어 제한 사항을 요약하여 마칩니다.

스크롤 영상 사이트