Skip to component
GGamma

Pixel reveal card

A two-sided card with a pixel sweep for revealing secondary content.

New
Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useState, type CSSProperties, type ReactNode } from "react";4 5export type PixelRevealCardProps = {6  front: ReactNode;7  back: ReactNode;8  label?: string;9  revealed?: boolean;10  defaultRevealed?: boolean;11  onRevealedChange?: (revealed: boolean) => void;12  className?: string;13};14 15const pixels = Array.from({ length: 48 }, (_, index) => index);16 17/** A two-sided reveal card with a brief pixel sweep on each activation. */18export function PixelRevealCard({19  front,20  back,21  label = "Reveal card",22  revealed,23  defaultRevealed = false,24  onRevealedChange,25  className = "",26}: PixelRevealCardProps) {27  const [internalRevealed, setInternalRevealed] = useState(defaultRevealed);28  const [revision, setRevision] = useState(0);