無料
Solenne · 16:9
このSkillで書き出した映像
デスクトップ通知 v1.0.0
macOS 風の通知バナーがアプリアイコン、タイトル、メッセージとともにスライドインし、スライドアウトするアニメーション。
まだ評価はありません 0 ダウンロード
- フォーマット
- 動画 · 16:9
- 尺
- 0:05
5秒のデスクトップ通知向けの無料 HyperFrames ブロック。アプリアイコン、アプリ名、タイトル、1行のメッセージを載せたすりガラス風のバナーが右上にスライドインし、少し留まってからスライドアウトします。テキストとアイコンは HTML で編集します。背景は透過なので、画面収録や壁紙の上に重ねられます。
2026年11月3日 更新
得られるもの
- 透過背景の5秒・1920×1080 の通知オーバーレイ
- アプリアイコン、名前、タイトル、メッセージ
- 画面収録に重ねるための手順
向いている用途
- SaaS やアプリのデモ
- チュートリアルや解説動画
- 新機能の告知
向いていない用途
- 縦型のみの動画
- 長いメッセージ
このSkillについて
依頼の例
/macos-notification Solenne のデスクトップ通知を作って。タイトルは「Evening wind-down is on」、メッセージは「Lights dimmed to 35%, blinds closed and the heating eased to 19°」、うちのリビングの写真に重ねる。
デスクトップ通知は、プロダクトが今まさに何かをしたことを見せるいちばん手早い方法です。デスクトップ通知は、おなじみの macOS スタイルの通知を画面収録や壁紙の上にアニメーション表示します。「Evening wind-down is on」「Payment received」「Your export is ready」。
使い方
- 依頼：アプリ名とアイコン、タイトル、1行のメッセージをエージェントに伝えます。
- 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
- レンダー：
npx hyperframes renderで下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。 - 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。
コツ
- タイトルは機能ではなく、結果として書きましょう。
- メッセージは1行に収めます。
- 背景は透過なので、アルファチャンネル付きでレンダーして自分の映像や写真、単色の背景に重ねます。そのための2つのコマンドは SKILL.md に載っています。
- 変数はありません。エージェントが SKILL.md に沿って、HTML 内のテキストや数字を直接編集します。
オープンソース
これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。
始める前に必要なもの
- 用意するもの
- アプリ名、正方形のアイコン、タイトル、1行のメッセージ。
- 依存関係
- Node.js 22 以降 — 必須 · FFmpeg — 必須
- 外部コスト
- ありません。HyperFrames は無料のオープンソースで、手元のマシンでレンダーします。
- 最終テスト
- v1.0.0 —
ユーザーレビュー
まだレビューはありません。インストールして最初に評価しましょう。
よくある質問
通知を複数表示できますか？
通知ごとに1回ずつレンダーして編集で重ねるか、HTML 内のバナーを複製するようエージェントに頼んでください。
Apple のロゴは表示されますか？
いいえ。macOS 風のバナーに、あなたのアプリアイコンと名前が表示されます。
なぜ無料なのですか？
HeyGen と HyperFrames のコントリビューターによるオープンソースの HyperFrames ブロックです。手を加えずに掲載し、エージェントが使えるよう SKILL.md を添え、自社ブランド Solenne で作ったサンプルを付けています。
