KQ-1259 · EYE/LID
Eye Lid
A show/hide toggle drawn as an eye that watches: while open, the iris and pupil follow the pointer anywhere on the page, held inside the eye on a spring whose keenness you set. Pressing blinks the lid shut on the snap spring with its lashes swinging over; shut, the lid twitches when the pointer passes close, and opening wakes it with a couple of slow tweened blinks before the gaze finds the pointer again on the glide spring. Space and Enter toggle it through the native click, and aria-pressed reports hidden.
KQ-1259 · EYE/LID
Available
£2,481.20
balance shown · eye on your pointer
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/eye-lid
Props
- pressed / defaultPressed
- boolean
- default false
- Hidden state, controlled or initial; true is hidden, the eye shut.
- onPressedChange
- (hidden: boolean) => void
- default —
- Fires from the press that changed it.
- shownLabel
- string
- default "Visible"
- Text and accessible name while the eye is open.
- hiddenLabel
- string
- default "Hidden"
- Text and accessible name while the eye is shut; the button keeps the wider label's width.
- compact
- boolean
- default false
- Icon only, with the label as the accessible name.
- follow
- number
- default 0.6
- How keenly the pupil chases the pointer, 0 to 1: spring stiffness and reach.
- blink
- number
- default 2
- How many slow blinks it takes to wake when opened, 0 to 3.
- blinkDuration
- number
- default 260
- How long one waking blink lasts, in ms.
- lashes
- number
- default 5
- Lashes on the upper lid, 0 to 8.
- twitch
- boolean
- default true
- Let the shut lid twitch when the pointer passes close.
- twitchRadius
- number
- default 72
- How close the pointer must pass to make the shut lid twitch, in px.
- irisColor
- string
- default "var(--accent-bright)"
- The iris colour; any CSS colour.
- size
- "sm" | "md" | "lg"
- default "md"
- Button height 32, 40 or 48 px with the eye scaled to match.
- sound
- boolean
- default false
- A tick each time the lids meet, after a press.
- disabled
- boolean
- default false
- Ignores presses; the gaze rests centred.
- className
- string
- default —
- Classes for the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| pressed / defaultPressed | boolean | false | Hidden state, controlled or initial; true is hidden, the eye shut. |
| onPressedChange | (hidden: boolean) => void | — | Fires from the press that changed it. |
| shownLabel | string | "Visible" | Text and accessible name while the eye is open. |
| hiddenLabel | string | "Hidden" | Text and accessible name while the eye is shut; the button keeps the wider label's width. |
| compact | boolean | false | Icon only, with the label as the accessible name. |
| follow | number | 0.6 | How keenly the pupil chases the pointer, 0 to 1: spring stiffness and reach. |
| blink | number | 2 | How many slow blinks it takes to wake when opened, 0 to 3. |
| blinkDuration | number | 260 | How long one waking blink lasts, in ms. |
| lashes | number | 5 | Lashes on the upper lid, 0 to 8. |
| twitch | boolean | true | Let the shut lid twitch when the pointer passes close. |
| twitchRadius | number | 72 | How close the pointer must pass to make the shut lid twitch, in px. |
| irisColor | string | "var(--accent-bright)" | The iris colour; any CSS colour. |
| size | "sm" | "md" | "lg" | "md" | Button height 32, 40 or 48 px with the eye scaled to match. |
| sound | boolean | false | A tick each time the lids meet, after a press. |
| disabled | boolean | false | Ignores presses; the gaze rests centred. |
| className | string | — | Classes for the wrapper. |