Theme
Sound
Jump to a component
Core · Content
Thumb
Thumb is a picture in a frame: cover-cropped, 6 px corners, selected adds the accent ring, muted greys a rejected take. Give it width and height, or leave them out for a full-width 16:9 frame (ratio changes it).
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
Thumb 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
Thumb 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 picture in a frame: a take (
selected, ormutedwhen rejected), a library item, a panel to pick, a frame not made yet. - Not for
- An episode, short or manga issue a viewer opensMediaCard
- A person's portrait with their name and roleCastAvatar
- A manga page at its trimMangaPage
- One look on white with its occasionLookPlate
- The place or backdrop being made, on the left of its flowPlaceCard
- A whole page or list with nothing in it yetEmptyState
Guidelines
imageStylemoves the crop (object-position:30% 40%).figurelays a cut-out over the picture (a character on a place). Prefer a real render.lightMapgives the picture light on art, as onMediaCard: its own highlights glow where the pointer is. It is on wherever there is a map and never onmuted;light={false}turns it off.ListRowandPlaceCardpasslightMapto their picture. A player's poster is aThumbwith its map before play, andlight={false}the moment the video plays.onClickmakes it a toggle button (aria-pressedfollowsselected) that sinks on press; the accent ring grows in onmotion-fast.titleandmetacaption it under the picture (a library item, a panel to pick).placeholderis a frame that is not made yet: an empty frame naming what will fill it ("Board drawn when you approve the cut"). Never fake a picture.radius="none"sits it flush inside other art (a split view, a loupe of frames);radius="lg"for a cover.- Mount it; never draw
.sk-thumbby hand. fit="contain"shows the whole picture (a sheet);papersets it on the white a sheet is drawn on, in either theme.radiusisnone,md,lg,xlorfull(a round crop of a face). Every picture develops in once as it arrives (motion-develop), sodevelopadds nothing; it stays so older pages that pass it still work.
import { useState } from 'react';
import { Thumb } from '@anicanon/sakuga/ui';
export default function ThumbExample() {
const [value, setValue] = useState(1);
return (
<div style={{ display: 'flex', gap: 10 }}>
{[0, 1, 2].map((i) => (
<Thumb
key={i}
image="/art/eba-cinema.webp"
lightMap="/art/eba-cinema.light.webp"
width={128}
height={72}
muted={i === 2}
selected={value === i}
label={'Take ' + (i + 1)}
onClick={() => setValue(i)}
/>
))}
</div>
);
}PropsThumbProps
titlestringCaption under the picture.
metastringplaceholderstringA frame not made yet, naming what will fill it.
radius'none' | 'md' | 'lg' | 'xl' | 'full'fit'cover' | 'contain'contain: the whole picture, e.g. a sheet.
paperbooleanThe white a character sheet is drawn on.
developbooleanKept so older pages still work: every picture already develops in once as it arrives.
imagestringimageStylestringCSS, e.g. "object-position:30% 40%".
lightMapstringThe picture's baked light map: it glows with its own highlights under the pointer (light on art). Never on muted.
lightbooleanOn wherever there is a lightMap; false turns it off (a poster the moment its video plays).
figurestringfigureStylestringwidthnumber | stringheightnumber | stringratiostringselectedbooleanmutedbooleanaltstringonClickMouseEventHandlerMakes it a toggle button; aria-pressed follows selected.
labelstringThe button's name when the picture's alt does not say it.
childrenReactNodeclassNamestringEach 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
thumbnail-ring-activePage strip: ring around the current page.accentcamellia-600#c2335faccentcamellia-400#f4779fthumbnail-ringPage strip: ring around the other pages.border-glass-mediawhite-a16rgba(255,255,255,0.16)border-glass-mediawhite-a16rgba(255,255,255,0.16)thumb-captionThumb: a caption's title.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffthumb-caption-metaThumb: a caption's quiet line.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7thumb-placeholder-edgeThumb: the edge of a frame that is not made yet.border-placeholdershade-a24rgba(11,10,16,0.24)border-placeholderwhite-a22rgba(255,255,255,0.22)thumb-placeholder-fgThumb: what the empty frame will hold.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7thumb-paperThumb: the white a character or face sheet is drawn on, in either theme.neutral-0#ffffffneutral-0#ffffffSpace and shape
thumb-radiusradius-xs4px
thumb-active-scalescale-press.97
thumb-selected-ring-widthline-strong2px
thumb-img-muted-filterits own value
grayscale(1) brightness(.6)
thumb-fig-gapgap-xs4px
thumb-placeholder-padding-xinset-md12px
thumb-placeholder-inset-ring-widthline-strong2px
thumb-radius-lg-radiusradius-lg16px
thumb-radius-md-radiusradius-md12px
thumb-radius-xl-radiusradius-xl24px
Type
thumb-fig-figcaption-fonttext-small-strong600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
thumb-fig-figcaption-span-font-weightweight-medium500
thumb-placeholder-fonttext-small-strong600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
Motion
thumb-durationmotion-fast160ms
thumb-easingease-standardcubic-bezier(0.2, 0, 0, 1)
thumb-active-durationmotion-instant100ms
thumb-img-develop-animationmotion-developsk-develop 560ms cubic-bezier(0, 0, 0, 1)
thumb-img-filter-durationmotion-base240ms
thumb-img-easingease-standardcubic-bezier(0.2, 0, 0, 1)
thumb-img-transform-durationmotion-slower560ms
thumb-light-durationmotion-slower560ms
thumb-light-easingease-standardcubic-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 picture whose alt is
alt(empty, so hidden, by default), with "selected" and "rejected" (muted) said after it, and withtitleormetaa figure captioned by them. WithonClickit is a toggle button that Tab reaches and Enter or Space presses, "pressed" whenselected: name it withlabel(oralt), since without one it has no name. In forced colours a selected frame keeps its ring, in Highlight. - 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.