PixelCard

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.

Facts#

Group	Effects
Product	Crew OS
Global	window.DigitalCrew.PixelCard
Source	digitalcrew-orchestrator: components/ui/pixel-card.tsx
Import in the app	import { PixelCard } from "@/components/ui/pixel-card";

API#

TypeScript declarations emitted from components/ui/pixel-card.tsx.

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#