# Morphing clock
> Live clock where each changing digit rolls to the next and sheds a few pixels; switching time zone rolls every digit at once.
- Element: `<px-clock>`
- React: `import { PxClock } from "@/components/lumesec/px-clock"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-clock.json
- Page: https://elements.lumesec.ai/components/pixel-lab/clock



Live preview: https://elements.lumesec.ai/view/px-clock

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-clock.js"></script>

<px-clock></px-clock>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-clock
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-clock.json
```

## Usage

React:

```tsx
import { PxClock } from "@/components/lumesec/px-clock";

export function Example() {
  return (
    <PxClock />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-clock.js"></script>

<px-clock></px-clock>
```

## Behaviour

A live clock where every changing digit rolls to the next one and sheds a few pixels. Switching time zone rolls every digit at once.

## Accessibility

* The time-zone switch is a `role="radiogroup"` with `aria-label="Time zone"`; each option has `role="radio"` and `aria-checked`. All options stay in the tab order and there is no arrow-key handling.
* The time is text in a `role="timer"` element with `aria-live="off"`. Assistive technology reads one visually hidden line with the time and zone, for example "14:05:09, UTC"; the rolling digits are `aria-hidden`.
* The 12-hour toggle is a native button with `aria-pressed`. The date line is plain text.
* Reduced motion: digits change in place without rolling or shedding pixels; the colon still pulses each second.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--card`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg`, `--ui-mono`, `--ui-muted`, `--ui-surface` and `--ui-track`.

## Notes

* The zones are fixed: Local, UTC, Tokyo and New York, formatted with `Intl.DateTimeFormat`. In 12-hour mode, AM or PM is appended to the date line.
* The digits are set in the monospace font, from 26 to 52px depending on the width. The pixel layer behind them animates continuously while on screen.