Mask Button
A button whose face wipes away on hover via an animated CSS sprite-sheet mask, revealing the label behind it.
The primary face is masked by a horizontal sprite-sheet image. On hover the
mask flipbooks frame-by-frame (steps() on mask-position), wiping the face
away to reveal the label, then plays in reverse on mouse-leave. Each mask
value uses a different sprite for a distinct transition. Inspired by
this Codrops article.
Installation
The hover transition is driven by three sprite-sheet mask images. The CLI copies
the component and CSS, but the masks ship as static assets — download them into
your app's public/masks/ folder (the Manual tab links them directly).
pnpm dlx shadcn@latest add "https://godui.design/r/mask-button.json"Usage
tsx
import { MaskButton } from "@godui/components";tsx
<MaskButton mask="nature">Hover me</MaskButton>Examples
Secondary
Sizes
Disabled
Props
Accepts all native <button> attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
mask | "nature" | "urban" | "forest" | "nature" | Sprite-sheet mask used for the hover transition |
variant | "primary" | "secondary" | "primary" | Color of the masked face |
size | "sm" | "md" | "lg" | "md" | Size scale (padding / font / radius) |
children | ReactNode | — | Button label |
disabled | boolean | false | Disable the button and its animation |