Live Date Display is a premium Framer code component that shows the current date in real-time with a beautiful notepad-inspired design featuring binder rings. Built for modern dashboards, landing pages, and web apps, it combines elegant glassmorphism aesthetics with powerful customization options. Display dates across multiple timezones with automatic updates and smooth micro-animations.
Real-time updates – Automatically refreshes with live date/time display
24+ world timezones – Built-in timezone selector
Premium glassmorphism – Gradient backgrounds with customizable glass intensity and blur effects
Notepad aesthetics – Distinctive binder ring design with large date numbers and clean typography
Micro-animations – Pulse, fade, or shimmer effects that trigger on date changes
Three theme presets – Light, Dark Neon, and Minimal variants with instant switching
Format (Date Only / With Month / With Weekday)
Show Time toggle
Timezone selector (24+ options)
Theme preset (Light / Dark Neon / Minimal)
Accent color
Day number color (Light & Minimal themes)
Border color
Shadow glow color
Glass intensity (0-100%)
Border radius
Native Framer Font control (family, size, weight)
Style (Pulse / Fade / Shimmer / None)
SaaS dashboards – Add live date/time widgets to analytics interfaces and more
Hero sections – Create dynamic landing page headers with real-time date displays
Event websites – Show current date with timezone support for global audiences
Portfolio sites – Add premium, animated date displays to personal or agency websites
Web apps – Integrate timezone-aware date components into productivity tools
Perfect for designers and developers who want a production-ready, customizable date component without writing code. Drop it on your canvas, customize the colors, and publish.
Aidan Looker
