Brightpixels JS Library Demos

01 / Type signal

Give one line the room to speak.

Change the requested intensity, then send one controlled swell through the same real text.

A quiet sentence / one charged phrase

Keep the calm. Raise the signal.

Type controller

Intensity, by hand

11×

Requested light1 — 16

9× / detail

one fact that matters.

12× / emphasis

the sentence worth remembering.

16× / copyable

the letters stay real.

Ready for a brighter phrase.

View the element

<bright-text intensity="11" color="color(display-p3 0.86 1 0.22)">
  Raise the signal.
</bright-text>

02 / Image studies

Find the light already inside the frame.

Each pair uses the same source. Adjust the highlight layer and compare the result without changing the image file.

Sunlit water

Source / ocean.png

Sunlight reflected on dark water — Reference image

Sunlight reflected on dark water with enhanced highlights — Brightpixels / highlight layer

Small reflected points are left intact while the brightest water catches more headroom.

Reflective metal

Source / chrome.png

A polished chrome ring on a dark studio surface — Reference image

A polished chrome ring with enhanced reflections — Brightpixels / highlight layer

Narrow studio reflections show the renderer tracking precise bright edges.

Night lights

Source / night.png

White streetlights reflected on a wet city street at night — Reference image

White streetlights and wet pavement with enhanced highlights — Brightpixels / highlight layer

Street lamps and their reflections gain separation from the dark pavement.

03 / Color range

Color can carry light too.

Compare a real wide-gamut image, then try a colored image and a colored phrase with the same small wrapper.

A comparison of sRGB, Display P3, and Display P3 with HDR orange swatches — One orange coordinate, shown as sRGB, Display P3, and Display P3 with extra encoded light. The file contains the actual wide-gamut comparison.

Two quick tests

Keep the hue. Raise the light.

Colored image / all pixels

Orange rounded rectangle with brighter color

Colored text / Display P3 orange

Orange, brighter.

View the wrappers

<bright-image boost="all" intensity="5">
  <img src="icon.svg" alt="Orange icon" />
</bright-image>

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

04 / Shape atlas

Edges, paths, fills, and progress.

The native shape set is intentionally small. Every example below is live, and the studio can rewrite its attributes in place.

Arc / gauge

Segmented ring

outline

Interactive outline

Progress bar

Status dot

Activity line

Filled rectangle

Gradient pill

Triangle

Diamond

Star

Custom polygon

Custom path

Progress controls

One value, two shapes

65%

Progress65%

Live preview

Try a single brightness pulse.

05 / Response system

Let the state change the light.

Loading, success, warning, error, selection, and edge feedback all stay attached to ordinary HTML controls.

Status console

One signal, four outcomes

LIVE

Loading

Runtime settings

Change the conditions

GLOBAL

HDR renderingUse extended range where the browser exposes it.

Brightness budgetScale every requested intensity on this page.

100%

Render qualityAuto keeps large surfaces within a sensible budget.

HDR is enabled where supported.

View the state hooks

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

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

06 / Surface feedback

Move the light onto the container.

Hover, press, select, load, and run a short sequence. The original controls remain native and the light sits above them.

Interactive surface

Press the whole panel

SURFACE / 01

Feedback that stays in context.

Pointer light, ripples, selection, and loading share one controller.

Ready. Move across the surface.

Finite sequence

Chain a few moments together.

Charge the panel, sweep its edge, finish with a small particle burst, then return to idle.

01 / Charge: 350 ms
02 / Sweep: 420 ms
03 / Particles: 64 sparks
04 / Cleanup: Automatic

No sequence running.

View the surface call

const surface = brightenSurface(card, {
  color: "#dcff63",
  ripple: true,
  loading: false,
});

07 / Motion lab

Give the input somewhere to go.

Sparks, trails, holds, swipes, and drags are all local. Try them with a mouse, a thumb, or a keyboard.

Particle field

Fire a small constellation

STARTING

Pointer trails follow the page when enabled

Particle count96

HDR intensity7×

Preparing the particle field.

View the particle call

const particles = createParticleEffects();
particles.burstFrom(button, { count: 96, flutter: true });

Gesture bindings

Make the release count

TOUCH / KEYBOARD

Hold to confirm

0%

Release early to cancel.

Swipe to finish

0%

Confirmation 0%

Reach the end and release. End + Enter also works.

Drag the charge

0%

Drag across the rail0%

Arrow keys adjust. Enter commits.