Typography & motion
FlyingMascot
Absolutely-positioned image that drifts across the viewport on a 10-second loop. Pair with KidCash mascots or your own brand character.
FlyingMascot absolutely-positions a mascot illustration that drifts horizontally across the viewport on a configurable loop, with subtle tilt and bob. Designed for hero sections where a little personality goes a long way.
The kit ships the canonical KidCash astronaut mascot at @kidcash/ui/mascot.png — drop your own src to use a custom character.
Live preview
loops every 10s
Example
tsx
import { FlyingMascot } from '@kidcash/ui';
import mascotSrc from '@kidcash/ui/mascot.png';
<FlyingMascot src={mascotSrc} duration={10} top="15%" size={96} />Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use FlyingMascot in your own app.