Pixel Card

A quiet card that comes alive with a shimmering field of pixels.

About this tool

Hover to reveal pixels from the center, then watch them shimmer and fade. Four variants, editable spacing, speed, palette, card geometry and HorizonX copy. Supports keyboard focus, touch taps, static reduced motion and lifecycle-safe HTML, React and Svelte exports. Adapted from the original MIT-era React Bits PixelCard.

In collections: CSS Cards & Animated Card Components CSS Hover Effects & Animations

Guide: CSS Cards: Build a Responsive, Accessible Card Component Handing Off Visual Assets: What a Client Needs Beyond a Download Cursor Effects for Websites: Delight Without Hiding the Interface

UI/UX · JavaScript / CSS All tools

Pixels

Variant

default blue yellow pink

Pixel gap (auto or 3–24 px)

Speed (auto or 0–100)

Custom pixel colors

Content

Show content

on off

Eyebrow

Title

Description

Card

Width px

Height px

Corner radius px

Color

Text

Border

Background (hex or transparent)

Interaction

Disable focus animation

auto off on

Advanced

CSS class