About World Clock

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

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

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