Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Characters

VoiceTiles

Voices to cast from, each a tile with its name and a few words on how it sounds ("Bright, determined"). Choosing a tile plays the voice and selects it; five across.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

VoiceTiles for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

VoiceTiles for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
Casting a voice: a tile per voice with its name and a few words on how it sounds ("Bright, determined"), where choosing one plays it and selects it.
Not for

Guidelines

With sound on, a new voice plays the choose sound (README · Sound).

VoiceTilesExample.jsxReact
import { VoiceTiles } from '@anicanon/sakuga/anicanonkit';

export default function VoiceTilesExample() {
  return (
    <VoiceTiles
      label="Archetype"
      value="Shounen Hero"
      options={[
        { label: 'Shounen Hero', description: 'Bright, determined' },
        { label: 'Cool', description: 'Low, unhurried' },
        { label: 'Gruff Mentor', description: 'Weathered, warm' },
        { label: 'Stoic Warrior', description: 'Flat, steady' },
        { label: 'Genki', description: 'Fast, sunny' },
      ]}
    />
  );
}

PropsVoiceTilesProps

optionsrequired
{ label: string; value?: string; description?: string; }[]
value
string
columns
number
label
string
onChange
(value: string) => void
className
string
VoiceTilesExample.swiftiOS · coming soon
VoiceTilesExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

voice-play-icon-size
icon-size-xs
14px
voices-gap
gap-md
8px
voice-active-scale
scale-press
.97
voice-gap
gap-md
8px
voice-padding-y
inset-sm
8px
voice-padding-right
inset-sm
8px
voice-padding-left
inset-sm
8px
voice-radius
radius-md
12px
voice-inset-ring-width
line-hairline
1px
voice-checked-inset-ring-width
line-strong
2px
voice-focus-outline-offset
focus-ring-offset
3px
voice-play-size
its own value
28px
voice-play-radius
radius-full
9999px
voice-forced-edge-width
line-hairline
1px
voice-forced-selected-width
line-heavy
3px

Type

voice-font-family
font-sans
Funnel Sans
voice-words-b-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
voice-words-small-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

voice-press-duration
motion-fast
160ms
voice-press-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
voice-active-duration
motion-instant
100ms
voice-duration
motion-fast
160ms
voice-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A radio group named by label and one Tab stop: arrows move to a voice and choose it through onChange, each a radio read by its name and description and "checked" when chosen; the play mark is hidden.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.