HyperFrames モーションポリッシュ は何をしますか？
このスキルは、動画がすでに存在するものの、よりプレミアムで流動的に感じさせる必要がある場合に使用します。
セグメント診断
タイムラインを3〜5秒のブロックに分割します：
- このセグメントで視聴者は何を理解すべきですか？
- どの要素にフォーカスが当たりますか？
- カーソルは正しいターゲットをクリックしていますか？
- コンポーネントはクリックの前にすでに表示されていますか？
- 動きのない長いポーズがありますか？
- テキストや画像がクロップされていませんか？
高インパクトな調整
- クリックフィードバックをカーソル接触に近づけます。
- ベネフィットと価格の間のポーズを減らします。
- UIスクロールには
power3.inOutを使用します。 - テキストやカードの出現には
power2.outまたはpower3.outを使用します。 - 子アニメーションが親コンテナのスクロールと競合しないようにします。
- クリックターゲットに
1.015から1.035の間の軽いフォーカスズームを適用します。 - 視線を誘導するために一時的なシャドウを使用します。
一般的な修正
カーソルが空をクリックする
- コンポーネントの出現が完了するまでクリックを遅延させます。
- DOMのバウンディングボックスから
x/yを再計算します。 - コンテナがスクロールする場合、スクロール後の位置を検証し、スクロール前の位置は検証しません。
テキストの重なり
- 出現間のインターバルを広げます。
- フォントサイズだけでなく、ブロックのスケールも小さくします。
- フレームあたりの表示コピーを減らします。
- カードやボタンに固定の高さを設定します。
生き生きとしないカルーセル
- カルーセルを
y、opacity、軽いscaleで出現させます。 - 中央のカードでポーズを入れながら水平軸をアニメーションします。
- 選択されたカードに微妙なズームを適用します。
- 元のサイトに存在しない境界線やシャドウは削除します。
静止したセグメント
- ポーズをマイクロモーションに変えます：軽いパララックス、微妙な呼吸、次のアクションを準備するカーソル。
- 重要な読み物がないホールドを短くします。
- ベネフィットと価格をよりコンパクトなシーケンスで表示します。
CTRチェックリスト
- プロダクトが早期に表示される。
- ベネフィットが価格より先に表示される。
- 価格がクリーンな画面に表示される。
- CTAが視覚的フォーカスを受ける。
- カーソルがランダムに感じさせずにジャーニーを示す。
- チェックアウトへの遷移がクリックの結果として感じられる。
検証
十分なサンプルで npx hyperframes inspect を使用します：
npx hyperframes inspect ./project --samples 18
可能であれば、クライアントから批判された秒数のスナップショットを生成し、以下をレビューします：
- 最初のフレーム；
- 最初のクリック；
- メインプロダクト；
- ベネフィット；
- 価格；
- チェックアウト；
- 確認。
HTMLを再構築する前に、外科的な変更を行います：タイミング、イージング、オフセット、スケール、不透明度を調整します。