Typography & motion
FloatingCoins
Three motion variants: rain, float, rise. 3D-ish flip, sway, depth-driven shadow per coin. Built on framer-motion.
FloatingCoins is the kit's signature finance flourish. Full-viewport overlay of gold-coin SVGs with a 3D-ish flip, slight sway, and depth-driven drop shadow on each coin.
Three variants — rain (top-down, fastest), float (bidirectional, slowest), rise (bottom-up, momentum-driven). Pair with the <Confetti> component for big-deposit moments.
Example
tsx
import { FloatingCoins } from '@kidcash/ui';
const [variant, setVariant] = useState<'rain' | 'float' | 'rise' | null>(null);
<FloatingCoins variant={variant} onComplete={() => setVariant(null)} />Try it live
← Back to the playground to see FloatingCoins rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.