Halftone Portrait

Halftone Portrait

A Canvas2D portrait with sampled dots and local pointer interaction. Eclipse is the default astronaut artwork. Ronin, Eclipse and Sentinel artwork are included in every install. There are no requests to the source website.

React

Import the named component from the installed component directory. The entry includes its CSS. Give image and background components a sized container; the wrapper accepts style and className.

import { HalftonePortrait } from "./components/halftone-portrait";

<HalftonePortrait src="eclipse" fit="contain" style={{height: 520}} />

Use regular props for every setting in the generated props table. paused suspends motion without discarding settings. Unmount releases observers, event listeners and animation resources.

HTML and vanilla

Copy the complete HTML bundle, including its assets, to your static host. Use the supplied component.html markup with component.css and component.js. Relative bundle URLs work under a subpath. The bundle initializes each instance independently from its serialized settings.

For a custom integration, import render, mount and resolveSettings from src/core. render(settings) is safe during server rendering. Pass an outer host element to mount(host, settings), then use update(settings), pause(), resume() and destroy() on the returned controller. Always destroy a controller before removing its host.

Accessibility and fallback

Arrow keys move the interaction target; Shift increases the step and Escape resets it. Reduced motion keeps the image static. The original image remains available without Canvas or JavaScript, and no WebGL context is required. For local image upload, create an object URL, pass it as src, and revoke it when replaced or unmounted. Uploaded images never leave the browser. For hosted images, use a same-origin URL or a server that grants image CORS access.

Assets and rights

See component.json for the complete asset list and assets/NOTICE.md for provenance. All source is standalone. No Arclen application runtime, authentication, database code, commercial fonts or licensed icon packs are required.

Performance

The default transparent background lets the containing surface supply contrast; use a dark surface for the default white dots, or set background="#000000". Dot spacing and size stay at their authored values on every host size, including high-density displays. Large portraits with close dot spacing require more rendering work; the component repaints the area affected by pointer movement, sleeps at rest and suspends offscreen without reducing image detail. Initial images, resized canvases and image setting changes repaint in full. Interaction-only settings reuse the existing samples. On surfaces above one million CSS pixels, image setting changes first show an accessible “Rendering artwork” status, keep the previous full-detail frame visible and then rebuild at full quality. Rapid image edits share the pending render job. A home-coordinate index limits pointer updates to affected dots. Changed shapes draw on a second canvas before their pixels are copied to the visible canvas, preserving overlap order and antialiasing without expanding the repaint area across the whole portrait. This uses one additional canvas at the same resolution. The component has no npm runtime dependencies. The release gate records the compressed bundle size, startup and interaction timing. Reduced motion and offscreen suspension take priority over continuous effects.