5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T99a,

A clean, customizable live clock component for Framer with full timezone support, 12/24-hour format, optional seconds and day, stable layout with no digit shift, and complete styling control. Perfect for portfolio websites, agency pages, and any site where showing live time adds a personal touch.

About this Component

A lightweight, real-time clock component built for designers who want to display the current time for any location in the world without touching any code. Drop it into your Framer project, pick your timezone, and it just works.

Whether you're a freelancer wanting to show clients what time it is where you are, or building a site that needs a live time display, this component handles it cleanly and stays out of your way.

Features

Live time updates every second
Full IANA timezone support, choose any major city or timezone in the world
Stable layout, no width shift when digits change, works with any proportional font
My Location option that auto-detects your local timezone
12-hour and 24-hour format toggle
Leading zero toggle, available in 12-hour mode
Show or hide seconds
Show or hide the day
Change the separator (default is ":")
Change the text case (Normal, Uppercase, Lowercase)
Full font control, works with any font in your Framer project
Full color control for the time display

Best For

Freelancer and agency portfolio websites
Personal websites and creative portfolios
Contact and availability sections
Any page where showing a live time adds context for visitors

How to Use

Click the "Copy Component" button and paste it into your Framer project
Select the desired timezone from the dropdown or use "My Location"
Set your preferred time format, 12h or 24h
Toggle seconds, day, and leading zero as needed
Change the separator as needed
Change the text case as needed
Match the font and colors to your design
Enjoy!

5a:[["$","$L5d",null,{"post":{"id":"019d9f73-93ac-7eea-b9a7-7956c2d30526","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c74393c2-214e-406b-9cc7-241dad16780a","name":"Adi Purdilă","slug":"adipurdila","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c74393c2-214e-406b-9cc7-241dad16780a/phyacdsd","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DsvunnWdHjhwra6lWS43","resolved":true,"title":"Timezone Clock","body":"$5e","bodyJson":null,"introduction":"Live clock with timezone & formatting","slug":"timezone-clock","author":{"framerUserId":"c74393c2-214e-406b-9cc7-241dad16780a","name":"Adi Purdilă","slug":"adipurdila","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c74393c2-214e-406b-9cc7-241dad16780a/phyacdsd","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/DsvunnWdHjhwra6lWS43/timezone-clock-CQ0d1HnTZNSKf6SpxA1LcnxmgoDrAY","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-07T10:33:44.588Z","updatedAt":"2026-04-16T15:02:57.822Z","publishedAt":"2026-04-18T07:17:25.036Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/SimpleTimezoneClock-JWfNAQ.js@cOwWfcLmXODeRGEPkHae","previewUrl":"https://fulfilled-sandwich-162262.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"cOwWfcLmXODeRGEPkHae","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-18T07:17:25.036Z","updatedAt":"2026-04-18T07:17:25.036Z","reported":false}}],"$L5f"]

Suggested for you