Timely is a dynamic clock that displays the current time, date, and location based on the user’s timezone, with automatic detection and customizable formatting options.
Make it with Workshop
Build your own component with AI
Timely is a dynamic component that automatically displays the user’s current time and location based on their timezone. It’s fully customizable, allowing you to control how the information is displayed.
Detects the user’s timezone and shows their city and country.
Displays the current time with support for 12h (AM/PM) or 24h formats.
Includes date display with short, long, or numeric formats.
Updates in real time with adjustable refresh intervals (1s, 5s, 10s).
Compact Mode for abbreviated locations like NYC, US or BA, AR.
Custom separators between date, time, and location.
Fallback options if no location can be detected.
You can adjust everything directly from the Framer controls, including:
Typography and text color
Show or hide date, time, or location
Time format (AM/PM or 24h)
Date format
Show seconds
Compact location display
Separator style and symbols
Refresh rate
Default/fallback city and country
Dashboards
Hero sections
Global interfaces
Time-focused landing pages