# Jog wheel
> Pixel jog wheel that keeps spinning with inertia after release, driving a running timecode and a filmstrip that scrubs underneath.
- Element: `<px-jog>`
- React: `import { PxJog } from "@/components/lumesec/px-jog"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-jog.json
- Page: https://elements.lumesec.ai/components/pixel-lab/jog



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

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

<px-jog></px-jog>
```

## Installation

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

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-jog.json
```

## Usage

React:

```tsx
import { PxJog } from "@/components/lumesec/px-jog";

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

HTML:

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

<px-jog></px-jog>
```

## Behaviour

Spin the wheel and let go: it keeps turning with inertia, the timecode runs and the filmstrip scrubs underneath. Fast spins leave ghosted teeth.

## Keyboard

| Keys                  | Action                       |
| --------------------- | ---------------------------- |
| ArrowRight / ArrowUp  | Step forward one frame.      |
| ArrowLeft / ArrowDown | Step back one frame.         |
| Shift + Arrow keys    | Step 24 frames (one second). |

## Accessibility

* The canvas is focusable with `role="slider"` and `aria-label="Jog wheel. Arrow keys step one frame, Shift steps one second."`.
* `aria-valuetext` carries the current timecode; `aria-valuenow`, `aria-valuemin` and `aria-valuemax` are not set.
* The speed label ("Paused", "Scrub 1.2×", "Rewind 2.0×") is an `aria-live="polite"` region.
* Reduced motion: the wheel stops as soon as it is released instead of coasting, and fast spins leave no ghosted teeth.

## 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 `--foreground`, `--lumesec` and `--muted-foreground`.

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

## Notes

* The filmstrip is generated demo footage: two minutes at 24 fps (2,880 frames), 48 frames per wheel revolution, starting at frame 60. The wheel bounces softly off either end.
* The timecode reads `00:MM:SS:FF`. The component fires no events.
* The canvas is 268px tall.