무료
Halden Solace · 16:9
이 Skill로 렌더링한 결과
리퀴드 글래스 위젯 v1.0.0
흐르는 오로라 위에서 반투명 리퀴드 글래스 위젯의 숫자가 올라가고, 쇼케이스 패널이 진행 상황을 알리며, 상태 칩이 하나씩 켜집니다.
아직 평가 없음 0 다운로드
- 포맷
- 영상 · 16:9
- 길이
- 0:08
8초 분량의 리퀴드 글래스 대시보드를 위한 무료 HyperFrames 블록입니다. 반투명 위젯 세 개가 온도, 배터리 잔량, 걸음 수 링을 카운트업하고, 로고가 들어간 쇼케이스 패널이 제목과 문장, 완료되는 상태를 보여 주며, 상태 칩 세 개가 빛을 냅니다. 모두 움직이는 오로라 셰이더 위에서 펼쳐집니다. 텍스트, 숫자, 로고는 HTML에서 고칩니다.
2026년 11월 3일 업데이트
받게 되는 것
- 움직이는 오로라 배경의 8초 길이 1920×1080 MP4
- 카운트업 수치 위젯, 쇼케이스 패널, 상태 칩
- 패널 위의 내 로고
잘 맞는 경우
- 피트니스, 헬스, 스마트 기기 앱
- 대시보드와 데이터 기능
- 제품 출시 B롤
맞지 않는 경우
- 단색이나 브랜드 컬러 배경
- 수치 네 개 이상
이 Skill에 대하여
이렇게 말하세요
/liquid-glass-widgets Halden 러닝용 리퀴드 글래스 위젯을 만들어 줘. 온도, 워치 배터리, 8.2K 걸음, 패널 문구는 "Long run saved: 18.4 km at an easy pace in the Halden Solace", 마지막 상태는 "Run saved"로.
위젯은 중요한 정보를 한눈에 보는 방법입니다. 리퀴드 글래스 위젯은 반투명 리퀴드 글래스 스타일로 작은 대시보드를 만듭니다. 숫자가 올라가고 패널이 작업 완료를 알려 주니, 피트니스 앱이나 스마트 기기, 서비스가 데이터를 아름답게 보여 줄 수 있습니다.
작동 방식
- 요청: 위젯 세 개의 값, 패널 제목과 문장, 완료 상태, 로고를 에이전트에게 알려 줍니다.
- 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
- 렌더링:
npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다. - 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.
팁
- 러닝의 온도, 배터리, 걸음 수처럼 하나의 이야기를 하는 숫자 세 개를 고르세요.
- 패널 문장은 70자 안팎으로 쓰세요.
- 흰색 로고를 쓰세요.
- 변수가 없는 블록입니다. 에이전트가 SKILL.md에 따라 HTML 안의 텍스트와 숫자를 직접 고칩니다.
오픈소스
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 안에 있고, 카운트업 애니메이션은 어떤 숫자에도 작동합니다.
리퀴드 글래스 알림과 같은 스타일인가요?
네. 오로라와 글래스가 같아서 두 클립을 이어 붙이기 좋습니다.
왜 무료인가요?
HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Halden Solace로 만든 샘플을 함께 올렸습니다.
