<pattern-grid>

A vanilla web component that stamps out a CSS-Grid of empty cells and gets out of the way.

<pattern-grid cells="8x8"></pattern-grid>

<style>
  pattern-grid { display: grid; grid-template-columns: repeat(var(--pg-cols), 1fr); }
  pattern-grid > i {
    aspect-ratio: 1;
    background: hsl(calc(sibling-index() / sibling-count() * 360) 70% 50%);
  }
</style>

• ~1 KB JS. Zero runtime dependencies. Light DOM.
• All visual behavior is author CSS. No DSL.
• Progressive enhancement: hand-authored cells work without JS.
• Optional shim="sibling" mode for browsers lacking native sibling-index().

Install

npm install @profpowell/pattern-grid

<script type="module" src="node_modules/@profpowell/pattern-grid/dist/pattern-grid.js"></script>

API

See spec.md for the full contract. TL;DR:

• Attributes: cols, rows, cells (e.g. "8x8" or "64"), cell (tag name), shim, seed.
• Methods: render(), cellAt(i), cellAt(x, y).
• Event: pattern-grid:render with { cols, rows, total }.
• CSS host props set by the component: --pg-cols, --pg-rows.

<seed-context> companion

Wrap any <pattern-grid> to get per-cell pseudo-random custom properties:

<seed-context seed="hello">
  <pattern-grid cells="8x8"></pattern-grid>
</seed-context>

<style>
  pattern-grid > i {
    background: hsl(calc(var(--rand-0) * 360deg) 70% 50%);
  }
</style>

• seed attribute reproduces the same randoms across reloads.
• count (default 8) controls how many --rand-N slots per cell.
• See the showcase for examples.

<paint-worklet> companion

Declaratively register a Houdini Paint Worklet:

<script type="module" src="https://unpkg.com/@profpowell/pattern-grid/paint-worklet"></script>

<paint-worklet src="/worklets/swirl.js"></paint-worklet>

<style>
  pattern-grid > i { background: paint(swirl); }
</style>

Fires paint-worklet:registered on success and paint-worklet:error on failure (including in browsers where Houdini Paint Worklet is not available — currently Safari and Firefox). Optional. Removable when authors prefer raw CSS.paintWorklet.addModule() calls.

Demo

https://profpowell.github.io/pattern-grid

Suite

Part of the ProfPowell web component suite: code-block, browser-window, terminal-window, browser-console, http-component.

License

MIT