PixelCard
pixel-cardReveals card content through animated pixel particles.
Usage
Basic usage
When hovering/focusing, the pixels grow ripple-like from the center outwards, shrinking and dissipating frame by frame.
Hulian component library
Hover/focus trigger pixel animation
<PixelCard variant="default" className="h-48 w-64">
<div className="flex flex-col items-center gap-1 px-6 text-center">
<p className="text-base font-semibold text-foreground">Hulian Component Library</p>
<p className="text-xs text-muted">Hover/focus trigger pixel animation</p>
</div>
</PixelCard>Default variant
variant One-click switch gap / speed / Color combination: blue / pink / amber.
blue
chart-2 Blues
amber
gap=3 Denser and more delicate
<PixelCard variant="blue" className="h-48 w-64">
…
</PixelCard>Customized color matching and speed
colors / gap / speed Pass the value individually to override the variant default, feed token with --color- prefix.
Custom
colors / gap / speed can be covered
<PixelCard
colors={[
"var(--color-chart-5)",
"var(--color-chart-4)",
"var(--color-chart-1)",
]}
gap={5}
speed={18}
className="h-48 w-64"
>
…
</PixelCard>Disable focus triggering
noFocus Only mouse hover triggers the animation, and the root container cannot be keyboard focused.
Hover trigger only
noFocus = true
<PixelCard variant="default" noFocus className="h-48 w-64">
…
</PixelCard>When to use
Use PixelCard as a retro or technical animated background for card content. Use TiltedCard for pointer-driven 3D tilt, or MagicBento for a spotlight grid.
Import
import { PixelCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "blue" | "pink" | "amber" | "default" | Preset controlling gap, speed, colors, and focus behavior; explicit props override the preset. |
| gap | number | Variant default | Pixel spacing in pixels. Smaller values are denser and more expensive; 3 to 12 is recommended. |
| speed | number | Variant default | Animation speed from 0 to 100; zero disables animation. |
| colors | string[] | Variant token colors | Colors sampled by pixels. Accepts CSS colors and real Hulian tokens. |
| noFocus | boolean | Variant default | If true, only pointer hover triggers and the root is not keyboard-focusable. |
| className | string | — | Root classes controlling size, radius, and border. |
| style | CSSProperties | — | Inline styles forwarded to the root. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content layered above the canvas. |
Usage notes
- Set dimensions through
classNameorstyle; a zero-sized host produces an invisible canvas. - Smaller
gapvalues increase the number of pixels and RAF redraw cost. - [[hulian-token-color-var-needs-color-prefix]]: use
var(--color-chart-2), not barevar(--chart-2), for canvas colors. - Reduced motion and
speed=0disable the wave animation.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
Pixel Card
Hover to see the effect
<PixelCard
variant="blue"
gap={6}
speed={35}
noFocus={false}
className="h-48 w-64"
>
<div className="text-center">…</div>
</PixelCard>