✦ 스튜디오 추천
Aurelle · 9:16
이 Skill로 렌더링한 결과
지금 재생 중 카드 v1.0.0
내 아트워크, 트랙 이름, 움직이는 진행 바가 담긴 Spotify 스타일 재생 카드. 세로형 영상 위에 바로 얹을 수 있습니다.
아직 평가 없음 0 다운로드
- 포맷
- 숏폼 · 9:16
- 길이
- 0:05
5초 길이의 9:16 오버레이를 위한 무료 HyperFrames 블록입니다. 큼직한 정사각형 아트워크, 트랙 제목, 아티스트 줄, 앞으로 흘러가는 진행 바가 담긴 반투명 음악 카드가 떠올랐다가 사라집니다. 트랙, 아티스트, 아트워크는 HTML에서 수정하며, 배경이 투명해 겹쳐 쓸 수 있습니다.
2026년 11월 3일 업데이트
받게 되는 것
- 배경이 투명한 5초 길이의 1080×1920 카드 오버레이
- 아트워크, 제목, 아티스트, 진행 바 애니메이션
- 내 영상 위에 얹는 방법 안내
잘 맞는 경우
- 캠페인 사운드트랙과 플레이리스트
- 팟캐스트, 음악 프로모션
- 스토리, 릴스
맞지 않는 경우
- 가로형 영상
- 긴 뮤직비디오
이 Skill에 대하여
이렇게 말하세요
/spotify-card Aurelle의 캠페인 트랙 "Wear the Light"로 지금 재생 중 카드를 만들어 줘. 아트워크는 팔찌 스택으로 하고, 우리 팔찌 장면 위에 얹어 줘.
음악 카드는 "이게 사운드트랙이에요"라고 단번에 알려 줍니다. 지금 재생 중 카드는 캠페인 트랙, 플레이리스트, 팟캐스트 에피소드를 내 아트워크와 함께 깔끔한 애니메이션 카드에 담아, 세로형 영상에서 사운드를 소개하거나 홍보할 수 있게 해 줍니다.
작동 방식
- 요청: 트랙 제목, 아티스트 줄, 아트워크, 그리고 카드를 얹을 장면을 에이전트에게 알려 줍니다.
- 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
- 렌더링:
npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다. - 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.
팁
- 가로 800px 이상의 정사각형 아트워크를 쓰세요.
- 제목은 크게 들어가니 몇 단어로 짧게 쓰세요.
- 카드 배경이 투명하므로 알파 채널로 렌더링해 내 영상이나 사진 위에 얹으세요. 두 가지 명령어는 SKILL.md에 있습니다.
- 샘플에서는 플랫폼 로고 대신 간단한 "Now playing" 라벨을 넣었습니다.
오픈소스
HyperFrames 레지스트리 블록입니다. HeyGen과 HyperFrames 기여자들이 만들어(heygen-com/hyperframes) Apache License 2.0으로 공개했습니다. 다운로드에는 에셋이 포함된 블록과 Reelity가 작성한 SKILL.md가 들어 있어 에이전트가 바로 채우고 렌더링할 수 있으며, HyperFrames 자체는 npm에서 실행됩니다.
시작 전에 필요한 것
- 준비물
- 트랙 또는 에피소드 제목, 아티스트 줄, 정사각형 아트워크, 카드를 얹을 장면.
- 의존성
- Node.js 22 이상 — 필수 · FFmpeg — 필수
- 외부 비용
- 없습니다. HyperFrames는 무료 오픈소스이며 내 컴퓨터에서 렌더링됩니다.
- 마지막 테스트
- v1.0.0 —
사용자 리뷰
아직 리뷰가 없습니다. Skill을 설치하고 첫 평가를 남겨 보세요.
자주 묻는 질문
색을 바꿀 수 있나요?
네. 카드와 텍스트 색은 HTML 안의 일반 CSS입니다.
Spotify 로고가 보이나요?
패키지에는 원래의 작은 로고가 그대로 있습니다. 샘플에서는 "Now playing" 라벨로 바꿨고, 에이전트도 똑같이 할 수 있습니다.
왜 무료인가요?
HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Aurelle로 만든 샘플을 함께 올렸습니다.
