Liquid Glass ウィジェット v1.0.0

ウィジェットは、大事なことをひと目で確かめるためのものです。Liquid Glass ウィジェットは、すりガラス風の Liquid Glass スタイルで小さなダッシュボードを組み立てます。数字がカウントアップし、パネルがタスクの完了を伝えるので、フィットネスアプリもスマートデバイスもサービスも、データを美しく見せられます。

使い方

1. 依頼：ウィジェットの値3つ、パネルのタイトルと一文、完了時のステータス、ロゴをエージェントに伝えます。
2. 入力：コピーと色をブロックの変数に書き込みます。文字数はレイアウトの想定に近い長さに保ちます。
3. レンダー：npx hyperframes render で下書きをレンダーし、いくつかのフレームを確認してから最終版の MP4 を書き出します。
4. 再利用：変数は小さな JSON ファイル1つにまとまっているので、次のバージョンもレンダー1回で済みます。

コツ

• ランニング中の気温、バッテリー、歩数のように、ひとつのストーリーを語る数字を3つ選びましょう。
• パネルの一文は70文字程度までに収めます。
• ロゴは白いものを使います。
• 変数はありません。エージェントが SKILL.md に沿って、HTML 内のテキストや数字を直接編集します。

オープンソース

これは HyperFrames のレジストリブロックです。HeyGen と HyperFrames のコントリビューター（heygen-com/hyperframes）が作り、Apache License 2.0 で公開しています。ダウンロードはアセット込みのブロックに Reelity が書いた SKILL.md を添えたもので、エージェントが中身の埋め方とレンダー方法を把握できます。HyperFrames 本体は npm から実行されます。