TypographicClockLite

Timeframe Typographic Clock is a beautifully crafted, real-time clock for Framer, made for designers who value refined typography, elegant structure, and full creative control.

Timeframe Typographic Clock is a beautifully crafted, real-time clock for Framer, made for designers who value refined typography, elegant structure, and full creative control. It’s perfect for hero sections, dashboards, landing pages, portfolios, and any layout that benefits from a quiet, sophisticated time display. With timezone awareness, advanced typographic controls, and optional blend modes, the component is both visually expressive and highly adaptable. ✨ Key Features Time zone-aware Show the viewer’s local time or select a custom timezone from the full IANA list. 12h / 24h formats Switch between international or editorial-style formats. Typographic precision Fine-tune font family, size, letter spacing, and individual vertical offsets for hours, minutes, and seconds. Show or hide seconds Choose between minimal HH:MM or detailed HH:MM:SS. Separator styles Colon · Dot · Slash · None. Theme-aware Auto, light, and dark themes with system detection. Custom font colour Override theme colours with optional blend modes for striking visual effects. Full alignment control Horizontal and vertical alignment options for perfect placement. Responsive by nature Behaves correctly inside stacks, flex layouts, and resizable frames. Performance-optimised real-time updates without layout shifts or heavy rendering. ⚙️ Property Controls Time Source : Viewer Local / Custom Timezone Custom Timezone : Full IANA timezone list Time Format : 12h / 24h Leading Zero on Hour Show Seconds Separator Style Theme : Auto / Light / Dark Font Colour (optional) Blend Mode (when custom colour is enabled) Alignment : Left / Centre / Right Vertical Alignment : Top / Centre / Bottom Typography : Font Family, Font Size, Letter Spacing Layout : Gap Between Units Offsets : Raise Hours / Minutes / Seconds Every setting is fully adjustable from the Framer sidebar — no code required. 💡 Use Cases Typographic hero sections Editorial & creative studio sites Analytics dashboards Personal portfolios Landing pages with subtle motion Digital signage & live displays ⚡ Why You’ll Love It Designed for creators who care about precision and aesthetics, Timeframe gives you a beautifully crafted typographic clock instantly, with the flexibility to customise every detail. Clean, expressive, and built for modern Framer workflows. 🚀 Want More Control? If you’re looking to go beyond time-only layouts, TypographicClock Pro adds: • Date + time, date-only, or time-only layouts• Per-element size, raise, and rotation for every unit• Flexible date formats, separators, and weekday options • Even more control for expressive editorial compositions Perfect for designers building bold hero sections, editorial layouts, or highly customised interfaces. 👉 Explore TypographicClock Pro on Framer Marketplace