Radial Timer

Component 2

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radial Timer to your project and fits it to your theme.

Code

How Radial Timer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}