<border-wc>

Live site → — try the playground, read the API, or browse themed demos.

A light-DOM web component for high-touch border effects — thirty-two of them, from conic-gradient auroras and chromatic-aberration outlines to neon glow, chase-light marquees, ASCII boxes, barbed wire, and psychedelic rainbows — the kind of decorative borders that pure CSS can't pull off (and a few that finally can, thanks to @property, mask-composite, and offset-path). It pairs with vanilla-breeze's CSS-tier data-border-effect (spin / pulse / march): use the CSS tier for cheap, always-on motion, and reach for <border-wc> when you need SVG- or composited-CSS-driven effects. It reads your design tokens (CSS custom properties) so borders stay on-brand without extra config.

Install

npm install @profpowell/border-wc

Usage

<script type="module" src="https://unpkg.com/@profpowell/border-wc"></script>
<border-wc effect="squiggle" color="var(--ink)" animate>
  <blockquote>The shape around the thing is the thing.</blockquote>
</border-wc>

Attributes

| Attribute | Description | | ----------- | ---------------------------------------------------------------------------------------------------- | | effect | One of: aurora, barber, chroma, wings, ants, lightning, neon, glitch, hud, ascii, stitching, typewriter, barbed-wire, rope, scallop, scoop, zigzag, wave, deco, memphis, opart, psychedelic, plasma, gooey, sparks, marquee, washi, filmstrip, ticket, bunting, squiggle, draw. | | color | Stroke/particle color (any CSS color; defaults to currentColor). | | thickness | Stroke width in px. | | speed | Animation duration in ms. | | radius | Corner radius in px (falls back to the host's computed border-radius). | | animate | Boolean; when present, plays the entrance/loop animation. | | mode | Effect-specific placement mode (e.g. center). | | motion | auto | reduce | force — overrides prefers-reduced-motion: reduce forces static, force forces animation, auto (default) honors the media query. |

Each attribute can also be set via a matching --border-wc-* CSS custom property (e.g. --border-wc-color), which takes precedence over the attribute.

Attribute binder (no wrapper)

Opt in once and annotate any element — no <border-wc> wrapper needed:

<script type="module" src="https://unpkg.com/@profpowell/border-wc/attr"></script>
<article data-border-effect="squiggle">…</article>

The binder applies the extreme effects (all thirty-two) directly to the element and watches the DOM for added/changed/removed nodes. Base values (spin, pulse, march, …) are owned by vanilla-breeze's CSS and ignored here. Params come from --border-wc-* custom properties (same knobs as the component).

The module auto-scans on import. For programmatic control it also exports bindBorderEffects(root = document) (scan a subtree on demand) and stopWatching() (stop observing future DOM changes).

Part of the "Decorated Layers" family alongside vanilla-breeze and bg-wc.

License

MIT