--- title: "World Clock — Free Framer component · Best of Framer" description: "Free Framer component · by Soyeb · Interactive. World Clock gives you a live, accurate time display anywhere on your site, without writing a single line of code." canonical: "https://framer.elliotli.dev/component/world-clock" --- [Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/World Clock # World Clock Live time for any city. Zero setup. [View on Framer](https://framer.com/marketplace/components/world-clock/?via=elliot-li) ![World Clock preview image 1](https://framer.elliotli.dev/og/component/world-clock/1de5faca83505417/1600x1200.jpg) ## Summary World Clock gives you a live, accurate time display anywhere on your site, without writing a single line of code. ## Description Showing time on a website sounds simple until you need it across different cities, timezones, and formats. World Clock gives you a live, accurate time display anywhere on your site, without writing a single line of code. Drop it into your canvas and instantly get a live, accurate **time display** for any city or timezone. Whether it’s a **city time**, a **global clock**, or the visitor’s own **local time**, everything updates in real time with zero setup. ## What makes this different Most clock components are either too basic or too rigid. This one is built for flexibility. - Show any **timezone clock** or auto-detect visitor location - Switch between **12 hour clock** and **24 hour clock** formats - Fully control layout, labels, spacing, and typography - Scale text fluidly across devices using clamp() It works as a real design component not just a basic **UTC clock** widget. ## Instructions - Copy and paste the **World Clock** component into your Framer project - Resize it freely - it works at any width or height ### \- Time Setup - Select a city or timezone from the dropdown - Or choose **Current Location** to auto-detect visitor time ### \- Live Behavior - Enable **Live Clock** to make it update every second - Disable it for a static time display ### \- Format Options - Switch between 12h (AM/PM) and 24h formats - Show or hide minutes and seconds - Enable fixed digits to prevent layout shifting ### \- Layout & Label - Show or hide the city label - Replace it with custom text (e.g. “HQ”, “NYC”) - Choose horizontal or vertical layout - Adjust alignment and spacing ### \- Styling - Customize fonts, colors, and sizes for: - Time - Label ### \- Fluid Typography (Optional) - Enable fluid font sizing - Automatically scales between mobile and desktop ## How It Works The component includes 30+ property controls grouped for flexibility. ### Properties Control ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-z1th8h8c-4WtFQpAyd1kkrjV6PsxAcpHsRF6eHS) - **Timezone Selection:** Choose from 70+ cities or use **auto location detection** for the visitor’s timezone. - **Live Clock:** Enable real-time ticking or keep a static time. - **Time Format:** Switch between **12 hour clock** and **24 hour clock**, with optional seconds display. - **Layout Controls:** Adjust direction, alignment, spacing, label position, and optional divider. - **Typography:** Independently style time and label with full font control. - **Fluid Font Size:** Scale text responsively using clamp-based sizing. ## Features - **Live ticking clock:** Updates every second in preview and live site. - **Global timezone support:** 70+ cities supported for accurate **city timezone** display. - **Auto location detection:** Shows the visitor’s **local time** automatically. - **Flexible formatting:** Supports both **12h and 24h clock** formats with full control. - **Stable layout:** Tabular digits prevent shifting while seconds update. - **Fluid responsive typography:** Optional scaling using CSS clamp(). - **Independent styling:** Full control over time and label appearance. - **Flexible layouts:** Horizontal or vertical with alignment and spacing control. - **Custom labels:** Replace city names with your own text. - **SSR safe:** Prevents hydration issues on published sites. - **Zero dependencies:** Built with pure React and Framer APIs. ## Use Cases - **Agency & studio sites:** Display team timezones across offices. - **Contact pages:** Show your current time for better communication. - **Event sites:** Display event time across multiple time zones. - **Freelancer portfolios:** Let clients know your working hours via **current time**. - **SaaS dashboards:** Show user-local **real time clock**. - **Office pages:** Show live clocks for each location. - **Landing pages:** Add real-time context to user experience. **Made with ❤️ by** [**Soyeb**](https://framer.link/market) © 2026 Soyeb. All rights reserved. **Refund Policy:** Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear. Have questions or need a custom Framer component? Reach out at [heysoyebali@gmail.com](mailto:heysoyebali@gmail.com) ## Rank history [How rankings work →](/terms#rankings) - All · #992 ## Details - **Author**: Soyeb - **Published**: 2026-04-30 - **Updated**: 2026-04-30 - **Added**: 2026-03-16 - **Categories**: Interactive ## More like this - [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component - [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side - [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews - [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step