One-page HDR media for any website

HDR Web Plugin

Add one JavaScript file, keep one page, and place HDR media behind your existing UI. The plugin handles the black stage, HDR image or video layer, text boost, and runtime toggle.

Get the script Use your HDR asset

Everything below, same page

Single page

Install, customize, and control it in one flow.

The public page now works like one product surface. Every navigation item stays on this page, and the same install snippet powers the live HDR preview.

Install

One tag. No rebuild.

Paste the hosted file into any page. The plugin detects HDR-capable output and injects the HDR layer behind your content.

Load

Use the hosted script while testing.

Choose

Point it at an HDR PNG or HDR video.

Control

Toggle or swap sources after load.

<script
  src="https://hdr-web-plugin-demo.pages.dev/dist/hdr-web-plugin.js?v=0.6.2"
  defer
  data-hdr-media="true"
  data-hdr-media-type="image"
  data-hdr-image-src="https://hdr-web-plugin-demo.pages.dev/media/hdr-landing-prism.png"
  data-hdr-text="true"
  data-hdr-text-boost="2.8"
  data-hdr-blackout="true"></script>

Assets

Swap the source, keep the stage.

Your page remains a normal page; the HDR image or video is the luminous layer behind it.

HDR PNG

Best for polished landing pages and product hero art.

data-hdr-media-type="image"
data-hdr-image-src="/media/your-hdr.png"

HDR Video

Best for motion. HEVC for Apple browsers, WebM fallback elsewhere.

data-hdr-media-type="video"
data-hdr-video-src="/media/your-hdr.mp4"
data-hdr-webm-src="/media/your-hdr.webm"

Runtime

Designed to disappear into your stack.

No framework, no canvas workload by default, and a reversible media stage.

window.HDREnhancer.enhance({
  media: true,
  mediaType: "image",
  imageSrc: "/media/your-hdr.png",
  text: true,
  textBoost: 2.8,
  blackout: true
});

window.HDREnhancer.disable();
window.HDREnhancer.toggle();

Specs

One consistent surface for the whole plugin.

Base Pure black

Forces the foundation to black so HDR highlights have contrast.

Media PNG / HEVC / WebM

Supports swappable HDR image and video sources.

Detection HDR-aware

Checks dynamic range, color gamut, and dynamic-range-limit support.

Power Low JS load

Uses browser media decoding instead of heavy JavaScript animation.