5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T9ee,

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! ❤

5b:[["$","$L5e",null,{"post":{"id":"01a04870-54c5-705f-9be4-d02a563470ec","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3cd45d2c-e771-49a0-84a0-f3d32c6e12ec","name":"Rubab Mubashar","slug":"rubab-mubashar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1687230/avatar-LHCUcbkmEckdjuCyjyr0FvWp7marhY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"40W6owfqOZwQOTxgcQNM","resolved":true,"title":"TimerFocus","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A clean and fully customizable timer for Framer.","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"The timer also supports "},{"type":"text","text":"three customizable color stages","marks":[{"type":"bold"}]},{"type":"text","text":", allowing the timer to visually change as time progresses."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start / Pause / Resume functionality"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reset button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatically switches between Start, Pause, and Resume states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three dynamic timer color stages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable buttons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable timer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom stage colors based on elapsed time"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Start / Pause / Resume / Reset Buttons"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Customize almost every part of the buttons:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Button label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Button width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font weight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontal padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vertical padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gap between icon and text"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Timer"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Customize the timer appearance:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timer text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timer font size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timer font weight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timer size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ring thickness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glow thickness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow blur radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Timer background color"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Dynamic Timer Stages"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"The timer automatically changes color depending on the elapsed time. You can customize each stage:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stage 1:","marks":[{"type":"bold"}]},{"type":"text","text":" 0:00 – 1:45"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stage 2:","marks":[{"type":"bold"}]},{"type":"text","text":" 1:45 – 3:00"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stage 3:","marks":[{"type":"bold"}]},{"type":"text","text":" 3:00 – 10:00"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Give each stage its own color to create visual feedback as the timer progresses."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Focus sessions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pomodoro timers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Workout websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Study timers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Productivity tools"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cooking timers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Event websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer prototypes"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it into your Framer project, customize it to match your design, and you're ready to go.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Free to use. Enjoy!","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"heart","emoji":"❤"}}]}]},"introduction":"A fully customizable timer","slug":"timerfocus","author":{"framerUserId":"3cd45d2c-e771-49a0-84a0-f3d32c6e12ec","name":"Rubab Mubashar","slug":"rubab-mubashar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1687230/avatar-LHCUcbkmEckdjuCyjyr0FvWp7marhY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3cd45d2c-e771-49a0-84a0-f3d32c6e12ec/01a0486e-6cff-72e9-9aea-9dba47aabb19.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-28T12:55:15.875Z","updatedAt":"2026-08-28T14:22:46.673Z","publishedAt":"2026-08-28T12:55:15.866Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/TimerFocus-cxyWz8.js@mjvN7xRmM8oG686Wf2v4","previewUrl":"https://amused-days-216872.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"e0c8f757-ccb9-407f-a749-5feaa4078c28","name":"Utilities","slug":"utilities"}],"lastSaveId":"mjvN7xRmM8oG686Wf2v4"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-28T12:55:16.423Z","updatedAt":"2026-08-28T12:55:16.423Z","reported":false}}],"$L60"]

Suggested for you