Measured entry

cultui-lightboard

background-effectliquid-glassmotion on file

A client-side React canvas component that turns uppercase text into a scrolling dot-matrix sign, with configurable colors, density, font, hover behavior, and optional pointer drawing. It ships as a shadcn registry source file, uses browser canvas and animation APIs, and has no declared package dependency beyond the host React setup.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of cultui-lightboard at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-lightboard at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of cultui-lightboard at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for cultui-lightboard
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal19.6 KB (85.0 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A credible pick for decorative signage: it builds and mounts cleanly, stays contained across the tested layouts, and needs no extra library. Treat it as visual enhancement, not the sole delivery channel for important copy, and review the duplicated animation scheduling before using many instances.

Use it if

  • You need a decorative ticker or announcement sign whose colors and dot density must match a custom theme.
  • You want an optional canvas drawing interaction alongside the scrolling message.
  • You prefer a self-contained source component with no added runtime package.

Skip it if

  • The message carries essential information and must remain available to screen readers or when canvas rendering is unavailable.
  • You need broad punctuation, lowercase, or complete numeric font coverage without extending the bundled glyph maps.
  • You need strict control over animation work, since the source runs overlapping animation loops and continuously redraws the canvas.
  • You need server-only rendering with no client boundary or browser APIs.

Install

Installation record for cultui-lightboard
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

Copy the registry component into a client-capable React project, preserve its client directive, and ensure TypeScript and JSX compilation are configured. No third-party runtime package is declared. Non-shadcn projects do not need shadcn utilities or theme tokens, but must place the file in their own component structure and import it directly.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Alternatives

Other published entries for the background-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.