Theme

Sound

Jump to a component

AniCanonKit · Characters

CharacterStats

Who a character is at a glance: each fact as its picker's icon, the value and what it is.

@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

CharacterStats 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

CharacterStats 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: Who a character is at a glance: each fact as its picker's icon, the value and what it is, as tiles in a card or on a phone, or as pills across the character's page.
Not for: Who a character is at a point in the story, with since whenFactList
The whole character as one cardCharacterCard
What a character is ready withReadiness
Words kept as tags, such as a visual vibeTagList

Guidelines

Tiles (the default) in a CharacterCard and on a phone, three across. changed rings a fact edited in this session.
layout="pills" lays them across a character's page, beside the portrait.
The icon is the same one the picker shows, from the world's morphology (human, anthro, creature).

CharacterStatsExample.jsxReact

import { CharacterStats } from '@anicanon/sakuga/anicanonkit';

const stats = [
  { icon: 'gender-male', value: 'Male', label: 'Gender' },
  { icon: 'age-adult', value: 'Adult', label: 'Age' },
  { icon: 'height-tall', value: 'Tall', label: 'Height' },
  { icon: 'body-fit', value: 'Fit', label: 'Build', changed: true },
  { icon: 'faction-hero', value: 'Heros', label: 'Faction' },
  { icon: 'trait-leader', value: 'Leader', label: 'Role' },
];

const stats2 = [
  { icon: 'gender-male', value: 'Male', label: 'Gender' },
  { icon: 'age-adult', value: 'Adult', label: 'Age' },
  { icon: 'height-tall', value: 'Tall', label: 'Height' },
  { icon: 'body-fit', value: 'Fit', label: 'Build', changed: true },
  { icon: 'faction-hero', value: 'Heros', label: 'Faction' },
  { icon: 'trait-leader', value: 'Leader', label: 'Role' },
];

export default function CharacterStatsExample() {
  return (
    <>
      <CharacterStats stats={stats} />
      <CharacterStats layout="pills" stats={stats2} />
    </>
  );
}

Props`CharacterStatsProps`

statsrequired

CharacterStat[]

layout

'tiles' | 'pills'

columns

number

className

string

Types

interface CharacterStat {
    icon?: IconName;
    value: string;
    label: string;
    changed?: boolean;
}

CharacterStatsExample.swiftiOS · coming soon

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

character-stat-pill-icon-size

icon-size-md

20px

character-stat-icon-size

icon-size-lg

24px

character-stats-gap

gap-sm

6px

character-stat-gap

gap-xs

4px

character-stat-padding-y

inset-sm

8px

character-stat-padding-x

inset-xs

4px

character-stat-radius

radius-md

12px

character-stat-changed-inset-ring-width

line-strong

2px

character-stats-pills-gap

gap-md

8px

character-stats-pills-max-width

its own value

620px

character-stats-pills-stat-gap

gap-md

8px

character-stats-pills-stat-height

its own value

40px

character-stats-pills-stat-padding-right

inset-md

12px

character-stats-pills-stat-padding-left

inset-sm

8px

character-stats-pills-stat-radius

radius-full

9999px

character-stats-pills-stat-inset-ring-width

line-hairline

1px

character-stats-pills-small-margin-right

gap-2xs

2px

Type

character-stat-font

text-small-strong

600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

character-stat-b-font

text-caption-strong

600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

character-stats-pills-stat-font

text-caption-strong

600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

character-stats-pills-small-font

text-small

500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

character-stat-duration

motion-fast

160ms

character-stat-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)