Brightpixels

Enhance existing elements

Your UI.
Extra light.

Keep your cards, buttons, links, and event handlers. Add an HDR edge with one call.

Your existing card

This is an ordinary HTML article with a bright edge added to it.

Tab to focus this link

The button keeps its original click handler.

HDR depends on your display and browser. The edge has an ordinary-color fallback. Existing focus styles remain active.

One call. Your styles.

import { brightenEdges } from 'brightpixels';

const [edge] = brightenEdges('.my-card', {
  color: 'color(display-p3 0.2 1 0.65)',
  intensity: 4,
  thickness: 2,
});

edge.update({ trigger: 'hover' });
edge.destroy();

This example uses the repository runtime. The helper is unreleased; it is not in the 1.0.0 package yet.