@eason718/holographic-react-components

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

Installation

npm install @eason718/holographic-react-components

Usage

Basic Usage

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

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

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