Jinx-Vision

Jinx-Vision is a Windows HDR-aware color picker built with Tauri (Rust backend) and Next.js (frontend).

It captures a frozen frame from your primary monitor, samples pixels in HDR space, and shows two outputs side-by-side:

• Traditional picker value (source-style SDR value many normal pickers return)
• HDR-corrected SDR value (what the color visually maps to under HDR-aware processing)

Why this exists

On HDR desktops, traditional pickers often return values that do not match what your eye sees on screen. Jinx-Vision makes that mismatch explicit and gives you both values.

Features

• Windows Graphics Capture (WGC) pipeline in Rust
• Frozen-frame sampling (screen stays static while picking)
• Primary-monitor scoped capture
• Side-by-side comparison UI:
  • HDR Source panel (traditional picker-style values)
  • SDR Output panel (HDR-corrected values)
• Export formats:
  • #RRGGBB
  • rgb(r, g, b)
  • hsl(h s% l%)
  • text-[#RRGGBB]
  • bg-[#RRGGBB]
• Global shortcut activation: Alt+Shift+P
• Alt toggle while active: pause tracking (free mouse) / resume tracking
• Click-to-copy with keyboard shortcuts
• Transparent overlay UI

Tech stack

• Frontend: Next.js (App Router) + TypeScript
• Backend: Rust + Tauri v2
• Color processing: palette
• Windows capture/interop: windows crate + D3D11 + WGC

Project structure

• src/ - frontend overlay UI
• src/lib/ - frontend Tauri API wrappers and shared TS types
• src-tauri/src/capture/ - WGC and frame extraction
• src-tauri/src/color/ - tone-mapping / format conversion
• src-tauri/src/picker/ - pixel sampling
• src-tauri/src/commands/ - Tauri commands
• src-tauri/src/state/ - app state and payload types

Requirements

• OS: Windows 10 1903+ or Windows 11
• Node.js: 20+
• pnpm: 10+
• Rust toolchain (rustup, cargo, rustc)
• Microsoft C++ Build Tools (for Rust native builds on Windows)
• WebView2 Runtime (usually already present on modern Windows)

Install

1. Clone the repository

git clone <your-repo-url>
cd hdr_colorpicker

2. Install JavaScript dependencies

pnpm install

3. Verify Rust toolchain

rustc -V
cargo -V

4. Run the desktop app (dev)

pnpm dev:tauri

Build

• Web build only:

pnpm build:web

• Desktop build:

pnpm build:tauri

Usage

1. Start app (pnpm dev:tauri)
2. Press Alt+Shift+P to activate picker and freeze current frame
3. Move cursor to sample a pixel
4. Left-click overlay to copy selected format
5. Press Alt to toggle free-mouse mode (pause/resume tracking)
6. Press 1..5 for quick-copy formats
7. Press Enter to copy current selection
8. Press Esc or right-click to cancel picker

Understanding the two panels

• HDR Source (traditional picker-style): Values comparable to non-HDR-aware pickers.

• SDR Output (HDR-corrected): Values produced by Jinx-Vision's HDR-aware pipeline for perceptual SDR equivalence.

NPM scripts

• pnpm dev - run Next.js dev server
• pnpm dev:web - run Next.js dev server
• pnpm dev:tauri - run Tauri desktop app in dev
• pnpm build - build frontend
• pnpm build:web - build frontend
• pnpm build:tauri - build desktop app
• pnpm lint - lint frontend code

Troubleshooting

• cargo metadata ... program not found

  • Rust is not installed or not in PATH.

• Window opens with incorrect size/position

  • Jinx-Vision resyncs to primary monitor at setup and on picker activation.
  • If behavior is off, restart app after changing display scaling/layout.

• Traditional value still differs from another picker

  • Different pickers use different capture pipelines/color-management paths.
  • Compare on same monitor, same scaling, same HDR/SDR settings.

Contributing

1. Fork the repo
2. Create a feature branch
3. Make your changes
4. Run checks:

pnpm lint
pnpm build

5. Open a pull request

License

MIT - see LICENSE.

Security note

This app reads screen pixels locally to provide color sampling. No network upload is required by design.