Theme

Sound

Jump to a component

AniCanonKit · Story

StateChange

StateChange is a change written as before → after: two badges, the before faded.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

StateChange is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

StateChange is made for the web, and isn’t part of Sakuga for Android yet.

Use it for: A change written as before and after, two badges with the before faded: a place that starts burning, a bond that turns to rivals.
Not for: A single state laid over artworkBadge
A proposed change to wordsRevision
The change as a whole row with its pictureEntityRow

Guidelines

afterVariant="alert" for a change for the worse (burning, dead, rivals). Leave before out for a state with no prior value.

StateChangeExample.jsxReact

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

export default function StateChangeExample() {
  return (
    <StateChange
      before="Friends"
      after="Rivals"
      afterVariant="alert"
      afterIcon="bolt"
      beforeIcon="heart"
    />
  );
}

Props`StateChangeProps`

afterrequired

string

before

string

afterVariant

'new' | 'alert'

afterIcon

IconName

beforeIcon

IconName

An IconName is any of the names Icon lists.

StateChangeExample.swiftiOS · coming soon

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

state-arrowStateChange: the arrow between before and after.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

Space and shape

state-gap

gap-sm

6px

state-before-opacity

opacity-legible

0.8

state-arrow-icon-size

icon-size-xs

14px

Motion

state-after-swap-animation

motion-swap

sk-swap 160ms cubic-bezier(0, 0, 0, 1)