ShineJS

Performance and Lifecycle

Keep shadows smooth and cleanup behavior predictable.

Performance tips

  • Keep numSteps moderate (5-10 in most UI surfaces).
  • For large headings, increase blur before increasing steps.
  • Prefer update() for runtime changes over constant re-instantiation.
  • Only enable auto-updates where resize/scroll shifts geometry.

Lifecycle notes

  • draw() batches work with requestAnimationFrame.
  • enableAutoUpdates() listens to scroll and resize.
  • enableMouseTracking() subscribes to shared mouse monitoring.
  • destroy() removes listeners and tears down internal references.

DOM restoration

destroy() does not restore text wrapping mutations from splitter. If full reset is required, re-render or replace node content yourself.

Accessibility notes

  • In text-splitting mode, Shine sets aria-label on the host element and marks generated wrapper layers as aria-hidden="true", so assistive tech reads the original phrase once.
  • The duplicated mask layer is also aria-hidden="true" to avoid double announcement.

On this page