Peeping Button
Add a shy, cursor-tracking surprise behind a familiar button face.
Features
- Peeks at an irregular rhythm so the effect feels alive instead of mechanical.
- Tracks fine-pointer movement with spring-smoothed pupils while the cover is open.
- Closes when the user approaches or focuses the button, preserving a calm action state.
- Pauses in hidden tabs and becomes still when reduced motion is requested.
- Composes native button props and external pointer or focus handlers.
Installation
pnpm dlx shadcn@latest add @tentui/peeping-button
Usage
import { PeepingButton } from "@/components/peeping-button";<PeepingButton onClick={() => console.log("Clicked")}>Pricing</PeepingButton>Tune how often and how long the button peeks, or disable the automatic behavior.
<PeepingButton peekDelay={[1800, 3200]} peekDuration={1800}>
Keep watching
</PeepingButton>Accessibility
PeepingButton renders a native button with its visible cover providing the
accessible label. The eyes and invisible sizing placeholder are hidden from
assistive technology. Focus, disabled, and keyboard activation behavior remain
native, while reduced-motion preferences turn off automatic peeking and pupil
movement.