Browse components
Pixel Card
A card whose background ripples into a field of twinkling canvas pixels on hover or focus, with built-in color themes.
Installation
npx shadcn@latest add @glint-ui/pixel-cardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/pixel-card.json
Usage
import { PixelCard } from "@/components/ui/pixel-card";
<PixelCard variant="ocean">
<h3>Hover me</h3>
</PixelCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| variant | "lime" | "ocean" | "ember" | "candy" | "mono" | "lime" | Built-in color theme. |
| colors | string[] | — | Custom hex palette. Overrides variant. |
| gap | number | 6 | Distance between pixels in px. |
| pixelSize | number | 2.5 | Largest pixel size in px. |
| speed | number | 1 | Reveal and twinkle speed multiplier. |
| className | string | — | Extra classes for the root element. |