Brightpixels

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

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

Small reflections on the water receive the strongest brightness increase.

Reflective metal

Original
A polished chrome ring on a dark studio surface
Brightpixels · intensity 8
A polished chrome ring with enhanced reflections

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

Night lights

Original
White streetlights reflected on a wet city street at night
Brightpixels · intensity 12
White streetlights and wet pavement with enhanced highlights

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

Color experiment

More color. More light.

Wide gamut expands the palette. HDR adds light. Compare the same orange coordinates in sRGB and Display P3, then see the P3 color with four times the encoded light level.

Three orange swatches: standard sRGB on the left, wider-gamut Display P3 in the center, and Display P3 with four times the encoded light level on the right.
sRGBDisplay P3Display P3 + HDR

This image contains real wide-gamut and HDR data. The visible difference depends on your display, browser, and available brightness; it may be reduced on standard-range screens. Download the HDR image.

Brighten an icon or shape

Original SVG image
Orange rounded rectangle
All colors · intensity 4
Orange rounded rectangle with brighter color 
<bright-image boost="all" intensity="4">
  <img src="./icon.svg" alt="Orange icon" />
</bright-image>

Brighten colored text

Orange, brighter.

<bright-text color="color(display-p3 1 0.35 0)" intensity="4">
  Orange, brighter.
</bright-text>

Native shapes

Give the edges light.

Rings, outlines, progress bars, dots, and lines. No extra libraries. Move the slider to fill the ring and bar; click the outlined button to toggle its brightness.

Progress ring
Interactive content, bright outline
Progress bar
Available
Status dot
Line / divider
Native SVG sparkline
<bright-shape shape="ring" value="65" color="#ff5900" intensity="4"></bright-shape>
<bright-shape shape="outline" color="#ff5900" intensity="4">
  <button>Selected action</button>
</bright-shape>
<bright-shape shape="bar" value="65" color="#26df8b" intensity="4"></bright-shape>
<bright-shape shape="dot" color="#26df8b" intensity="4"></bright-shape>
<bright-shape shape="line" thickness="2" intensity="4"></bright-shape>
<bright-shape shape="line" points="0,80 25,55 50,65 75,30 100,10"
  style="width:12rem;height:4rem" color="#26df8b" intensity="4"></bright-shape>

BrightPixels 0.5

Loading to done.

A cached loading animation, clear status symbols, and a global control for extra light.

Loading…

HDR is enabled where supported. Your display determines the visible brightness.

<bright-shape status="loading" track intensity="3"></bright-shape>

indicator.setStatus("success", { pulse: true });
configureBrightpixels({ enabled: true, brightness: 0.5 });

Shape playground

Make it your own.

Thirteen native primitives. Pick a shape, mix colors, and give it a single swell of light.

Arc / gauge
Star
Triangle
Diamond
Gradient pill
Filled rectangle
Custom polygon
Custom path
Segmented ring

Try a single brightness pulse.

Fill applies to arcs, rings, and bars. Dash and thickness apply to strokes. Pulses respect reduced motion and stop when the page is hidden. HDR brightness requires a compatible display and browser.

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>