TimerFocus

A fully customizable timer

A clean and fully customizable timer for Framer. Start the timer and the button automatically changes to Pause. Pause it and it becomes Resume. Reset the timer anytime with the dedicated Reset button. The timer also supports three customizable color stages , allowing the timer to visually change as time progresses. Features Start / Pause / Resume functionality Reset button Automatically switches between Start, Pause, and Resume states Three dynamic timer color stages Fully customizable buttons Fully customizable timer Custom stage colors based on elapsed time Start / Pause / Resume / Reset Buttons Customize almost every part of the buttons: Button label Background color Text color Icon color Icon Border color Border width Button width Border radius Font size Font weight Horizontal padding Vertical padding Icon size Gap between icon and text Timer Customize the timer appearance: Timer text color Timer font size Timer font weight Timer size Ring thickness Glow thickness Shadow blur radius Timer background color Dynamic Timer Stages The timer automatically changes color depending on the elapsed time. You can customize each stage: Stage 1: 0:00 – 1:45 Stage 2: 1:45 – 3:00 Stage 3: 3:00 – 10:00 Give each stage its own color to create visual feedback as the timer progresses. Perfect For Focus sessions Pomodoro timers Workout websites Study timers Productivity tools Cooking timers Interactive landing pages Event websites SaaS websites Framer prototypes Drop it into your Framer project, customize it to match your design, and you're ready to go. Free to use. Enjoy! ❤

A fully customizable timer