React Crystal Ball

A customizable animated crystal ball React component using WebGL.

Installation

npm install react-crystal-ball
# or
yarn add react-crystal-ball

Usage

import React from 'react'
import CrystalBall from 'react-crystal-ball'

function App() {
  return (
    <div className="App">
      <h1>Crystal Ball Demo</h1>

      {/* Basic usage */}
      <CrystalBall />

      {/* With custom size */}
      <CrystalBall size={200} />

      {/* With specific color palette */}
      <CrystalBall colorPalette={2} />

      {/* With custom colors */}
      <CrystalBall
        customColors={{
          color1: [0.2, 0.6, 0.8],
          color2: [0.7, 0.2, 0.5],
          color3: [0.1, 0.4, 0.3],
        }}
      />

      {/* With custom animation speed */}
      <CrystalBall speed={0.5} />

      {/* With custom styling */}
      <CrystalBall
        className="my-custom-class"
        style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)' }}
      />
    </div>
  )
}

export default App

Props

| Prop | Type | Default | Description | | ------------ | ------ | ----------- | ------------------------------------------------------- | | size | number | 384 | Size of the ball in pixels | | colorPalette | number | -1 (random) | Color palette to use (0-5), or -1 for random | | customColors | object | undefined | Custom color set with color1, color2, color3 properties | | speed | number | 1 | Animation speed multiplier | | className | string | '' | CSS class name for the container div | | style | object | {} | CSS style object for the container div |

Custom Colors Format

Each color is defined as an RGB array with values between 0 and 1:

customColors={{
  color1: [R, G, B], // Values between 0 and 1
  color2: [R, G, B],
  color3: [R, G, B]
}}

License

MIT