---
title: "Tiny Clock — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Kevin Hardmeier · Interactive. A versatile analog clock component for Framer, designed to display any city’s time with style.Perfect for global agencies,…"
canonical: "https://framer.elliotli.dev/component/tiny-clock"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Tiny Clock

# Tiny Clock

[View on Framer](https://framer.com/marketplace/components/tiny-clock/?via=elliot-li)

![Tiny Clock preview image 1](https://framer.elliotli.dev/og/component/tiny-clock/4cbc1ae925d9bb7d/1600x1200.jpg)

## Summary

A versatile analog clock component for Framer, designed to display any city’s time with style.Perfect for global agencies, SaaS dashboards, portfolios, or landing pages, it lets…

## Description

A versatile analog clock component for Framer, designed to display any city’s time with style.Perfect for global agencies, SaaS dashboards, portfolios, or landing pages, it lets you create elegant and interactive time zones with full control over design.

Customize the clock face, colors, radius, and the size and roundness of the hour, minute, and second hands. Simply choose a timezone and the clock updates automatically.

## Instructions

-   Insert the component into your project.
    
-   Select the desired timezone from the property panel.
    
-   Adjust colors (background, border, hands) to match your brand.
    
-   Control the size, length, and roundness of each hand.
    
-   Preview live inside Framer to perfect your design.
    

## How It Works

-   **Timezone**: Choose any IANA timezone (e.g. Europe/Paris, America/New\_York).
    
-   **Face & Border Colors**: Match your brand palette.
    
-   **Hand Colors**: Customize hour, minute, and second hands individually.
    
-   **Hand Width & Length**: Control proportions.
    
-   **Hand Roundness**: Switch between sharp or rounded edges.
    
-   **Border Thickness**: Adjust outer ring style.
    

## Main Features

-   Real-time analog clock with timezone support.
    
-   Fully customizable design (colors, sizes, styles).
    
-   Smooth hand movement with second option.
    
-   Easy to integrate in any Framer project.
    
-   Perfect for multi-office agencies, SaaS, or portfolios.
    
-   Responsive and lightweight for modern websites.
    

## Use Cases

-   Agencies showing multiple office time zones.
    
-   SaaS dashboards needing real-time clocks.
    
-   Portfolios with stylish, animated time displays.
    
-   Landing pages or hero sections with global presence.
    
-   Contact pages showing your working hours.
    

Made with love by Le Lab Framer.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10238

## Details

- **Author**: Kevin Hardmeier
- **Price**: $5.00
- **Published**: 2025-10-08
- **Updated**: 2025-10-08
- **Added**: 2025-10-02
- **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