HDR highlights for the web

Make pixels brighter.

A JavaScript package for brighter-than-white text and image highlights. Wrap content, set its intensity, and let compatible screens reveal the extra light.

npm install github:echohtp/brightpixels

Text emphasis

Attention follows light.

Most pages make every important idea compete with the same ordinary white. Brightpixels lets a few words rise above that ceiling. Use it when the reader reaches the one fact that matters, the proof behind a claim, or the action that should not be missed.

Restraint makes the contrast work. Keep the surrounding text calm, then reserve HDR for the sentence worth remembering.

Select it. Copy it. The letters stay real.

Image highlights

Let highlights shine.

Each pair uses the same source image. Brightpixels lifts its lightest pixels on the right. The difference depends on your browser and display; both images may look the same on a standard-range screen.

Sunlit water

Sunlight reflected on dark blue water — Original

Sunlight reflected on dark blue water, with enhanced highlights — Brightpixels · intensity 6

Small reflections on the water receive the strongest brightness increase.

Reflective metal

A polished chrome ring on a dark studio surface — Original

A polished chrome ring with enhanced reflections — Brightpixels · intensity 8

Narrow studio reflections show how the wrapper handles bright edges and metallic surfaces.

Night lights

White streetlights reflected on a wet city street at night — Original

White streetlights and wet pavement with enhanced highlights — Brightpixels · intensity 12

Streetlights and their reflections stand out against the darker buildings and pavement.

HTML usage

<bright-text intensity="12">
  Important words
</bright-text>

<bright-image intensity="8">
  <img src="./assets/examples/chrome.png"
       alt="Reflective chrome ring" />
</bright-image>