Integration considerations

Choose motion behavior

System respects reduced-motion and device preferences. Dynamic follows mouse or pen input, even with reduced motion enabled. Static keeps a fixed direction. Touch updates the light position in viewport coordinates. Scrolling and lifting the finger preserve the last position; surfaces respond as they move beneath it. A new touch updates the position. Touch tracking follows the selected motion mode: static stays fixed, and system stays fixed when reduced motion is enabled.

Understand rendering cost

Each light queues at most one frame, reads geometry before writing styles, and skips unchanged output. Gradient changes still require browser rendering work; this does not guarantee a frame rate or battery cost.

Preserve native interactions

Keep labels, text contrast, base borders and visible keyboard focus. Decoration does not capture pointer events; input values, selection, keyboard handling and portals remain under your control.

Forced-colors mode hides decoration. Communicate selection, validation and availability independently of the highlight.

Keep existing decorations

Edge uses ::after by default. Set pseudoElement: 'before' to keep an existing ::after. If both pseudo-elements are occupied, decorate a wrapper.

import { Edge } from '@bolerish/edge';

<Edge.Provider>
  <Edge.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Edge.Surface>
</Edge.Provider>

Wrap native inputs

Native inputs do not reliably display pseudo-element decoration. Connect a surrounding label or div with a matching radius instead. Keep the input’s label, focus, validation and keyboard behavior. Use recessed for an inset appearance.

Refresh after layout changes

Size changes, nested scrolling, viewport resizing, font loading and resource loads update geometry automatically. After a position-only change or a element's border-thickness change without a size notification, call light.refresh() once the new layout is applied. It updates even with a stationary pointer.

See light.refresh() for the React call.

Geometry and document boundaries

Edge approximates axis-aligned rectangles. Rotation, perspective transforms and cross-document portals are unsupported. Portals within the same document can share a light. For focus, selection and validation, see Accessibility.