Glyph Field

Glyph Field

Glyph Field is an ASCII light field for a dark or light surface. Its default Rift pattern uses the quiet grayscale glyph treatment of the owner's earlier shader replication, with a diagonal counterflow that leaves room for foreground content. Veil follows the original fold more closely; Swell and Halo explore two more forms of the same restrained field.

React

import {GlyphCurrent} from './components/glyph-current';

export default function Example(){
  return <section style={{position:'relative',height:'100vh',overflow:'hidden'}}>
    <GlyphCurrent pattern="rift" sizing="fill" style={{position:'absolute',inset:0}}/>
    <div style={{position:'relative',zIndex:1}}>
      <h1>Your content</h1>
    </div>
  </section>;
}

The default sizing="fill" uses the height of its parent. Give that parent a definite height, as in the full-screen example above. Without one, the field falls back to the Height setting (440px by default). Use sizing="fixed" for an inline panel with a specific height. The component accepts every setting from the generated props table. Set paused while editing or when a surrounding experience suspends decorative motion. className and style apply to the outer React wrapper.

HTML and vanilla JavaScript

Copy the complete HTML bundle, including component.html, component.css, component.js and poster.webp. It works at a site root or nested path. The vanilla module exports defaults, resolveSettings, render and mount. Call destroy() before removing an instance. update(settings) changes colour, geometry and motion without creating a new renderer.

For a full-screen HTML background, give the mount element a height and keep page content above it:

<section class="hero">
  <div id="shader"></div>
  <div class="hero-content"><h1>Your content</h1></div>
</section>
<style>
  .hero { position: relative; height: 100vh; overflow: hidden; }
  #shader { position: absolute; inset: 0; }
  .hero-content { position: relative; z-index: 1; }
</style>

Call mount(document.querySelector('#shader'), {pattern:'rift', sizing:'fill'}) from the copied JavaScript module.

Tweaks

Pattern changes the field geometry and travel: Rift is the default diagonal counterflow, Veil is the reference-like fold, Swell is a lower ribbon, and Halo is a compact breathing crescent. Horizontal and vertical position move the bright form away from overlaid content without moving the container. All four start in grayscale; glyph and glow colours can tint them. Background colour updates the surface. Density changes cell size, intensity changes bright coverage, and glow changes compositing opacity. Distortion, flow speed and pointer response alter motion. Sizing fills a parent or uses a fixed height. Height sets the fallback for an unsized parent and the exact size in fixed mode. Fade edges controls the perimeter mask. All controls have bounded values in component.json. The site inspector and copied React/HTML use the same settings.

Motion and accessibility

The canvas is labelled as a visual effect and contains no interactive controls. Pointer movement bends the field without capturing clicks, taps or scrolling. The renderer pauses outside the viewport, in hidden tabs and when pause() is called. Reduced-motion preference shows a still frame. All four patterns use the same downsampled WebGL2 light field and capped canvas resolution. Animation draws at most 30 frames per second. If rendering is unavailable or JavaScript is disabled, a CSS light field remains visible; the HTML package also includes a static poster.

Ordinary mounts retain a still frame when a draw exceeds 48ms or a document long task reaches 50ms while animating. A scaled decorative preview can opt into a narrower guard by setting data-arclen-render-scale on the mount element or an ancestor before mounting, with a finite value greater than 0 and at most 1. This permits the first successful paint to warm up the driver and ignores unrelated document long tasks; later successful draws still stop animation when they exceed 48ms. The hint does not change the shader, resolution, settings or animation speed.

Rights

Veil ports the owner's local October 6 shader replication, which was independently assembled from measurements of a Higgsfield Ads Studio reference. The shader equations and ASCII sampling were adapted from that local replica; no Higgsfield application bundle, artwork, font, icon or network resource is included. Swell, Rift and Halo are original Arclen UI variations of the local light-field equations.