무료
Solenne · 16:9
이 Skill로 렌더링한 결과
리퀴드 글래스 알림 v1.0.0
흐르는 오로라 배경 위로 반투명 리퀴드 글래스 알림 카드가 떠오릅니다. 하나는 실시간 진행 상황을, 하나는 답장을 보여 줍니다.
아직 평가 없음 0 다운로드
- 포맷
- 영상 · 16:9
- 길이
- 0:08
8초 분량의 리퀴드 글래스 UI를 위한 무료 HyperFrames 블록입니다. 움직이는 오로라 셰이더 위로 반투명 알림 카드 두 장이 떠 들어옵니다. 하나는 진행 중이던 작업이 완료되는 모습을, 다른 하나는 입력 중 점과 Reply·Mark Read 칩이 달린 메시지를 보여 주고, 구석에는 내 로고가 들어갑니다. 텍스트, 상태 메시지, 로고는 HTML에서 고칩니다.
2026년 11월 3일 업데이트
받게 되는 것
- 움직이는 오로라 배경의 8초 길이 1920×1080 MP4
- 진행·답장 상태를 보여 주는 반투명 알림 카드 두 장
- 구석에 들어가는 내 로고
잘 맞는 경우
- 앱 출시와 기능 공개
- 최신 OS 느낌의 제품 영상
- 키노트 슬라이드 배경
맞지 않는 경우
- 단색이나 브랜드 컬러 배경
- 긴 메시지
이 Skill에 대하여
이렇게 말하세요
/liquid-glass-notification Solenne 리퀴드 글래스 알림을 만들어 줘. 거실 조명을 낮추는 "Sunset scene" 카드가 "Evening wind-down is on"으로 끝나고, Ines가 침실 온도를 올려 달라고 보내는 메시지도 넣어 줘.
리퀴드 글래스는 요즘 운영체제의 얼굴입니다. 반투명하고, 빛을 굴절시키고, 살아 있죠. 리퀴드 글래스 알림은 내 제품의 알림을 흐르는 오로라 위에 이 스타일로 띄워, 업데이트나 주문, 메시지가 네이티브하면서도 프리미엄하게 느껴지게 합니다.
작동 방식
- 요청: 첫 번째 카드가 무엇을 하고 있는지와 완료되면 뭐라고 표시할지, 두 번째 카드의 메시지, 그리고 로고를 에이전트에게 알려 줍니다.
- 채우기: 문구와 색을 블록 변수에 넣고, 텍스트는 레이아웃이 설계된 길이에 가깝게 맞춥니다.
- 렌더링:
npx hyperframes render로 초안을 렌더링해 몇 프레임을 확인한 뒤 최종 MP4를 렌더링합니다. - 재사용: 변수는 작은 JSON 파일 하나에 들어 있어, 다음 버전도 렌더링 한 번이면 됩니다.
팁
- 화려한 배경 위에 놓이므로 흰색 로고를 쓰세요.
- 진행 카드는 지금 일어나고 있는 일처럼 쓰세요.
- 카드마다 짧은 한 줄로 쓰세요.
- 변수가 없는 블록입니다. 에이전트가 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을 설치하고 첫 평가를 남겨 보세요.
자주 묻는 질문
오로라 색을 바꿀 수 있나요?
셰이더 색은 스크립트에 정해져 있어, 에이전트가 내 팔레트에 맞게 조정할 수 있습니다.
글래스 효과는 진짜인가요, 그림인가요?
진짜입니다. 리퀴드 글래스 라이브러리로 실시간 렌더링되어 움직이는 배경을 그대로 굴절시킵니다.
왜 무료인가요?
HeyGen과 HyperFrames 기여자들의 오픈소스 HyperFrames 블록입니다. 그대로 소개하며, 에이전트가 쓸 수 있도록 SKILL.md를 더하고 저희 하우스 브랜드 중 하나인 Solenne으로 만든 샘플을 함께 올렸습니다.
