レトロなピクセルグラデーション生成ツールを作る過程で、操作パネルをMacBookのNotch風UIに収める試みを記録したケーススタディ。Claudeに最初のプロトタイプを作らせたところ、機能は動くが遷移は瞬時で、どの要素にも重さがなかった。ここからアニメーションの磨き込みが始まる。
開閉時のスプリング物理では、パネルが最終サイズを一瞬超えてから収まるオーバーシュートを入れた。タブ切り替えではインジケーターがスライドし、コンテンツはクロスフェードと垂直シフトで方向感を持たせている。プリセット名の変更にはブラー→解消のモーフ処理を採用し、高速クリックしても前のトランジションをキャンセルして常に綺麗に遷移する。
各タブのコンテンツ量が違うため、コンテナの高さも同じ物理演算でアニメーションさせた。展開中に折りたたみを割り込ませても物理が自然に反転し、つっかかりが出ない。Notch両端の凹型くぼみはCSSマスクで実装し、展開中も上端に固定される。
著者の結論は明快で、AIの価値は一発で正解を出すことではなく、こうしたインタラクションの磨き込みに時間を使えるようになる点にある。
