Diffuse Light

Diffuse Light

A decorative field of flowing color with fine lines and static grain. Use it as a complete visual panel or as a background behind your own content. It contains no text, links or focus targets.

React

Install the component and its exact dependency, @paper-design/shaders@0.0.40. Keep the included MIT notice with the installed source.

import { DiffuseLight } from './components/diffuse-light';

export default function LightPanel() {
  return <DiffuseLight height={600} verticalFade={0.7} />;
}

DiffuseLight and Component are equivalent exports. Props accept every manifest setting plus className, style and paused. Server rendering provides a static gradient and texture before WebGL starts. Prop changes update the same renderer without restarting its animation phase.

For a background, give the receiving parent an explicit height and positioning context. Place your content above the field and check its contrast against the full animation.

<div style={{ position: 'relative', minHeight: 480, background: '#080908', color: '#f4f4e8' }}>
  <DiffuseLight sizing="fill" verticalFade={1} />
  <div style={{ position: 'relative', padding: 40 }}>
    Your content
  </div>
</div>

fixed sizing occupies the full available width and uses height in pixels. fill sizing is absolute and fills the nearest positioned ancestor. In fill mode, height is ignored; the parent must establish its own height. Both modes respond to changes in the receiving container, including a host that starts hidden.

HTML

Keep the downloaded package files together and serve them through a web server. The supplied page contains the configured field and its static CSS fallback, which remains visible without JavaScript. For another page, load the stylesheet and script and add a host:

<link rel="stylesheet" href="./component.css">
<div data-arclen-ui="diffuse-light"
     data-settings='{"height":480,"verticalFade":0.6}'></div>
<script src="./component.js" defer></script>

The automatic mount requires JavaScript. For custom server rendering, insert the output of render(settings, id) into your host; its CSS gradient and textures work without JavaScript. An empty custom host has no no-JavaScript image. Preserve relative file paths when serving the downloaded package below a nested URL.

Portable controller

import { defaults, mount } from './components/diffuse-light/src/core';
import './components/diffuse-light/src/styles.css';

const host = document.querySelector<HTMLElement>('#light');
if (!host) throw new Error('Missing light host');
const field = mount(host, { height: 480 });
field.update({ ...defaults, height: 480, lineOpacity: 0.2 });
field.pause();
field.resume();
// Before removing this view:
field.destroy();

The core exports defaults, resolveSettings, render and mount. update accepts a complete configuration; omitted settings return to manifest defaults. Invalid settings throw before changing the view. Repeated identical updates do nothing. Updates retain the canvas and animation phase. pause freezes animation while permitting settings and size changes; resume allows motion only when the renderer's visibility and motion conditions permit it. destroy is idempotent and removes the owned view and renderer resources. Mounting again in the same host disposes the earlier instance. Separate hosts remain independent.

Field controls and configurations

The field adapts Paper's Perlin noise shader with an Arclen spatial palette. colorBack is the shadow color, colorFront is the primary light and colorAccent is the secondary light. Colors accept six- or eight-digit hexadecimal values. Eight-digit values include alpha; light colors blend using premultiplied alpha.

colorBlend ranges from zero to one. Zero preserves the original single-light field, regardless of the secondary color. One spreads the primary light across the left and the secondary light across the right, with a broad curved transition. Intermediate values introduce the secondary color gradually. This changes the light palette, not the shadow color, field shape or animation phase. The palette stays spatially fixed while the light flows through it. colorAccent defaults to ember #f54e00 and colorBlend defaults to zero.

| Setting | Range | Effect | | --- | --- | --- | | scale | 0.4–2.5 | Larger values create broader light formations. | | detail | 0–0.8 | Adds smaller structures within the broad field. | | balance | 0.2–0.8 | Larger values increase light coverage. | | softness | 0.2–1 | Softens the transition between shadow and light. | | speed | 0–3 | Changes flow rate; one is the default. Zero freezes the current phase. |

