TypographicClock Pro
Beautiful editorial date + time clock with rich typographic controls, flexible formats, separators, and weekday options. Highly configurable for creative layouts.
Made with Workshop
Build your own component with AI
Beautiful editorial date + time clock with rich typographic controls, flexible formats, separators, and weekday options. Highly configurable for creative layouts.
Made with Workshop
Build your own component with AI
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.
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.
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
Editorial hero sections
Creative studio sites
Personal portfolios
Digital installations
Dashboards + live data UIs
Interactive layouts needing expressive time/date displays
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.
