無料
Solenne · 16:9
このSkillで書き出した映像
Liquid Glass 通知 v1.0.0
流れるオーロラの背景に、すりガラス風の Liquid Glass 通知カードがふわりと浮かぶ。1枚は進捗をライブ表示、もう1枚は返信付き。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:08
8秒の Liquid Glass UI 向けの無料 HyperFrames ブロック。動くオーロラのシェーダーの上に、すりガラス風の通知カードが2枚流れ込みます。1枚は進行中のタスクが完了するまでを、もう1枚は入力中のドットと「返信」「既読にする」チップ付きのメッセージを表示し、隅にはロゴが入ります。テキスト、ステータスメッセージ、ロゴは HTML で編集します。
2026年11月3日 更新
得られるもの
- ライブのオーロラ背景付き、8秒・1920×1080 の MP4
- 進捗と返信の状態を持つ、すりガラス風の通知カード2枚
- 隅に入るロゴ
向いている用途
- アプリのローンチや新機能のお披露目
- モダンな OS 感のある商品動画
- キーノートのスライド背景
向いていない用途
- 無地やブランドカラーの背景
- 長いメッセージ
このSkillについて
依頼の例
/liquid-glass-notification Solenne の Liquid Glass 通知を作って。リビングを暗くしていく「Sunset scene」カードが「Evening wind-down is on」で完了し、もう1枚は寝室を暖めてほしいという Ines からのメッセージ。
Liquid Glass は、いまの OS の顔です。すりガラスのように光を屈折させ、生きているように動く。Liquid Glass 通知は、あなたのプロダクトの通知をこのスタイルで流れるオーロラの上に表示します。アップデートも注文もメッセージも、ネイティブらしさと上質さを同時にまとえます。
使い方
- 依頼：1枚目のカードで何が進行中で、完了時に何と表示するか、2枚目のカードのメッセージ、ロゴをエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- ロゴは白いものを使います。カラフルな背景の上に載ります。
- 進捗カードは「今まさに起きていること」として書きましょう。
- 各カードは短い1行に収めます。
- 変数はありません。エージェントが SKILL.md に沿って、HTML 内のテキストや数字を直接編集します。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- 短い通知文2つ、完了時のステータス、白いロゴ。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
オーロラの色は変えられますか？
シェーダーの色はスクリプトで設定されています。エージェントがあなたのカラーパレットに合わせて調整できます。
ガラスの効果は本物ですか、それとも画像ですか？
本物です。Liquid Glass のライブラリでリアルタイムにレンダーされるので、動く背景をきちんと屈折させます。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Solenne で作ったサンプルを付けています。
