Summary

ライブのカメラ映像をUIの特定部分だけに透過させ、磨りガラス（frosted glass）風の背景を作る手法を解説します。要点は Camera を背景に配置し、MaskedView でテキストやシェイプをマスク、さらに Expo Blur でぼかしを重ねることです。実装は比較的シンプルで、パフォーマンスに注意すればリアルタイムUIに使えます。

Key Points

• 必要なパッケージ: expo-camera, expo-blur, @react-native-masked-view/masked-view（環境に応じて導入）。
• 構成: Camera を最背面に配置 -> MaskedView の maskElement に表示したい形状（TextやView） -> MaskedView の子に BlurView や半透明レイヤーを置いて“切り抜き背景”を表現。
• パフォーマンス対策:
  • カメラプレビューの解像度を下げる（ratio/pictureSize 設定）
  • マスクアニメーションは Animated を使ってネイティブドライバを活用
  • 過度な重ね描画（複数の BlurView）を避ける
• 実装の注意:
  • マスクの形状は単純なものほどレンダリングが軽い
  • iOS/Android の Blur 実装差と権限設定（カメラ権限）を確認
  • テキスト切り抜きでフォントサイズやレイアウトが動的な場合は再計算を最小化する

小さな手順イメージ:

1. Camera をフルスクリーンで配置
2. その上に MaskedView を配置し、maskElement に切り抜き形状を指定
3. MaskedView の子に BlurView や半透明 View を置いて磨りガラス風にする

実装は短いコードスニペットで再現可能なので、既存の画面に組み込むのも容易です。