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

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

Open http://localhost:4173.

Inject Into A Page

<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:

<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:

<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:

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.