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.
Example
tsx
import { FlyingMascot } from '@kidcash/ui';
import mascotSrc from '@kidcash/ui/mascot.png';
<FlyingMascot src={mascotSrc} duration={10} top="15%" size={96} />Try it live
← Back to the playground to see FlyingMascot rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.