bokuwalily Procedure
text-to-lottie プレイヤー（npx degit diffusionstudio/lottie <dir> でscaffold、Skia/Skottieレンダ）でLottieを書く時の確定手順。
public/lottie.jsonを書き、public/controls.jsonで slot にラベル付け（bgColor,ballColor等）。- 座標は「レイヤー
ks.p」＋「シェイプ内p」が加算される。レイヤーを[256,256]に置いたら、その中の矩形/楕円のpは基本[0,0]にする。両方に256を入れると中心が[512,512]（右下隅）にずれる。スキル同梱の背景サンプルはこの罠を踏んでいる（layer.p=256,256 かつ rc.p=256,256）→ rc.p を[0,0]に直す。 - スクワッシュ&ストレッチはレイヤーのアンカーをボール底に置く：楕円を
p:[0,-50]（半径50）、layer.a=[0,0,0]。layer.s をキーフレームすると底が床に貼り付いたまま潰れる。中心アンカーだと地面にめり込む。 - 重力イージング: 頂点→着地は ease-in（
o.x:[0.5],o.y:[0]/i.x:[1],i.y:[1]）、着地→頂点は ease-out（o:[0,0]/i:[0.5,1]）。ループは最初と最後のキーフレーム値を一致させる。 - 検証は Playwright MCP で行う（理由は Pitfalls）。
http://localhost:5173/?frame=N&paused=1に navigate →browser_take_screenshot→ 保存先は~/<file>.png（.playwright-mcp/指定でもホーム直下に出ることがある。find ~ -name <file>.pngで探す）→ Read で目視。
Pitfalls
- claude-in-chrome のタブが生成直後に消えることがある（
tabs_context_mcp createIfEmpty:true→ navigate で "Tab no longer exists"）。リトライ2回で復旧しなければ Playwright MCP に切り替える。Playwright はヘッドレスで安定し、?frame=ピン留めと組み合わせて確実にフレーム検証できる。 - JSON が valid でも見た目バグ（コンポ外描画）は出る。必ず実レンダリングを目視。頂点フレーム(0)と着地フレーム(op/2)の2枚を撮って位置・スクワッシュ・影を確認。
- シェイプは必ず
ty:"gr"グループのitに入れ、末尾にtr（恒等でも必須）。フラットだと真っ白。 - 色は 0–1 RGBA（0–255ではない）。
s値は常に配列（スカラーでも[360]）。 - 全アニメに背景色コントロール必須：最終レイヤーにフルコンポ矩形＋slotted fill（
bgColor）。
Verification
node -e "JSON.parse(require('fs').readFileSync('public/lottie.json','utf8'))"で構文チェック。- frame=0 と frame=op/2 のスクショ2枚で、対象オブジェクトがコンポ（背景矩形）内に収まっているか目視。背景が右下にずれていたら手順2の二重オフセット。