Brightpixels 1.5.0 — Performance

Brightpixels 1.5 reduces rendering overhead for simultaneous surfaces and sustained particle effects, and adds adaptive resolution for animated effects in auto quality.

• Batch interactive surfaces into one GPU submission per shared device per animation frame. The 24-surface benchmark dropped from 24 submissions to 1.
• Reuse the live particle array and pack typed buffers directly. The isolated 2,048-particle CPU benchmark dropped from 0.234 ms to 0.026 ms per full repack; GPU work is excluded from that measurement.
• Reduce animated surface and particle resolution after sustained slow frames in auto quality, with bounded reductions and slower recovery. Explicit high/low settings remain fixed.
• Add a repeatable benchmark page and CLI with frame cadence, upload bytes, submission counts, renderer metadata and downloadable results.

Text/image detail and requested HDR intensity remain unchanged. For manual no-bundler setups, copy both index.js and adaptive-quality.js into the same directory. npm/CDN imports resolve the helper automatically.

Validation: 18 unit tests, TypeScript checks and GitHub Verify passed; the browser suite passed 156 tests with 10 expected GPU-only WebKit skips. Local high-quality before/after frame intervals remained about 16.7 ms; no end-to-end frame-rate improvement is claimed. User runs at a fixed viewport measured 8.3 ms median callback intervals in high and auto with no intervals above 25 ms. The user confirmed the hardware demo works on their Apple Metal / in-app Chromium setup. Other physical displays and Safari HDR remain unverified.

See PERFORMANCE.md and HARDWARE_VALIDATION.md for methods, raw-result locations and validation limits.

Install: npm install brightpixels@1.5.0

Brightpixels 1.4.0 — Chain reaction

Brightpixels 1.4 connects application actions to light across existing HTML. A held button can charge its card, show loading while a promise runs, send a wave through nearby surfaces, and launch HDR confetti from the button.

• trackAction: loading and outcome feedback that preserves promise results and ignores stale responses.
• burstFrom: particles from an element's current center or edge, including after layout changes.
• bindHold, bindSwipe, bindDrag: touch and keyboard helpers with temporary charge and explicit cleanup.
• createEffectSequence: finite, replayable, cancellable sequences with reduced-motion behavior.
• Compact Action Lab and wider finger trails, with zero new runtime dependencies.

Try the Action Lab · Read the API

Validation: 15 unit tests, TypeScript checks, 151 Chromium/WebKit browser checks passed (9 expected GPU-only WebKit skips), and a fresh tarball installation with SSR imports. Passing verification. HDR renderer checks do not measure physical display luminance.

Brightpixels 1.3.2 — Less scrolling, same neon

Brightpixels 1.3.2 makes the demos shorter and easier to use on phones. The surface lab now switches between Burst, Draw & charge, and Feedback; the confetti demo keeps its primary controls upfront.

Surface lab · Confetti · All demos

• Keep settings when switching surface panels, while inactive effects stop rendering.
• Navigate panels by touch or keyboard, and share a direct link to any panel.
• Open tuning and JavaScript/React examples only when needed.
• Reach every older demo through a compact directory on the main page.
• Use larger phone controls and tap-release sweeps, with the fire button and four neon tiles together.

Includes the full 1.3 surface API: HDR spotlights, ripples, linked feedback, travelling edge lights, drawable trails, directional sweeps, two-color light, charge levels and coordinated groups. Optional React 18/19 support and ordinary-color fallbacks remain available. The core package keeps zero runtime dependencies.

README, version metadata and downloadable themes are updated for 1.3.2.

Validation: main and v1.3.2 verification passed, including 14 unit tests, TypeScript, package checks and 125 browser tests (9 expected WebKit GPU skips). The packed package also installs and imports without React or a browser DOM.

The demo deployment is live at the tagged commit; all changed public entry pages and assets match the release files.

Brightpixels 1.3.1 — More ways to light everything

Brightpixels 1.3.1 expands interactive surfaces with drawable neon trails, directional sweeps, two-color light, charge feedback and coordinated bursts across multiple containers.

Try the expanded demo · Surface API

