Modus UI

Pixel Card

Web (React)

A card that reveals a pixelated, shimmering canvas pattern on hover.

A stunning interaction component that draws a grid of shrinking and growing canvas pixels following your cursor focus.

Live Preview
Hover Me
Blue Variant

Installation

CLI

npx @modus-ui/cli add pixel-card

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/pixel-card.tsx.
  3. Paste the code.

Usage

tsx
import { PixelCard } from "@/components/ui/pixel-card";

export default function Example() {
  return (
    <PixelCard variant="blue">
      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
        <span className="text-xl font-bold text-blue-500">Hover Me</span>
      </div>
    </PixelCard>
  );
}

Props

PropTypeDefaultDescription
variant"default" | "blue" | "yellow" | "pink""default"Preset for gap, speed, colours and focus behaviour.
gapnumber-Gap between pixels; overrides the variant.
speednumber-Shimmer speed; overrides the variant.
colorsstring-Comma-separated pixel colours; overrides the variant.
noFocusboolean-Skips the animation on keyboard focus; overrides the variant.

Comments

  • No comments yet.