Olive Field is the default configuration, with scale 1, detail 0.35, balance 0.455 and softness 1. The light formations are slightly taller than they are wide, and the lower fine-detail default makes short-interval motion calmer. The catalogue also offers four additional complete configurations, stored in component.json:

| Configuration | Palette | Field character | | --- | --- | --- | | Amber Veil | Warm brown and amber | Smaller, softer formations with a slow flow and lighter line texture. | | Blue Hour | Deep blue and muted blue light | More fine detail, a broader field and stronger diagonal lines. | | Silver Haze | Charcoal and pale silver | Broad, soft formations, a slow flow and an opaque top edge. | | Arclen UI | Near-black, violet and ember | The refined default field shape, slower motion, a softer top fade and fine diagonal lines. |

Each configuration is a normal settings object. Copy its settings entry from the manifest into React props or pass it to mount and update. They require no additional assets or runtime context. For example, the two-color palette works directly in React:

<DiffuseLight colorBack="#090709" colorFront="#a051e1" colorAccent="#f54e00"
  colorBlend={1} lightOpacity={0.85} verticalFade={0.75} speed={0.65} />

Use the same keys in HTML data-settings or a vanilla mount/update configuration. Palette updates retain the existing canvas and phase. The CSS fallback blends its right-hand light toward the secondary color; its gradients approximate the palette rather than reproducing the procedural field.

Texture and layout controls

lightOpacity blends the procedural field over the shadow color, from zero to one. Its default is 0.65. It changes only the light contribution; the background, lines and grain retain their own settings. The static fallback uses the same strength.

verticalFade controls transparency at the top: zero is fully opaque, one fades from transparent at the top to opaque at the bottom. A short shoulder brings light into the upper region while keeping the top edge transparent at one. Zero removes the whole fade. The fade applies to the field, lines and grain together. It reveals the parent background rather than adding a solid scrim.

lineOpacity changes the strength of one-pixel dark lines. lineSpacing sets their interval in CSS pixels and lineAngle rotates them in degrees. grainOpacity controls the independently generated static grain. Set either opacity to zero to remove that texture. These textures do not animate or allocate another canvas.

animated={false} retains a static field. paused is a React playback control and is separate from the saved configuration. All output is decorative, hidden from assistive technology and excluded from pointer interaction. Add meaningful content as a sibling, outside the component.

Motion, capability and fallback

With WebGL2 and ResizeObserver available, the component renders a procedural canvas. A static gradient remains visible during initialization, then gives way to the procedural field over the same shadow color. Reduced motion, explicit pause, animated={false} and speed zero retain a rendered frame without a continuous animation loop. A paused settings update or resize may draw one new static frame.

Recognized software WebGL backends render the field at a lower resolution. Hardware and unrecognized backends retain the standard resolution limit. Palette, field settings and animation phase are unchanged; CSS lines and grain retain their original resolution.

A wholly offscreen field and a genuinely hidden document suspend animation. Returning to view preserves phase and excludes elapsed hidden time. Clearing one suspension condition does not override the others. Without IntersectionObserver, the component keeps a static rendered frame because it cannot establish offscreen eligibility.

Without WebGL2 or ResizeObserver, or if shader initialization fails, the CSS gradient and static textures remain visible. This fallback responds to palette, sizing, fade and texture settings; shader scale, detail, balance, softness and speed require WebGL. Context loss reveals the same fallback. Restoration attempts to recreate the renderer while preserving its settings and phase; if that fails, the fallback remains.

Without JavaScript, server-rendered React and configured HTML retain the CSS gradient and textures. The default standalone HTML download shows its bundled poster inside the component bounds. Runtime rendering performs no image or font requests.

Dependency and rights

The component includes original Arclen layout, controls and procedural textures. It adapts the MIT-licensed Paper Shaders package at exactly version 0.0.40 with an authored spatial foreground palette. Its full copyright and permission notice is in assets/Paper-Shaders-LICENSE.txt; keep that file in copies and redistributed packages. The component's commercial licence is separate. No external images or fonts are required at runtime.