---
title: "iOS Clocks — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Text. Real-time iOS world clock"
canonical: "https://framer.elliotli.dev/component/ios-clocks"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/iOS Clocks

# iOS Clocks

Real-time iOS world clock

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

![iOS Clocks preview image 1](https://framer.elliotli.dev/og/component/ios-clocks/a0a50980cc55b0b1/1600x1200.jpg)

## Summary

Real-time iOS world clock

## Description

## What is Clocks iOS?

Clocks iOS is a premium real-time clock component that recreates the native iOS clock widget inside Framer. It features one main analog clock with city name and GMT offset, plus three smaller clocks with customizable timezone labels. Every hand animates in real-time with smooth second-hand movement. Ideal for personal sites, travel pages, dashboards, and agency portfolios that need a polished, functional time display.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Real-time animated clock hands with smooth second-hand sweep
    
-   Four independent timezone clocks with 30+ city presets including New York, London, Tokyo, Sydney, and more
    
-   Five curated themes: iOS Light, iOS Dark, Midnight, Sunset, and Minimal
    
-   Fully responsive layout that scales to any container size
    
-   iOS-accurate donut-style center dot, rounded or square hand styles, and toggleable hour numbers and minute ticks
    

## Controls inside Framer

### Theme

-   Theme preset selector (iOS Light, iOS Dark, Midnight, Sunset, Minimal)
    

### Main Clock

-   City timezone selector
    

### Clock 2 / Clock 3 / Clock 4

-   City timezone selector
    
-   Custom short label
    
-   Visibility toggle
    

### Colors

-   Card background
    
-   Clock face background
    
-   Pill background
    
-   Hour hand, minute hand, and second hand colors
    
-   Number, tick, and minute tick colors
    
-   City label, GMT text, and city name colors
    
-   Center dot and clock border colors
    

### Font

-   Font family and weight control
    

### Clock Style

-   Second hand visibility toggle
    
-   Hour numbers toggle (12, 3, 6, 9)
    
-   Minute ticks toggle
    
-   Hand style (Rounded or Square)
    

## Best use cases

-   Personal portfolio sites showcasing international availability across timezones
    
-   SaaS dashboards with live world clocks
    
-   Travel and lifestyle websites displaying destination times
    
-   iOS and mobile app showcase pages needing authentic native UI elements
    

Ship a pixel-perfect world clock in seconds — no custom code, no design compromises.

**Questions or custom requests?**

We design and build custom Framer components. Get in touch at[contact@teampixel.com.au](mailto:contact@teampixel.com.au).

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

-   All · #6430

## Details

- **Author**: Aidan Looker
- **Published**: 2026-03-24
- **Updated**: 2026-06-13
- **Added**: 2026-03-12
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing