GGamma

Design catalogue

Source atlas

Effects239 results

EffectsInteraction motion

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

Component Id
component:pixel-reveal-card
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.
Overview Href
/motion