React Mesmerizing

A collection of mesmerizing React components for creating engaging user experiences.

🌐 Live Demo & Documentation

• 📖 Storybook(live preview): react-mesmerizing.0x69.tech
• 📦 NPM Package: react-mesmerizing

Components

BallEscapeCanvas

An interactive animation with rotating rings and a bouncing ball. The goal is to destroy all rings by passing through their gaps. Features include:

• Configurable ring count, speed, and colors
• Automatic game restart
• Customizable background and ball colors
• Event callbacks for game state changes

RockPaperScissors

An interactive Rock Paper Scissors game with multiple rule sets and animated gameplay. Features include:

• Multiple Rule Sets: Classic RPS, Lizard-Spock, RPS-7, Fire-Tree-Water, 5 Elements, and more
• Animated Gameplay: Pieces automatically chase targets and avoid weaknesses
• Kill Feed: Real-time display of eliminations
• Score Tracking: Live count of remaining pieces for each type
• Automatic Restart: Games automatically restart after completion
• Customizable: Adjustable speed, piece count, canvas size, and colors

Rule Sets

1. 🦎🖖 Lizard-Spock Expansion - Extended 5-element version
2. 🧱📄✂️ Classic Rock, Paper, Scissors - Traditional 3-element game
3. 🔥💨🧽🌊 RPS-7 - Complex 7-element version with intricate relationships
4. 🔥🌳💧 Fire, Tree, Water - Simple 3-element cycle
5. 🌎 5 Elements - Traditional Chinese elements with complex interactions
6. 💑 Boys Chase Girls - Simple 2-element chase game

Game Mechanics

• Each piece type has specific targets it can eliminate
• Pieces automatically move toward their closest target
• When no targets are available, pieces run away from their weaknesses
• Collision detection eliminates defeated pieces
• Game continues until only one piece type remains
• Winner is automatically determined and displayed

Installation

npm install react-mesmerizing

Usage

BallEscapeCanvas

import { BallEscapeCanvas } from 'react-mesmerizing';

function App() {
  return (
    <BallEscapeCanvas
      ringCount={5}
      width={600}
      height={600}
      gameSpeed={1.0}
      onGameComplete={() => console.log('Game completed!')}
    />
  );
}

RockPaperScissors

import { RockPaperScissors } from 'react-mesmerizing';

function App() {
  return (
    <RockPaperScissors
      width={800}
      height={600}
      pieceCount={90}
      speed={3}
      ruleSetId={2} // Classic Rock Paper Scissors
      onGameComplete={(winner) => console.log(`${winner} wins!`)}
      onPieceEliminated={(winner, loser) => console.log(`${winner} eliminated ${loser}`)}
    />
  );
}

Props

BallEscapeCanvas Props

Prop	Type	Default	Description
ringCount	number	5	Number of rotating rings
width	number	600	Canvas width
height	number	600	Canvas height
gameSpeed	number	1.0	Game speed multiplier
autoRestartDelay	number	3000	Auto restart delay in ms
backgroundColor	string	"#0a0a0a"	Background color
ballColor	string	"#ffffff"	Ball color
ringColors	string[]	undefined	Array of ring colors
onGameComplete	() => void	undefined	Game completion callback
onGameStart	() => void	undefined	Game start callback

RockPaperScissors Props

Prop	Type	Default	Description
width	number	800	Canvas width
height	number	600	Canvas height

| speed | number | 1.5 | Movement speed of pieces (lower values = smoother movement) | | touchDistance | number | 3 | Collision detection distance | | pieceCount | number | 90 | Number of game pieces | | autoRestartDelay | number | 5000 | Auto restart delay in ms | | backgroundColor | string | "#888" | Background color | | ruleSetId | number | 1 | Rule set ID (1=Lizard-Spock, 2=Classic RPS, 3=RPS-7, 4=Fire-Tree-Water, 5=5 Elements, 6=Boys Chase Girls) | | onGameStart | () => void | undefined | Game start callback | | onGameComplete | () => void | undefined | Game completion callback | | onPieceEliminated | (winner: string, loser: string) => void | undefined | Piece elimination callback |

Development

Running Tests

npm test

Running Storybook

npm run storybook

Building

npm run build

License

MIT