EditFrame + Kimi K2.6 で生成したサイバー調テキストアニメーション。
動画
制作経緯
複数の AI エージェントで EditFrame（HTML→MP4 レンダリング）のテストを実施。
- Claude Code + EditFrame — 中央配置に失敗。
ef-timegroupの Shadow DOM 制約で flex centering が効かず、テキストが右下で見切れる問題が解決できず断念 - Kimi K2.6（pi 経由） —
absolute w-full h-full flex items-center justify-centerの黄金律で中央配置を一発解決。意図通りのサイバー風アニメーションを生成
この経験から editframe-layout skill を作成し、.agents/skills/ に共有している。
デザイン詳細
| 要素 | 内容 |
|---|---|
| 背景 | #202f55（ミッドナイトブルー）+ シアングリッド線 |
| テキスト | Orbitron（Google Fonts）900w / 140px |
| 発光 | 多段階 text-shadow（シアン→マゼンタ→パープルのネオングロー） |
| 演出 | スキャンライン（CRT風）+ グリッチフリッカー + ビネット |
| アニメーション | 下から浮上 → 微細上下動 → グリッチ + パルスグロー |
圧縮ノート
非圧縮版（1.6MB）から ffmpeg -crf 28 で 313KB まで圧縮。
CRF 圧縮によるマクロブロックノイズが逆にサイバーパンク風の質感として機能し、意図しない良いエフェクトになった。
比較
同じ EditFrame で Teko フォント版もテスト。Orbitron の未来的な Sci-Fi 感に対し、Teko はダイナミックで看板風の印象。