Eye Matrix

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/eye-matrix

Usage

import { EyeMatrix } from "@reactbytes/eye-matrix";

export default function Example() {
  return (
    <EyeMatrix />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | paletteKey | select | monochromeDark | Flat monochrome color profile configuration. | | interactiveMode | select | mouse | Target tracking mode of the eyeballs. | | pupilStyle | select | normal | Visual shape geometry style of the pupil. | | eyeCount | number | 180 | Number of packed eye nodes in the viewport grid. | | padding | number | 4 | Horizontal/vertical spacing offset separating neighboring nodes. | | minRadius | number | 12 | Minimum radius limit of randomly generated eye circles. | | maxRadius | number | 65 | Maximum radius limit of randomly generated eye circles. | | scleraScale | number | 0.65 | Scale of the white eyeball globe relative to node size. | | pupilScale | number | 0.45 | Scale of the pupil iris relative to eyeball size. | | physicsStiffness | number | 0.12 | Stiffness tension factor of the spring wiggling. | | physicsDamping | number | 0.78 | Friction resistance damping of pupil inertia wiggles. | | blinkingEnabled | boolean | true | Toggles organic blinking behavior. | | blinkRate | number | 0.015 | Probability threshold of triggering close eyelids on each frame loop. | | flatBorderEnabled | boolean | true | Renders solid outlines around eye body structures. | | customBg | string | `` | Hex override for the background layer. |

Presets

This component includes the following design presets:

• Noir Slate (Dark) (monochromeDark)
• Ghostly Silver (Light) (monochromeLight)
• High Contrast Grey (monochromeMixed)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Eye Matrix.