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

$3

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

$3

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

``bash
npm install react-mesmerizing
`

Usage

$3

`tsx
import { BallEscapeCanvas } from 'react-mesmerizing';

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

$3

`tsx
import { RockPaperScissors } from 'react-mesmerizing';

function App() {
return (
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

$3

| 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 |

$3

| 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

$3

`bash
npm test
`

$3

`bash
npm run storybook
`

$3

`bash
npm run build
``

License

MIT