Animated stickers
bank20baht-stickers is a growing set of playful animated illustrations for empty states, onboarding and
feature callouts. Each sticker is a flat drawing with a thick ink outline and an extruded slab side, animated on
After Effects keyframe presets that are replayed the way lottie-web plays them. <baht-sticker> plays them on
canvas and takes its colours from the page’s tokens: pick another banknote in the corner, or switch to dark mode,
and the stickers below change with the site. Hover one to replay it.
walletmac-minithinkpad-l380macbook-airipad-gen8iphone-17redmi-note-9s-pronas-2baypower-stationstudio-monitorsreceiptincomeexpensecoinscalculatorbudget-jarpie-chartcalendar-monthgoalover-budgetsaving-streakempty-stateexport-filescan-slipinterestbts-cardmotorbike-taxiconvenience-bagelectric-billphone-topuprentmarket-basketlotterytemple-donationfuelshopping-boxsalaryangpaofreelancespirit-housethai-housewooden-windowwater-jarstreet-food-cartplastic-stoolpower-polestreet-signmailbox-thaichedimarigoldphuang-malaibanana-treebamboolong-tail-boatbanana-leafthai-lanternlotussunmooncloudrain-cloudstormrainbowstarshooting-starrockpotted-plantcactusmonsteraflowertuliptreepalm-treecampfiretentconfettimusic-notemedia-playerpaper-boatkitealarm-clockbookshot-drinklampkeyshieldbearlaptoprouterserverrackmini-pcall-in-onenotebooknashome-routerdatabasefirewallsmartphoneclassic-phonetabletload-balancerswitchcore-switchaccess-pointpatch-panelmodemvpn-gatewayserver-cabinetblade-chassisstorage-arraytape-libraryupspdukvmcoolingdesktop-towermonitorprinterip-phonecctvbadge-readersmart-tvposiot-sensorhsmotpsmsemailregistersupportid-cardfingerprintface-idpasswordverifiedqr-codetwo-factorpiggy-bankstockbaht-notedollar-notebondgold-barkapraonoodle-souppad-see-ewtrain-tickettuk-tukcha-yenmango-sticky-ricecertificatessl-certificateremote-desktopcursorkeyboardterminaltunnelwake-on-lanlock-screenai-agentfiletrashcopy-filescompareremote-folderphotohard-driveusb-drivesnipscissorsclipboardhighlightereyedroppertimersnapshotsTo draw how machines talk with them (a laptop, a router, the internet, servers, packets travelling between), see the sticker graph and its builder.
Install
Section titled “Install”npm i bank20baht-stickersimport 'bank20baht-stickers/all'; // defines <baht-sticker> and registers every sticker by name<baht-sticker name="piggy-bank" enter="0.2" style="width: 160px"></baht-sticker>For a lean bundle, import one sticker and the element:
import 'bank20baht-stickers/element';import { registerSticker } from 'bank20baht-stickers';import { piggyBank } from 'bank20baht-stickers/icons/piggy-bank';
registerSticker(piggyBank); // then <baht-sticker name="piggy-bank">, or set el.icon = piggyBankThe element is block-level and its canvas fills its width, so size it with CSS.
| Attribute / property | What it does |
|---|---|
name |
A registered sticker |
icon (property) |
An icon object; wins over name |
palette (property) |
Fixed colours instead of the tokens |
once |
Play once when first shown, then rest on the still frame |
offset |
Frames ahead of the page clock, to put neighbours out of phase |
enter |
Seconds after first shown to pop in on the bounce entrance |
replay-on-hover |
Replay from frame 0 when the pointer enters |
line |
Outline weight as a multiple of the sticker’s own: 0.6 thinner, 1.5 bolder |
label |
Accessible name; the sticker’s name by default |
Under reduced motion a sticker shows its still frame. One animation-frame loop drives every sticker on the page, and stickers off screen or holding still cost no paint.
Colours follow the theme
Section titled “Colours follow the theme”Stickers never use hex colours, only palette slots. Without a palette, each slot reads a token where the
element sits, so stickers follow the banknote palette and dark mode:
| Slot | Token | Used for |
|---|---|---|
main |
--baht-primary |
bodies |
deep |
--baht-neutral |
the dark second colour |
tint |
--baht-color-primary-tint |
pale fills |
gold |
--baht-gold-400 |
coins, stars, bells |
ok |
--baht-success |
checks, success |
hot |
--baht-error |
hearts, alerts |
Fixed palettes ship too, for places with no tokens: BAHT (฿20), PALETTES.note50, note100, note500,
note1000, and the helpers brand(a, b), mono(hex) and hue(deg).
New stickers
Section titled “New stickers”The repo has a Claude Code skill, /baht-sticker, that draws new stickers into the package:
/baht-sticker a receipt printing out of a slot, motion slideName the object and what it does; the verb picks the motion preset (a wallet tosses, a lock clasps, a coin bounces, a stamp presses). The skill draws and rigs the parts, renders contact sheets to check the motion, and runs the package’s checks before the sticker joins the set in the next release.
Credit
Section titled “Credit”The runtime and motion presets are derived from fun-isometric by Kelvin Adithya (MIT).