Repolode
musoyangrigor

musoyangrigor/scroll-video-website-skill

동영상을 최적화된 WebP 프레임 시퀀스로 변환하고, 스크롤로 제어하는 캔버스 웹사이트를 만드는 Agent Skill입니다.

스타
57
포크
5
열린 이슈
0
마지막 커밋
2개월 전

어떤 프로젝트인가요?

Scroll Video Website는 동영상을 전체 화면 페이지로 바꿔, 위아래로 스크롤하면 동영상 프레임을 앞뒤로 넘겨 볼 수 있게 해 주는 이식성 높은 AI 에이전트 스킬입니다. 동영상 경로를 지정해 실행하면 에이전트가 동영상을 최적화된 WebP 프레임으로 변환하고, 반응형 스크롤 제어 페이지를 생성합니다.

생성된 페이지는 캔버스 렌더러, 인접 프레임 블렌딩, 점진적 프레임 로딩을 사용해 양방향 재생을 부드럽게 스크럽합니다. 기존 프로젝트의 스택을 유지하고 동작 줄이기 설정을 따릅니다. 기본 출력은 캔버스만 사용하는 미니멀한 화면이며, 동영상 경로 뒤에 스타일 등의 시각적 방향을 추가할 수 있습니다.

기존 프레임 시퀀스에 사용할 수 있는 대화형 optimize 명령도 포함되어 있습니다. 실제 에셋을 측정하고 샘플 프레임을 시험 인코딩한 뒤, 파일을 다시 쓰기 전에 형식, 프레임 수, 품질에 따른 예상 용량 변화를 알려 줍니다. SKILL.md 형식을 따르며 npx skills add로 설치할 수 있습니다.

핵심 기능

  • 01동영상을 최적화된 WebP 프레임 시퀀스로 변환합니다.
  • 02점진적 프레임 로딩으로 양방향 스크럽을 부드럽게 처리합니다.
  • 03인접 프레임 블렌딩을 적용한 반응형 전체 화면 캔버스를 렌더링합니다.
  • 04동작 줄이기 설정을 따르고 기존 프로젝트의 스택을 유지합니다.
  • 05파일별 용량 추정치를 제공하는 대화형 optimize 명령을 지원합니다.

활용 사례

  • 짧은 데모 동영상으로 구동되는 제품 랜딩 페이지를 만듭니다.
  • 영화나 모션 클립을 바탕으로 스크롤 기반 스토리텔링 페이지를 제작합니다.
  • 기존 프런트엔드 프로젝트에서 스크롤 스크럽 동영상 섹션을 프로토타이핑합니다.
  • 스크롤 사이트용으로 이미 생성한 프레임 시퀀스의 용량을 줄입니다.

빠른 시작

  1. 1

    스킬을 설치합니다

    npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website
  2. 2

    에이전트에서 동영상 경로를 지정해 스킬을 실행합니다

    $scroll-video-website ./media/product-film.mp4

사용 전 알아둘 점

  • README에는 동영상을 WebP 프레임으로 변환하는 데 필요한 도구나 종속성이 명시되어 있지 않습니다.
  • 실행하려면 Agent Skills 호환 에이전트가 필요하며, 독립 실행형 앱이 아닙니다.

토픽

자주 묻는 질문

scroll-video-website-skill은(는) 무엇인가요?
동영상을 최적화된 WebP 프레임 시퀀스로 변환하고, 스크롤로 제어하는 캔버스 웹사이트를 만드는 Agent Skill입니다. Scroll Video Website는 동영상을 전체 화면 페이지로 바꿔, 위아래로 스크롤하면 동영상 프레임을 앞뒤로 넘겨 볼 수 있게 해 주는 이식성 높은 AI 에이전트 스킬입니다. 동영상 경로를 지정해 실행하면 에이전트가 동영상을 최적화된 WebP 프레임으로 변환하고, 반응형 스크롤 제어 페이지를 생성합니다.
scroll-video-website-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
scroll-video-website-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
scroll-video-website-skill은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. scroll-video-website-skill의 마지막 커밋은 2026년 9월 4일입니다.
scroll-video-website-skill은(는) 어디에 사용할 수 있나요?
짧은 데모 동영상으로 구동되는 제품 랜딩 페이지를 만듭니다. 영화나 모션 클립을 바탕으로 스크롤 기반 스토리텔링 페이지를 제작합니다. 기존 프런트엔드 프로젝트에서 스크롤 스크럽 동영상 섹션을 프로토타이핑합니다. 스크롤 사이트용으로 이미 생성한 프레임 시퀀스의 용량을 줄입니다.
scroll-video-website-skill는 어떻게 설치하나요?
스킬을 설치합니다: npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website 에이전트에서 동영상 경로를 지정해 스킬을 실행합니다: $scroll-video-website ./media/product-film.mp4
scroll-video-website-skill은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/musoyangrigor/scroll-video-website-skill

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트