Smart Ambient Aod Clock

Live Demos Hub
GitHub ↗

Smart Ambient Aod Clock

Interactive Shadcn-quality hypermedia component for Hyperstack.

Interactive Preview

Ambient AOD Mode 12:04 Thursday, October 15
🔋 94% • ⛅ 21°C • 🔔 2 Alarms

HTML Source

<!-- Smart Ambient Always-On Display (AOD) Clock -->
<div class="smart-ambient-aod-clock p-8 rounded-3xl bg-black border border-slate-900 shadow-2xl flex flex-col items-center justify-center text-center">
  <span class="text-[9px] font-extrabold uppercase tracking-widest text-slate-600 mb-2">Ambient AOD Mode</span>
  <span class="text-6xl font-black text-slate-100 tracking-tight font-mono">12:04</span>
  <span class="text-xs font-bold text-slate-500 mt-1">Thursday, October 15</span>
  <div class="flex items-center gap-3 mt-4 text-xs font-bold text-slate-400">
    <span class="flex items-center gap-1">🔋 94%</span>
    <span>•</span>
    <span class="flex items-center gap-1">⛅ 21°C</span>
    <span>•</span>
    <span class="flex items-center gap-1">🔔 2 Alarms</span>
  </div>
</div>