GGamma

Design catalogue

Source atlas

Components34 results

ComponentsMotion

Pixel reveal card

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

Open in Gamma

What to study

  • Click, tap, Enter, or Space toggles the two faces.
  • Keep face content presentational; the card itself is the interactive button.
  • Reduced motion switches content immediately without the pixel sweep.

Topics

References

Material

Status
New
Source File
src/components/PixelRevealCard.tsx
Design System
gamma
Props
  • Name
    front / back
    Type
    ReactNode
    Default
    —
    Description
    Presentation content for each side.
  • Name
    revealed / defaultRevealed
    Type
    boolean
    Default
    false
    Description
    Controlled or initial reveal state.
  • Name
    onRevealedChange
    Type
    (revealed: boolean) => void
    Default
    —
    Description
    Reports each activation.
  • Name
    label
    Type
    string
    Default
    Reveal card
    Description
    Accessible button name.