Pixel reveal card
A two-sided card with a pixel sweep for revealing secondary content.
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);