Theme

Sound

Jump to a component

Core · Content

CastAvatar

CastAvatar shows a person: a character (a round portrait from their identity sheet), or a creator (an initial until they add a picture), with their name and a one-line role.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

CastAvatar 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

CastAvatar 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: A person with their name and a one-line role: a character's round portrait from their identity sheet, or a creator's initial until they add a picture.
Not for: A cast member on the cast page, with what they have and what is happening to themCastCard
Who or what a panel holds, with its @ or # mark and a noteMentionChip
A character as one card with stats and traitsCharacterCard
A character named inside proseMention
Several people at a glance, overlappingCastStack

Guidelines

size="lg" (104px) on the desktop series page, md (72px) on phone and in the player.
The role is a few words a viewer understands ("Leads the E.R.A.", "Power of wind"), never internal production data.
The portrait is decorative; the name is the label.
Without an image it shows the initial in the same circle, until a portrait is approved.
selected (true or false) makes it a choice: a ring and a check say it is chosen (who wears a look).
muted dims the face: the character is no longer in the story at that moment (dead, gone).
Under a small face (sm, xs) in a column, the name reads at 12 px and the name and role are cut to the cell, so a panel grid of four stays tidy; larger faces wrap their names.
layout="row" puts a small portrait beside the name and role (the people in a character's life). size is lg, md, sm (44), xs (36) or a number of pixels.

CastAvatarExample.jsxReact

import { CastAvatar } from '@anicanon/sakuga/ui';

export default function CastAvatarExample() {
  return (
    <>
      <CastAvatar
        image="/art/eba-cast-the-professor.webp"
        name="The Professor"
        role="Arthur Penhaligon"
        width={120}
        href="#"
      />
      <CastAvatar
        image="/art/eba-cast-kiko.webp"
        name="Kiko"
        role="Leads the E.R.A."
        width={120}
        href="#"
      />
      <CastAvatar
        size="md"
        image="/art/eba-cast-kiko.webp"
        name="Kiko"
        width={84}
        href="#"
      />
    </>
  );
}

Props`CastAvatarProps`

image

string

initial

string

name

string

role

string

size

'xs' | 'sm' | 'md' | 'lg' | number

layout

'row'

selected

boolean

muted

boolean

No longer in the story at this moment: the face dims.

onClick

MouseEventHandler

label

string

The name when none is shown.

href

string

width

number | string

className

string

CastAvatarExample.swiftiOS · coming soon

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

Colour

cast-avatar-nameCastAvatar: character name.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

cast-avatar-roleCastAvatar: role line.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

cast-avatar-placeholderCastAvatar: portrait frame while it loads.

bg-surface-raisedneutral-100#ececf0

bg-surface-raisedneutral-875#1a1a21

Space and shape

cast-avatar-gap

gap-md

8px

cast-avatar-img-size-lg

its own value

104px

cast-avatar-img-size-md

its own value

72px

cast-avatar-role-margin-top

its own value

calc(-1 * 4px)

cast-avatar-check-icon-size

icon-size-xs

14px

cast-avatar-img-active-scale

scale-press-sm

.94

cast-avatar-face-size-lg

its own value

104px

cast-avatar-face-size-md

its own value

72px

cast-avatar-face-size-sm

its own value

44px

cast-avatar-face-size-xs

its own value

36px

cast-avatar-check-inset

its own value

calc(-1 * 2px)

cast-avatar-check-size

icon-size-md

20px

cast-avatar-check-ring-width

line-strong

2px

cast-avatar-selected-ring-width

line-strong

2px

cast-avatar-selected-outer-ring-width

ring-outer

calc(2px + 2px)

cast-avatar-row-gap

gap-md

8px

cast-avatar-row-padding-y

inset-xs

4px

cast-avatar-row-padding-right

inset-md

12px

cast-avatar-row-padding-left

inset-xs

4px

cast-avatar-row-radius

radius-xl

24px

cast-avatar-row-inset-ring-width

line-hairline

1px

cast-avatar-face-muted-opacity

opacity-disabled

0.35

cast-avatar-forced-selected-width

line-strong

2px

Type

cast-avatar-font-family

font-sans

Funnel Sans

cast-avatar-name-font-size

text-label-size

14px

cast-avatar-name-line-height

text-label-line-height

20px

cast-avatar-name-font-weight

text-label-weight

600

cast-avatar-role-font-size

text-small-size

12px

cast-avatar-role-line-height

text-small-line-height

16px

cast-avatar-face-font-size-lg

text-title-1-size

30px

cast-avatar-face-font-size-md

text-subtitle-size

24px

cast-avatar-face-font-size-sm

text-lead-size

18px

cast-avatar-face-font-size-xs

text-body-size

14px

cast-avatar-initial-font

its own value

700 1em/1 "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

cast-avatar-row-name-font-size

text-caption-size

13px

cast-avatar-row-name-line-height

text-caption-line-height

18px

cast-avatar-row-role-font-size

text-small-size

12px

cast-avatar-row-role-line-height

text-small-line-height

16px

cast-avatar-name-font-size-xs-sm

text-small-size

12px

cast-avatar-name-line-height-xs-sm

text-small-line-height

16px

Motion

cast-avatar-img-develop-animation

motion-develop

sk-develop 560ms cubic-bezier(0, 0, 0, 1)

cast-avatar-img-active-duration

motion-instant

100ms

cast-avatar-img-duration

motion-fast

160ms

cast-avatar-img-easing

ease-standard

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

CastAvatar

Guidelines

PropsCastAvatarProps

Colour

Space and shape

Type

Motion

Props`CastAvatarProps`