react-crystal-ball v1.0.0

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

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