デスクトップのアナゴを自然なLottie状態遷移で表示する

[Kyoung9]

背景

デスクトップオーバーレイはgood、bad、pausedのPNGを即時に差し替えており、姿勢状態の変化がキャラクターらしい連続した動きになっていませんでした。Web版で確定したデザイナー提供SVGと同じLottie状態遷移を、Tauriオーバーレイにも適用します。

確認済みの現状

• このブランチは最新のorigin/main 8d9440bから作成しました。
• posture-appはTauriデスクトップアプリであり、Web/Vercel向け画面は追加していません。
• ドラッグ、非表示、アプリを開く、配置ヒントの既存操作は維持します。
• ペアリングやモバイル通信契約は変更していません。

実施内容

• デスクトップオーバーレイのPNG差し替えをLottie再生コンポーネントへ置き換えました。
• good、bad、paused間を連続したセグメントとして再生します。
• badからgoodへ戻る際はhappyを0.6秒保持してからgoodへ戻します。
• goodからpausedでは体と白い縞を固定し、目を閉じる動きとZ表示だけを再生します。
• 遷移中の状態変更はキューし、現在の遷移を完成させてから次へ進みます。
• SVGからの再生成スクリプト、原本ハッシュ、回帰テストを追加しました。

受け入れ条件

• Web版とデスクトップ版が同じLottie JSONを使用すること。
• badからhappy、goodへの遷移が途切れないこと。
• paused遷移でキャラクター本体の位置が変わらないこと。
• 既存のオーバーレイ操作を維持すること。
• フロントエンドとRustの検査が成功すること。

検証方法

• bun run test:anago-lottie
• bun run build
• CARGO_TARGET_DIRをクリーンな一時ディレクトリへ指定したcargo check --manifest-path src-tauri/Cargo.toml
• Web版とLottie JSONのSHA-256が一致することを確認

関連PR

• Web版: https://github.com/Kyoung9/PiiiN/pull/1

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 03f20307-4e31-46c6-a21b-3413cee47e68

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

🟡 Changes recommended

Address reduced-motion sinking and desktop overlay sizing/stacking issues.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Replaces desktop Anago PNG pose swaps with shared generated Lottie state transitions.

Changes:

• Adds queued good, bad, happy, and paused transitions.
• Adds SVG-to-Lottie generation, manifests, and regression tests.
• Updates overlay integration and styling.
• Follow-ups are needed for reduced-motion behavior and desktop overlay sizing/stacking.

File summaries

File	Reviewed changes
src/overlay/OverlayApp.tsx	Mounts the Lottie character overlay.
src/overlay/OverlayApp.css	Styles character positioning and placement hints.
src/features/overlay/WebInlineCharacterOverlay.tsx	Implements Lottie playback and queued transitions.
src/features/overlay/WebInlineCharacterOverlay.css	Defines character styling.
scripts/build-anago-overlay-lottie.mjs	Generates the Lottie animation asset.
scripts/anago-svg-source.mjs	Normalizes SVG source poses.
scripts/anago-lottie.test.mjs	Validates animation continuity and source integrity.
public/characters/anago/normal-nago/expressions/paused.svg	Provides paused-state artwork.
public/characters/anago/normal-nago/expressions/happy.svg	Provides recovery artwork.
public/characters/anago/normal-nago/expressions/good.svg	Provides good-state artwork.
public/characters/anago/normal-nago/expressions/bad.svg	Provides bad-state artwork.
public/animations/anago/normal-nago/source-manifest.json	Records source hashes and transforms.
package.json	Adds generation and regression-test scripts.

Review details

Suppressed comments (2)

src/features/overlay/WebInlineCharacterOverlay.tsx:284

• The reduced-motion branch freezes the Lottie transition, but this effect still starts a timer once the bad pose settles and continues translating the whole character every 120ms. Users who request reduced motion will therefore still see the sinking animation; gate this effect on prefersReducedMotion and include that value in the effect dependencies.

    if (mode !== "bad" || !sinkEnabled) {
      setBadSinkPx(0);
      return;
    }
    // Let the head finish drooping before the whole character starts sinking.
    if (settledMode !== "bad") return;

src/overlay/OverlayApp.css:130

• This rule embeds a component whose base CSS still sets z-index: 9999 and whose child is forced to width: 100%, but it only supplies right/bottom. In the desktop overlay the absolutely positioned box has no definite size, so the Lottie can resolve through shrink-to-fit instead of the 184px aspect-ratio container; it also remains above the placement hint (z-index: 3) and can paint over it. Stretch the embedded overlay to the character box and reset its stacking level here.

.overlay-character > .web-inline-character-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;

• Files reviewed: 9/14 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.