Digital Clock

A card clock that ticks once a second through sv-text-flow. Time strings keep a fixed length, so the default index mode lines the digits up. Swap the Intl.DateTimeFormat options to change the locale or switch to 12-hour time.

Reduced Motion

Your system is set to reduce motion, so the animations shown on this page will not play for you.

Code

The following example assumes that you have imported the component and set up the theme.

<div class="clock-example">
21 collapsed lines
  <div class="clock-card">
    <sv-text-flow class="clock-time"></sv-text-flow>
    <span class="clock-date"></span>
  </div>

  <script type="application/x-typescript" module>
    const time = document.querySelector<TextFlow>(".clock-time")!;
    const date = document.querySelector<HTMLSpanElement>(".clock-date")!;

    const timeFormat = new Intl.DateTimeFormat("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
    const dateFormat = new Intl.DateTimeFormat("en-GB", { weekday: "long", day: "numeric", month: "long" });

    const tick = () => {
      const now = new Date();
      time.value = timeFormat.format(now);
      date.textContent = dateFormat.format(now);
    };

    tick();
    setInterval(tick, 1000);
  </script>
</div>

<style>
34 collapsed lines
  .clock-example {
    display: flex;
    justify-content: center;
    padding-block: 1.5em;
  }

  .clock-card {
    display: grid;
    gap: 0.3em;
    justify-items: center;
    padding: 1.25em 2.25em;
    background-color: var(--sv-gray-6);
    border-radius: var(--sv-bdr-rad-md);

    .clock-time {
      --sv-text-flow-dur: 0.7s;

      &::part(text) {
        font-size: 2.5rem;
        font-weight: 600;
      }
    }

    .clock-date {
      font-size: 0.85em;
      color: var(--sv-gray-2);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .clock-time {
      --sv-text-flow-dur: 0s;
    }
  }
</style>