# Alarm Clock

> A copy-paste Watch Faces & Clocks component from NudaUI. Pure HTML + CSS, zero dependencies, MIT licensed.

| | |
| --- | --- |
| Id | `alarm-clock` |
| Category | Watch Faces & Clocks (`watch-faces`) |
| Languages | html, css |
| Needs JavaScript | no |
| Licence | MIT |
| JSON | https://nudaui.dev/api/components/alarm-clock.json |

## Code

Paste this verbatim. Nothing here needs a build step.

### HTML

```html
<div class="nuda-alarm" role="img" aria-label="Alarm 06:30 AM ringing">
  <div class="nuda-alarm__bell nuda-alarm__bell--l"></div>
  <div class="nuda-alarm__bell nuda-alarm__bell--r"></div>
  <div class="nuda-alarm__body">
    <span class="nuda-alarm__time">06:30</span>
    <span class="nuda-alarm__label">WAKE UP</span>
  </div>
  <div class="nuda-alarm__foot nuda-alarm__foot--l"></div>
  <div class="nuda-alarm__foot nuda-alarm__foot--r"></div>
</div>
```

### CSS

```css
/* Alarm Clock
   Bells on top, feet on the bottom. The whole clock shakes when ringing.
   Toggle the .ringing class in production to start/stop the shake. */

.nuda-alarm {
  --bg: #0c0c10;
  --accent: #ffb45e;
  position: relative;
  display: inline-block;
  padding: 28px 24px 18px;
  animation: nuda-alarm-shake 1.2s ease-in-out infinite;
}

.nuda-alarm__body {
  position: relative;
  width: 130px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1a20, #09090b);
  border: 2px solid #1a1a20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: inset 0 0 0 4px #0c0c10;
}

.nuda-alarm__time {
  font: 700 28px ui-monospace, Menlo, monospace;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 180, 94, 0.35);
}

.nuda-alarm__label {
  font: 500 9px system-ui;
  letter-spacing: 2px;
  color: #a0a0a8;
}

.nuda-alarm__bell {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 18px;
  background: #1a1a20;
  border: 2px solid #2a2a30;
  border-radius: 50% 50% 6px 6px;
}
.nuda-alarm__bell--l { left: 22px; transform: rotate(-25deg); }
.nuda-alarm__bell--r { right: 22px; transform: rotate(25deg); }

.nuda-alarm__foot {
  position: absolute;
  bottom: 6px;
  width: 14px;
  height: 10px;
  background: #1a1a20;
  border: 1px solid #2a2a30;
  border-radius: 3px 3px 0 0;
}
.nuda-alarm__foot--l { left: 34px; transform: skewX(-15deg); }
.nuda-alarm__foot--r { right: 34px; transform: skewX(15deg); }

@keyframes nuda-alarm-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-2deg); }
  20%, 40%, 60%, 80%      { transform: translateX(2px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-alarm { animation: none; }
}
```

### Preview-only CSS

Extra styling the live preview injects. Copy it only if you want the demo's exact framing.

```css

      .nuda-alarm{--bg:#0c0c10;--accent:#ffb45e;position:relative;display:inline-block;padding:28px 24px 18px;animation:_alarmshake 1.2s ease-in-out infinite}
      .nuda-alarm__body{position:relative;width:130px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#1a1a20,#09090b);border:2px solid #1a1a20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:inset 0 0 0 4px #0c0c10}
      .nuda-alarm__time{font:700 28px ui-monospace,Menlo,monospace;color:var(--accent);text-shadow:0 0 10px rgba(255,180,94,.35)}
      .nuda-alarm__label{font:500 9px system-ui;letter-spacing:2px;color:#a0a0a8}
      .nuda-alarm__bell{position:absolute;top:8px;width:24px;height:18px;background:#1a1a20;border:2px solid #2a2a30;border-radius:50% 50% 6px 6px}
      .nuda-alarm__bell--l{left:22px;transform:rotate(-25deg)}
      .nuda-alarm__bell--r{right:22px;transform:rotate(25deg)}
      .nuda-alarm__foot{position:absolute;bottom:6px;width:14px;height:10px;background:#1a1a20;border:1px solid #2a2a30;border-radius:3px 3px 0 0}
      .nuda-alarm__foot--l{left:34px;transform:skewX(-15deg)}
      .nuda-alarm__foot--r{right:34px;transform:skewX(15deg)}
      @keyframes _alarmshake{0%,100%{transform:translateX(0) rotate(0)}10%,30%,50%,70%,90%{transform:translateX(-2px) rotate(-2deg)}20%,40%,60%,80%{transform:translateX(2px) rotate(2deg)}}
      @media(prefers-reduced-motion:reduce){.nuda-alarm{animation:none}}
    
```

## Using it

- Drop the HTML wherever you need it — JSX, Blade, Jinja, ERB, or a plain `.html` file.
- Put the CSS in a global stylesheet, a `<style>` block, or whatever your build expects.
- Colour, size and timing read from CSS custom properties: override them on `:root` or any parent.
- Class names are prefixed `nuda-*`, so nothing collides with Tailwind utilities.

---

Canonical HTML version: https://nudaui.dev/components/alarm-clock