Components
This is an animated circular timer with gradient stroke, tick marks, and responsive play/pause/reset controls, built using framer-motion for smooth state transitions and microinteractions. Perfect for productivity apps, dashboards, Pomodoro tools, meditation timers, or any use case requiring a visually engaging and customizable countdown/timer experience.
Loading preview...
import { Timer } from "@/components/ui/radial-countdown-timer";
export default function Demo() {
return (
<div className="min-h-screen flex items-center justify-center bg-background">
<Timer
initialTime={1}
duration={10} // 10 seconds duration
strokeWidth={24} // thick progress line
tickLength={12} // smaller tick marks
tickColor="rgba(0,0,0,0.2)"
textColor="rgb(31, 41, 55)" // gray-800
titleColor="rgb(107, 114, 128)" // gray-500
gradientFrom="#FFD700" // gold
gradientVia="#FFC107" // amber
gradientTo="#FF8F00" // orange
primaryButtonColor="rgb(31, 41, 55)" // gray-800
primaryButtonHover="rgb(55, 65, 81)" // gray-700
secondaryButtonColor="rgb(243, 244, 246)" // gray-100
secondaryButtonHover="rgb(229, 231, 235)" // gray-200
title="Work Time"
className="w-full max-w-md mx-auto bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-xl border border-gray-200"
/>
</div>
);
}