Chuyển động và trợ năng

Orbz có cấu hình chuyển động và cách hiển thị tĩnh giảm chuyển động riêng cho từng trạng thái. Ứng dụng chọn chính sách; Orbz thực hiện kết xuất.

Chính sách giảm chuyển động

Dùng reduced-motion để chọn cách Orbz phản ứng:

Mặc định là system.

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

Giảm chuyển động không phải dùng một khung chờ chung. Mỗi trạng thái có bố cục tĩnh riêng, nên listening, thinking, speaking và asleep vẫn khác nhau rõ ràng mà không cần hoạt ảnh liên tục.

Chỉ dùng never khi sản phẩm có lý do rõ ràng để ghi đè tùy chọn hệ thống. Với cài đặt dành cho người dùng, lưu lựa chọn và liên kết trực tiếp:

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

Tốc độ

speed thay đổi thời lượng hoạt ảnh. Lớn hơn 1 thì nhanh hơn, giữa 0 và 1 thì chậm hơn. Giá trị phải dương.

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

Mặc định là 1. Số không, số âm, giá trị không phải số hoặc không hữu hạn được chuẩn hóa về mặc định.

Tốc độ không có tác động trực quan khi giảm chuyển động được bật vì các cấu hình đó là tĩnh.

Tạm dừng và tiếp tục

Thuộc tính boolean paused đóng băng hoạt ảnh hiện tại. Nó không tắt tiếng, dừng ghi âm, hủy yêu cầu hoặc đổi 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();

Giống elevated, paused tuân theo ngữ nghĩa boolean HTML. paused="false" vẫn là tạm dừng. Xóa thuộc tính HTML hoặc đặt thuộc tính JavaScript thành false.

Truyền đạt ý nghĩa bên ngoài hoạt ảnh

Quả cầu bên trong Orbz được đánh dấu là trang trí. Trạng thái, lỗi, yêu cầu quyền và thao tác cần HTML có ngữ nghĩa trong ứng dụng chủ.

<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>

Giao diện xung quanh nên:

• thông báo thay đổi trạng thái quan trọng bằng chữ, không chỉ màu hoặc chuyển động
• cho phép dùng bàn phím với điều khiển micrô và dừng
• mô tả rõ lỗi và cách khôi phục
• giữ trạng thái hữu ích khi bật giảm chuyển động
• tránh thông báo từng khung hoạt ảnh hay chuyển cảnh trang trí

Chỉ dùng role="status" và aria-live cho thông báo thực sự cần đọc. Nếu cập nhật không quan trọng với người dùng trình đọc màn hình, văn bản hiển thị thông thường có thể phù hợp hơn.

Cấu hình mặc định thực tế

Với phần lớn sản phẩm:

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

Sau đó đồng bộ nhãn văn bản bên cạnh với cùng trạng thái ứng dụng. Cách này tôn trọng tùy chọn hệ thống, giữ đầy đủ các trạng thái và không buộc chuyển động phải tự truyền đạt ý nghĩa.