Fluid Countdown
A countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and Motion.
7 KB
•Updated on September 12, 2026
Full-screen countdown with fluid rolling numerals, interactive controls, and accessible motion.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-fluid-countdownUsage
Code
import { FluidCountdown } from '@/components/spaceui/fluid-countdown'
export default function Timer() {
return <FluidCountdown duration={60} autoStart loop label="Launch in" accentColor="#6366f1" />
}Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page