<px-jog>Custom elementControls you can feelFree
Jog wheel
Pixel jog wheel that keeps spinning with inertia after release, driving a running timecode and a filmstrip that scrubs underneath.
Installation
pnpm dlx shadcn@latest add @lumesec/px-jogFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-jog.jsonUsage
import { PxJog } from "@/components/lumesec/px-jog";
export function Example() {
return (
<PxJog />
);
}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"andaria-label="Jog wheel. Arrow keys step one frame, Shift steps one second.". aria-valuetextcarries the current timecode;aria-valuenow,aria-valueminandaria-valuemaxare 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.
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.
Related
Was this page helpful?