@eason718/holographic-react-components/README.md

A React component library for creating interactive holographic effects with dynamic color shifting, mouse tracking, spring animations, cursor-following glow, shimmer effects, and performance optimization

# @eason718/holographic-react-components

A React component library for creating beautiful holographic effects with interactive mouse tracking.

## Installation

```bash
npm install @eason718/holographic-react-components
```

## Usage

### Basic Usage

```jsx
import React from 'react';
import { Holographic } from '@eason718/holographic-react-components';

function App() {
  return (
    <Holographic>
      <div>Your content here</div>
    </Holographic>
  );
}

export default App;
```

### Using the Performance-Optimized Version

```jsx
import React from 'react';
import { Hive } from '@eason718/holographic-react-components';

function App() {
  return (
    <Hive>
      <div>Your content here</div>
    </Hive>
  );
}

export default App;
```

### Customizing Props

Both components accept the following props:

- `holoUrl`: URL for the holographic mask image
- `initialHoloOpacity`: Initial opacity of the holographic effect (default: 0.01)
- `move`: Movement intensity (default: 0.1)
- `rotate`: Rotation intensity (default: 50)
- `scale`: Scale factor (default: 1)
- `cornerRadius`: Corner radius in pixels (default: 32)
- `smoothing`: Smoothing factor (default: 0.6)
- `style`: Additional CSS styles

```jsx
import React from 'react';
import { Holographic } from '@eason718/holographic-react-components';

function App() {
  return (
    <Holographic
      holoUrl="/path/to/your/mask.png"
      initialHoloOpacity={0.05}
      move={0.2}
      rotate={30}
      scale={1.2}
      cornerRadius={20}
      smoothing={0.8}
    >
      <div>Your content here</div>
    </Holographic>
  );
}

export default App;
```

## Components

### Holographic

The main holographic component with full interactive effects. Uses spring physics for smooth animations and advanced visual effects.

### Hive

A performance-optimized version of the holographic effect. Uses fewer animations and simplified effects for better performance on lower-end devices.

## Peer Dependencies

This package requires the following peer dependencies:

- react (>=17.0.0)
- react-dom (>=17.0.0)

## License

MIT © Eason Chang