EvilEyeButton wraps the React Bits EvilEye shader in an evil-buttons style button shell. It keeps the same single-component install shape as DitherButton while using a registry dependency for the WebGL background, so consumers own both the button and the shader source after install.

Preview

EvilEyeButton

Interactive

Variants

Tune the shader color, pupil shape, glow, speed, and button shell with props and className.

Blue Nazar

Cool eye color

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/evil-eye-button

Usage

[]txt

import EvilEyeButton from "@/components/evil-buttons/evil-eye-button";

export function ButtonDemo() {
  return <EvilEyeButton>I SEE YOU</EvilEyeButton>;
}

Props

The component spreads any <button> HTML attributes.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The visible button label or content.
`className`	`string`	-	Extra classes passed to the button shell.
`labelClassName`	`string`	-	Extra classes passed to the label span.
`effectClassName`	`string`	-	Extra classes passed to the shader wrapper.
`effectOpacity`	`number`	`0.95`	CSS opacity applied to the effect wrapper.
`eyeColor`	`string`	`"#ff6f37"`	Hex color used by the Evil Eye shader.
`intensity`	`number`	`1.65`	Brightness multiplier for the shader.
`pupilSize`	`number`	`0.62`	Size of the slit pupil. Lower values make it tighter.
`irisWidth`	`number`	`0.22`	Width of the iris ring.
`glowIntensity`	`number`	`0.56`	Strength of the outer glow.
`scale`	`number`	`1.15`	Shader scale inside the button. Lower values zoom in.
`noiseScale`	`number`	`1`	Scale of the procedural noise texture.
`pupilFollow`	`number`	`0.55`	Cursor-follow strength for the pupil.
`flameSpeed`	`number`	`0.8`	Animation speed for the fiery iris motion.
`backgroundColor`	`string`	`"#050000"`	Hex background color passed into the shader.

Notes

Uses the React Bits EvilEye WebGL shader through a registry dependency.
The button itself is a client component because the shader uses browser APIs.
Honors prefers-reduced-motion by rendering a static CSS evil-eye fallback instead of mounting the animated shader.
Keep label text short enough for button layouts; labelClassName is available when custom sizing needs tighter typography.

Registry

The registry item includes components/evil-buttons/evil-eye-button.tsx, installs clsx and tailwind-merge, and pulls @react-bits/EvilEye-TS-TW as a registry dependency.