モーションとアクセシビリティ

Orbz は各状態に固有のモーションと、動きを減らした静止表示を用意します。方針はアプリが選び、描画は Orbz が行います。

動きを減らす方針

reduced-motion で動作を選びます。

既定値は system です。

<orb-z state="idle" reduced-motion="system"></orb-z>

動きを減らしても単なる共通の待機画面にはなりません。各状態に固有の静止構成があり、listening、thinking、speaking、asleep を連続アニメーションなしで区別できます。

システム設定を上書きする明確な理由がある場合だけ never を使います。ユーザー設定は選択を保存して直接バインドします。

import type { OrbzElement, OrbzReducedMotion } from "@neongate-ai/orbz";
 
function setMotionPreference(value: OrbzReducedMotion) {
  const orb = document.querySelector<OrbzElement>("orb-z");
  if (orb) orb.reducedMotion = value;
}

速度

speed はアニメーションの時間を調整します。1 より大きいと速く、0 と 1 の間なら遅くなります。正数が必要です。

<orb-z speed="0.8"></orb-z>
<orb-z speed="1.25"></orb-z>

既定値は 1 です。ゼロ、負数、数値以外、有限でない値は既定値に正規化されます。

動きを減らしている間は静止表示のため、速度を変えても見た目に影響しません。

一時停止と再開

真偽値属性 paused は現在のアニメーションを固定します。消音、録音停止、要求取消、state の変更はしません。

<orb-z state="thinking" paused></orb-z>

import type { OrbzElement } from "@neongate-ai/orbz";
 
const orb = document.querySelector<OrbzElement>("orb-z");
 
orb?.pause();
orb?.play();
orb?.restart();

elevated と同じく HTML の真偽値規則に従うため、paused="false" でも停止します。属性を削除するか、プロパティを false にします。

アニメーションの外で意味を伝える

内部の球体は装飾として指定されています。状態、エラー、権限要求、操作にはホストアプリの意味のある HTML が必要です。

<section aria-labelledby="assistant-heading">
  <h2 id="assistant-heading">Voice assistant</h2>
 
  <div role="status" aria-live="polite">
    <orb-z state="listening"></orb-z>
    <span>Assistant is listening</span>
  </div>
 
  <button type="button">Stop listening</button>
</section>

周囲の UI では次を行います。

• 状態の重要な変化を色や動きだけでなく文字で通知する
• マイクと停止操作をキーボードで使えるようにする
• エラーと復旧操作を明確に説明する
• 動きを減らしても有用な状態表示を保つ
• 各フレームや装飾的な遷移を読み上げない

読み上げが必要な通知にだけ role="status" と aria-live を使います。スクリーンリーダー利用者に重要でなければ、通常の表示テキストが適切な場合もあります。

実用的な既定設定

多くの製品では次を使います。

<orb-z
  state="idle"
  speed="1"
  reduced-motion="system"
></orb-z>

隣接するテキストを同じアプリ状態に同期させます。システム設定を尊重し、全状態を伝えながら、意味を動きだけに依存させずに済みます。