• Draw temporary light trails with a mouse, pen or finger. Samples are bounded and expire automatically.
• Sweep light in any direction, or use two-color gradients across the surface.
• Feed a 0–1 charge value from your own progress, hold, slider or toggle state.
• Coordinate up to 32 existing surface controllers with directional, staggered bursts.
• Use the same controls through the optional React 18/19 surface component and refs.

The demo includes a four-panel burst, drawing pad, reversible sweep, charge slider, neon switch and three palettes. The existing spotlights, ripples, connected feedback and travelling border lights remain available.

import { brightenSurface, createSurfaceGroup } from 'brightpixels';

const glow = brightenSurface(card, {
  color: '#55eeff', colorEnd: '#ff55c8',
  trail: true, intensity: 10,
});
glow.sweep({ angle: 25 });
glow.setCharge(0.65);

const group = createSurfaceGroup([glow, anotherSurface]);
group.burst({ from: 'center', stagger: 80 });

Real extended-range GPU light where supported, canvas fallback elsewhere. Reduced motion uses static feedback. The library preserves native controls and scrolling; dedicated drawing pads may opt into touch handling in their own CSS. Groups own their timers and listeners, while callers retain ownership of their surface controllers.

Validation: main and v1.3.1 verification passed, including 14 unit tests, TypeScript checks, 119 browser tests (9 expected WebKit GPU skips), bundle freshness and package checks. The demo deployment is live at the tagged commit.

Brightpixels 1.3.0 — Interactive HDR surfaces

Brightpixels 1.3 makes the whole container respond to a small interaction. Add moving HDR spotlights, touch-origin ripples, connected glow and travelling edge lights to your existing markup.

Try the interactive surface demo · API documentation

import { brightenSurface } from 'brightpixels';

const glow = brightenSurface(card, { intensity: 10 });
glow.setLoading(true);
// When your action finishes:
glow.setLoading(false).flash('success');

• Pointer spotlights and press ripples illuminate the containing surface; normal clicks, keyboard focus and scrolling keep working.
• Link a separate button to another container, keep a selection lit, and show travelling edge lights during loading.
• Optional brightpixels/react-surface for React 18/19 provides normal server markup, live options, ref controls and automatic cleanup.
• The new renderer shares the core GPU device and frame scheduler, limits ripples to four, stops offscreen/hidden work, and provides reduced-motion and canvas fallbacks.

HDR mode uses extended-range rgba16float output. Physical brightness depends on browser, display and settings. Existing 1.0–1.2 APIs remain compatible.

Validation: 110 browser checks passed across Chromium and WebKit, with eight intentional WebKit GPU skips. Fourteen unit checks and TypeScript validation passed. Fresh packed consumers passed vanilla imports without React and React 18 server rendering. Both main and the release tag passed verification; deployed demo files match the tagged source.

Brightpixels 1.2.0 — React HDR confetti

Brightpixels 1.2 adds falling HDR confetti and an optional React component, informed by react-confetti's familiar controls.

import BrightConfetti from 'brightpixels/react-confetti';

<BrightConfetti numberOfPieces={200} recycle={false} intensity={8} />

• Tumbling paper, sparks, dots, custom colors, wind, initial velocities, and source rectangles.
• Recycling, pause/resume that freezes particle age, completion callbacks, and a restart ref.
• A vanilla controller through brightpixels/confetti, with zero runtime dependencies.
• React 18/19 as an optional peer; SSR-safe rendering and Strict Mode cleanup.
• Automatic viewport sizing, bounded canvas fallback, and one stationary batch for reduced motion.

Try the React confetti demo. Read the API and migration differences.

This is an independent Brightpixels implementation, not a drop-in replacement for react-confetti. Custom Canvas drawing callbacks, arbitrary canvas dimensions, friction, custom tween functions, and frame-rate props are not included. Completion is based on particle lifetime.

Validation: 95 browser checks passed, with 7 intentional WebKit GPU skips; 13 unit tests and TypeScript checks passed. The package installed without React for a vanilla consumer, and the React wrapper passed server-rendering checks with React 18 and 19.

HDR uses the existing TypeGPU-generated particle layout and extended-range WebGPU renderer. Physical brightness remains dependent on browser, display, and settings.

Published on npm as brightpixels 1.2.0 with the latest tag. The registry package matches the attached archive; a fresh registry installation verified vanilla use without React and the React component's server import.

npm install brightpixels@1.2.0

