# HDR Web Plugin

Drop-in JavaScript plugin that gives normal web pages a pure-black HDR media
stage. It detects `dynamic-range`, `color-gamut`, and CSS wide-gamut support,
then injects an HDR PNG or hardware-decoded HDR10 video layer when the output
path reports HDR capability. SDR-only environments keep a low-power fallback.

## Run

```bash
npm run build
npm run media:hdr
npm test
npm start
```

Open `http://localhost:4173`.

## Inject Into A Page

```html
<script src="/dist/hdr-web-plugin.js?v=0.6.2" defer></script>
```

The script auto-runs in the browser. You can tune it without writing custom JS:

```html
<script
  src="/dist/hdr-web-plugin.js?v=0.6.2"
  defer
  data-hdr-media="true"
  data-hdr-media-type="image"
  data-hdr-image-src="/media/hdr-landing-prism.png"
  data-hdr-text="true"
  data-hdr-text-boost="2.8"
  data-hdr-blackout="true"
  data-hdr-badge="true"
></script>
```

For video-backed motion:

```html
<script
  src="/dist/hdr-web-plugin.js?v=0.6.2"
  defer
  data-hdr-media="true"
  data-hdr-media-type="video"
  data-hdr-video-src="/media/hdr-galaxy-fireworks.mp4"
  data-hdr-webm-src="/media/hdr-galaxy-fireworks.webm"
  data-hdr-effects="false"
  data-hdr-overlay="false"
  data-hdr-scanlines="false"
  data-hdr-blackout="true"
  data-hdr-badge="true"
></script>
```

The plugin also exposes:

```js
window.HDREnhancer.enhance({ intensity: 1.2, text: true, textBoost: 2.8 });
window.HDREnhancer.disable();
window.HDREnhancer.toggle();
```

Set `data-hdr-auto="false"` when you want to load the plugin but start it
manually.

Real HDR output still depends on the physical display, OS HDR setting, browser
support, and source media. Unsupported environments get an SDR neon fallback.