Primitives

Pixels

The pixel dissolve: a grid of squares behind the host's content that switch on left to right with noise when the host is hovered, focused or open (see styles/pixels.css). Put it as the first child of an element with the pb-px-host class.

The squares are created on the host's first hover or focus, never on page load, so a page full of buttons adds no extra nodes until someone interacts.

The host sets the colors with CSS variables: --px-fill (squares) and --px-ink (text color once filled).

Hover or focus me

demos/pixels.tsx

import { PixelSpinner, Pixels, RollLabel } from "pixelbits/pixels";

export default function Demo() {
  return (
    <div className="flex items-center gap-6">
      <a
        href="#pixels"
        className="pb-px-host px-6 py-4 text-sm [--px-fill:var(--pb-accent)] [--px-ink:var(--pb-on-accent)]"
      >
        <Pixels size={12} />
        <RollLabel>Hover or focus me</RollLabel>
      </a>
      <PixelSpinner className="text-pb-accent" />
    </div>
  );
}

Installation

npm: import

import { Pixels, RollLabel, PixelSpinner } from "pixelbits/pixels";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/pixelbits-base.json

API

<Pixels>

The squares are created on the host's first hover or focus, never on page load, so a page full of buttons adds no extra nodes until someone interacts.

The host sets the colors with CSS variables: --px-fill (squares) and --px-ink (text color once filled).

Example

<a className="pb-px-host [--px-fill:var(--pb-accent)]" href="/work">
  <Pixels />
  Work
</a>

Prop	Type	Default	Description
size	number	9	Target square size in px. The grid is fitted to the host's size on the first interaction; very large hosts get bigger squares (at most 320).
cols	number	—	Fixed number of columns; overrides `size` horizontally.
rows	number	—	Fixed number of rows; overrides `size` vertically.
className	string	—	Extra classes for the square grid (e.g. `opacity-60`).