Brightpixels 1.1.0 — HDR particles

Brightpixels 1.1 adds reusable HDR confetti, sparks, and pointer trails through the optional brightpixels/particles entry point.

• One viewport canvas per engine, GPU particle motion, and an instanced rgba16float renderer.
• TypeGPU generates shader structures and buffer offsets during development. The published package keeps zero runtime dependencies.
• Canvas fallback, reduced-motion sparkles, bounded particle counts, and cleanup when effects finish or the page is hidden.
• The Dreamnet confetti cannon now uses the particle engine. The new particle lab exposes burst, trail, brightness, and particle-count controls.

Existing 1.0 APIs remain compatible. HDR brightness still depends on browser, OS, display, and settings.

Validation: 82 browser checks passed, with 6 intentional WebKit GPU skips; all 11 unit tests and TypeScript checks passed. GPU pixel readback confirms shader values above reference white; it does not measure physical display luminance. The release tarball also passed a fresh consumer installation.

Published on npm as brightpixels 1.1.0 with the latest tag. The registry package matches this release's attached archive and commit; a fresh registry installation verified the core, React, and particle entry points.

npm install brightpixels@1.1.0

Brightpixels 1.0.0

Brightpixels 1.0.0 stabilizes the public API for dependency-free HDR text, images and shapes, including progress, loading states and pulses.

This release includes viewport-aware HDR setup, auto/high/low quality controls, capability snapshots, fallback reasons, TypeScript/React declarations, and a hardware comparison page with exportable diagnostics.

Validation: 10 unit/integration tests, strict TypeScript checks, 22 browser tests passed (2 intentional WebKit GPU skips), and a clean-folder installation of the attached package. Browser tests cover software WebGPU, not measured display brightness.

Known limitations: physical HDR/display observations remain pending.

npm registry publication remains deferred. Install the attached 1.0.0 package directly:

npm install https://github.com/echohtp/brightpixels/releases/download/v1.0.0/brightpixels-1.0.0.tgz

Live demo · Hardware test

BrightPixels 0.5.0 — loading states and verified rendering

BrightPixels 0.5 adds complete loading and status behavior to the dependency-free HDR components, and makes browser verification part of the release process.

• Indeterminate rings, arcs, and bars use cached SVG/texture content with native transform animation. Reduced motion stays steady; hidden pages pause.
• Loading, success, warning, and error presets provide shapes and colors, with an optional one-shot completion pulse.
• configureBrightpixels() controls HDR and extra brightness for current and future components. Disabling releases GPU resources and preserves fallback content.
• Components share one JavaScript animation scheduler. Text/image textures and bind groups are reused until dimensions change.
• Fixes include synchronous fallback readiness, reconnect scheduling, boost attribute updates, and cleanup when GPU setup fails.

Validation: 9 Node/React tests, strict TypeScript usage checks, and 11 Chromium/WebKit browser checks passed. The real WebGPU path runs in Chromium using a software GPU; the WebKit GPU check is intentionally skipped. Browser checks cover loading-to-success, fallback, reduced motion, progress retargeting, texture reuse, global disable/re-enable, reconnect cleanup, and 16 concurrent animated components. These checks do not measure physical HDR luminance or guarantee a frame rate.

Demo: https://echohtp.github.io/brightpixels/#states
Verified CI: https://github.com/echohtp/brightpixels/actions/runs/34060935251

npm publication is blocked by the current account credentials; npm still serves the previous version. The attached tarball contains the verified 0.5.0 package and can be installed locally with npm install ./brightpixels-0.5.0.tgz.

BrightPixels 0.2.0 — HDR colors

BrightPixels 0.2.0 adds colored HDR text and an opt-in way to brighten every color in images, SVG icons, and illustrations.

• Set color on bright-text, including CSS Display P3 colors.
• Set boost="all" on bright-image; highlight-only rendering remains the default.
• Preserve Display P3 image colors where supported.
• Add live color examples, downloadable HDR artwork, and published-package installation instructions (npm install brightpixels).
• Remove the accidental self-dependency.

Validation: all six package tests pass, including new color/alpha and boost-option checks; npm package contents verified. Physical HDR output remains display-dependent.

npm publication is pending account authentication; the registry currently serves 0.1.0. This GitHub release contains the 0.2.0 source.