---
title: "TypographicClock Pro — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Unscripted · Interactive. Highly-Configurable Statement Clock"
canonical: "https://framer.elliotli.dev/component/typographicclock-pro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/TypographicClock Pro

# TypographicClock Pro

Highly-Configurable Statement Clock

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

![TypographicClock Pro preview image 1](https://framer.elliotli.dev/og/component/typographicclock-pro/16322416a3567c39/1600x1200.jpg)

## Summary

Highly-Configurable Statement Clock

## Description

**Typographic Clock Pro (Date + Time)** is designed for creators who want complete visual freedom. With full control over every time and date element, flexible layout options, and deep typographic customisation, it adapts to anything from bold hero sections to refined editorial designs.

### ✨ What's New in Pro

-   Full **Date + Time** support (weekday, month, day, year)
    
-   Individual **size, rotation, and offset** controls for _every_ element
    
-   Configurable **date formats**, separators, and arrangement
    
-   Advanced layout spacing for both **time** and **date** groups
    

✨ Key Features

-   **Live & precise:** Updates every second with no layout shift, built for smooth performance.
    
-   **Flexible time formats:** 12h or 24h, optional leading zero, and multiple separator styles.
    
-   **Customisable date formats:** DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD, day–month, month–day, or minimal.
    
-   **Advanced typographic styling:** Adjust font family, overall size, letter spacing — plus per-element controls (hours, minutes, seconds, weekday, month, day, year).
    
-   **Layout control:** Spacing for time, date, and the gap between them. Vertical & horizontal alignment options.
    
-   **Theme-aware:** Auto, light, dark, or fully custom font colour.
    
-   **Blend modes:** Optional for more expressive visual styles.
    

### ⚙️ Property Controls

-   Display Mode: Time only / Date only / Date + Time
    
-   Time Source: Viewer Local / Custom Timezone
    
-   Time Format: 12h / 24h
    
-   Show Seconds
    
-   Leading Zero
    
-   Time Separator Styles
    
-   Date Format Styles
    
-   Show Weekday
    
-   Weekday Position
    
-   Theme: Auto / Light / Dark
    
-   Custom Font Colour
    
-   Typography: Font, Size, Letter Spacing
    
-   Per-Element Controls:
    
    -   Size: Hours / Minutes / Seconds / Weekday / Month / Day / Year
        
    -   Offset (Raise): Hours / Minutes / Seconds / Weekday / Month / Day / Year
        
    -   Rotation: Hours / Minutes / Seconds / Weekday / Month / Day / Year
        
-   Layout:
    
    -   Time Element Gap
        
    -   Date Element Gap
        
    -   Time–Date Gap
        

### 💡 Use Cases

-   Editorial hero sections
    
-   Creative studio sites
    
-   Personal portfolios
    
-   Digital installations
    
-   Dashboards + live data UIs
    
-   Interactive layouts needing expressive time/date displays
    

### ⚡ Why You’ll Love It

Typographic Clock Pro gives you complete creative control — every element, every angle, every detail. It’s expressive, precise, and designed for designers who want a clock that feels more like a design tool than a widget.

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

-   All · #7142

## Details

- **Author**: Unscripted
- **Price**: $8.00
- **Published**: 2025-12-12
- **Updated**: 2026-02-13
- **Added**: 2025-12-05
- **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