/debug/kana-mask

KanaMask component

4種のカナ形状を type prop で切り替え、vermilion / cyan / yellow の 3 色領域ごとに slot を持つ。ブランドカラー塗り／3 画像 ／1 画像の 3 パターンで動作確認。

01 — Solid color slots (brand palette reproduction)

type="i"
type="chi"
type="to"
type="ha"

02 — One image per color region

20th Single "劇薬中毒" Music Video
ウィンターイルミ2025
サマーフェスタ2025 妖怪大集合
type="i" ■ 20th Single "劇 ■ ウィンターイルミ2025 ■ サマーフェスタ2025 妖怪
20th Single "劇薬中毒" Music Video
ウィンターイルミ2025
サマーフェスタ2025 妖怪大集合
type="chi" ■ 20th Single "劇 ■ ウィンターイルミ2025 ■ サマーフェスタ2025 妖怪
20th Single "劇薬中毒" Music Video
ウィンターイルミ2025
サマーフェスタ2025 妖怪大集合
type="to" ■ 20th Single "劇 ■ ウィンターイルミ2025 ■ サマーフェスタ2025 妖怪
20th Single "劇薬中毒" Music Video
ウィンターイルミ2025
サマーフェスタ2025 妖怪大集合
type="ha" ■ 20th Single "劇 ■ ウィンターイルミ2025 ■ サマーフェスタ2025 妖怪

03 — Same image in all three slots

Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
type="i"
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
type="chi"
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
type="to"
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
Future Vision 2030-2040 (2024年度版)
type="ha"

04 — preserveAspect=false (container aspect differs from kana)

20th Single "劇薬中毒" Music Video
ウィンターイルミ2025
サマーフェスタ2025 妖怪大集合
size="cover" (default) — カナが container を埋め、溢れは切り落とす
20th Single "劇薬中毒" Music Video
ウィンターイルミ2025
サマーフェスタ2025 妖怪大集合
size="contain" — カナ全体を見せて letterbox