Creepy Button
Creepy Button is a button in the UI HUB buttons collection. Two white eyes with cursor-tracking pupils peek from under a cover face that tilts to -12deg on hover, blinking every 3 seconds.
The component is driven by 4 documented props (children, className, coverClassName, onClick), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: atan2 pupil tracking with vision clamping; 3s looping blink keyframes; Spring cover tilt on hover.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Creepy Button?
Playful-horror button with cursor-tracking eyes. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Creepy Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Creepy Button works
Two white eyes with cursor-tracking pupils peek from under a cover face that tilts to -12deg on hover, blinking every 3 seconds.
Technical information for Creepy Button
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| State change | relaxed eyes centered, cover upright to pupils track cursor, cover tilted, eyes blink |
| Props | 4 configurable |
| Usage example | Included on this page |
What Creepy Button requires
- atan2 pupil tracking with vision clamping
- 3s looping blink keyframes
- Spring cover tilt on hover
- Touch + focus-visible support
How to use Creepy Button
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <CreepyButton /> in your page using that import path.
- Pass any of the 4 documented props to change colours, density, speed or behaviour.
Creepy Button questions
What is Creepy Button?
Playful-horror button with cursor-tracking eyes. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Creepy Button work?
Two white eyes with cursor-tracking pupils peek from under a cover face that tilts to -12deg on hover, blinking every 3 seconds.
Which category does Creepy Button belong to?
Creepy Button is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the children prop do in Creepy Button?
The button label content. It defaults to required.
What does the className prop do in Creepy Button?
Additional CSS classes for the button container. It defaults to "".
Is Creepy Button free to use?
Creepy Button is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Creepy Button use?
Creepy Button uses Framer Motion and is styled with Tailwind CSS.
What does Creepy Button need to run?
Creepy Button needs atan2 pupil tracking with vision clamping, 3s looping blink keyframes, Spring cover tilt on hover and Touch + focus-visible support.