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.
Live preview
Example
tsx
import { FloatingCoins } from '@kidcash/ui';
const [variant, setVariant] = useState<'rain' | 'float' | 'rise' | null>(null);
<FloatingCoins variant={variant} onComplete={() => setVariant(null)} />Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use FloatingCoins in your own app.