EvilEye
evil-eyeRenders a fiery procedural eye whose pupil follows the pointer.
Usage
Basic usage
Flame evil eye background, the pupils shift with the cursor; the default flame color is --color-chart-3, and the light and shade are adaptive.
<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
<EvilEye className="absolute inset-0" />
</div>More fierce (constricted pupils + high intensity)
Reduce the pupilSize harvest seam and increase the intensity / flameSpeed to make the flame brighter and more restless.
<EvilEye
className="absolute inset-0"
pupilSize={0.35}
intensity={2.2}
flameSpeed={1.6}
/>Customized eye color (dark blue)
eyeColor overrides the default fire orange; scale controls the proportion of eyes in the screen.
<EvilEye
className="absolute inset-0"
eyeColor="oklch(0.7 0.18 230)"
glowIntensity={0.5}
scale={0.9}
/>Wallpaper level (pupil does not follow + slow fire)
pupilFollow=0 Make the pupils fixed and not follow the cursor. Slow fire + loud noise is suitable for silent background.
<EvilEye
className="absolute inset-0"
pupilFollow={0}
flameSpeed={0.5}
noiseScale={1.3}
/>When to Use
Use it as a dramatic focal backdrop for a hero, 404 page, or launch screen where an eye should react to the pointer. Use DotPattern or GridPattern for tiled geometry, Spotlight for an abstract pointer focus, or Ripple for expanding waves.
Import
import { EvilEye } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| eyeColor | string | --color-chart-3 | Main flame color; accepts any CSS color, including theme variables |
| backgroundColor | string | Transparent, resolving to black | Background color; usually inherited from the container |
| intensity | number | 1.5 | Overall light intensity; 0.8–2.5 is recommended |
| pupilSize | number | 0.6 | Pupil size; higher values look fuller and lower values narrower, with 0.2–1.0 recommended |
| irisWidth | number | 0.25 | Iris (inner ring flame) width, recommended 0.1–0.4 |
| glowIntensity | number | 0.35 | Outer-ring glow strength; 0.1–0.6 is recommended |
| scale | number | 0.8 | Eye scale; higher values occupy more of the viewport, with 0.5–1.2 recommended |
| noiseScale | number | 1.0 | Flame-noise scale; higher values create finer detail, with 0.5–2.0 recommended |
| pupilFollow | number | 1.0 | Pointer-follow amplitude; 0 disables movement, while inertial interpolation returns the pupil toward center after the pointer leaves |
| flameSpeed | number | 1.0 | Flame flow speed, recommended 0.3–2.0 |
| className | string | — | Forward the root container, the component defaults to block h-full w-full, and the size is determined by the container |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Content layered over the static fallback when reduced motion is preferred or WebGL is unavailable |
Usage Guidelines
- OGL/WebGL renders on the client. SSR and unavailable WebGL show the static fallback, so design the initial frame around that state.
- Place the component in a
relative overflow-hiddencontainer with an explicit height such ash-64. - The flame reads best against a dark surface. On light pages, pass a dark
backgroundColoror add a dark container background. pupilFollowdepends on pointer events and therefore has no visible effect on pointerless devices.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.01 60)" }}>
<EvilEye
className="absolute inset-0"
intensity={1.5}
pupilSize={0.6}
glowIntensity={0.35}
flameSpeed={1}
/>
</div>