# PixelCard

> A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.

## Facts

- **Product**: Crew OS
- **Family**: Effects
- **Global**: `window.DigitalCrew.PixelCard`
- **Source**: `digitalcrew-orchestrator: components/ui/pixel-card.tsx`
- **Import in the app**: `import { PixelCard } from "@/components/ui/pixel-card";`
- **Live preview**: /design/components/pixel-card/preview.html
- **Page**: /design/components/pixel-card

## Guidelines

**Use it for** a small set of selectable tiles on a showcase page: agents, plans, templates. The effect is the hover state; the content must read without it.

**What you provide**: `children` (centred content), `variant` (`default`, `blue`, `yellow`, `pink`), optional `gap` and `speed` overrides, `className` to resize. Variants only change the pixel spacing and speed, not the colour: `default` gap 5 / speed 35, `blue` 10 / 25, `yellow` 3 / 20, `pink` 6 / 80 (and `pink` ignores keyboard focus).

**Anatomy**: 300 × 400px by default (`aspect-[4/5]`), `rounded-[25px]`, 1px border, `overflow-hidden`, content in a centred column with 16px padding. Light pages: white card, `hsl(0 0% 85%)` border, `hsl(0 0% 25%)` pixels and text. Dark pages (`html.dark`): black card, `hsl(0 0% 15%)` border, `hsl(0 0% 75%)` pixels and text. The border colour transitions over 200ms on `cubic-bezier(0.5, 1, 0.89, 1)`.

**Behaviour**: on pointer enter or focus each pixel waits in proportion to its distance from the centre, grows, then shimmers between 0.5 and 2px; leaving shrinks them away. Drawing is capped at 60fps and stops when every pixel is idle. With `prefers-reduced-motion` the delay and shimmer speed drop to 0. (The preview focuses the first card so the pixels show.)

**Don't** use it for dense grids of cards, or put body copy longer than two lines inside.

## API

```ts
interface PixelCardProps {
    variant?: "default" | "blue" | "yellow" | "pink";
    gap?: number;
    speed?: number;
    className?: string;
    children: React.ReactNode;
}
export declare const PixelCard: ({ variant, gap, speed, className, children }: PixelCardProps) => React.JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  // PixelCard colours itself from html.dark (next-themes); mirror this page's theme onto that class.
  var de = document.documentElement;
  function syncDark() { de.classList.toggle("dark", /-dark$/.test(de.getAttribute("data-theme") || "")); }
  syncDark(); new MutationObserver(syncDark).observe(de, { attributes: true, attributeFilter: ["data-theme"] });
  var cards = [
    { variant: "default", icon: I.Target, name: "Max", role: "Lead generation" },
    { variant: "blue", icon: I.Users, name: "Sophie", role: "Candidate screening" },
    { variant: "yellow", icon: I.TrendingUp, name: "Claire", role: "Market analysis" }
  ];
  function App() {
    var ref = React.useRef(null);
    // Demo only: focus the first card so its pixels show without a pointer.
    React.useEffect(function () { var t = setTimeout(function () { var el = ref.current && ref.current.querySelector(".pixel-card-container"); if (el) el.focus({ preventScroll: true }); }, 200); return function () { clearTimeout(t); }; }, []);
    return h("div", { ref: ref, className: "flex gap-4" }, cards.map(function (c) {
      return h("div", { key: c.variant, className: "grid justify-items-center gap-2" },
        h(DC.PixelCard, { variant: c.variant, className: "h-[220px] w-[200px]" },
          h(c.icon, { className: "size-7" }),
          h("p", { className: "mt-3 text-lg font-semibold" }, c.name),
          h("p", { className: "text-xs" }, c.role)),
        h("code", { className: "text-muted-foreground text-xs" }, "variant=\"" + c.variant + "\""));
    }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Effects

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.