# 🩸 BloodSpatter.js
A realistic blood effects library for web applications. Create dynamic blood cells, drips, reveals, and atmospheric effects.
## Features
- ✅ **Blood Cells** - Realistic flowing downward blood cells (4 variations)
- ✅ **Blood Reveal** - Typing animation with blood scanning effect
- ✅ **Blood Smear** - Hover effects that reveal blood trails
- ✅ **Blood Drips** - Page load triggered dripping effects
- ✅ **Chat Blood** - Flowing blood backgrounds for messages
- ✅ **Moving Spatter** - Continuous downward blood spatter patterns
- ✅ **Server Integration** - Trigger effects on server responses
## Installation
```bash
npm install bloodspatter-js
```
## Quick Start
### HTML
```html
Content here
```
### ES6 Modules
```javascript
import BloodSpatter from 'bloodspatter-js';
import 'bloodspatter-js/dist/bloodspatter.css';
// Add blood effects
BloodSpatter.addBloodCells(document.getElementById('container'), 3);
BloodSpatter.triggerBloodReveal(element, 'New evidence discovered...');
```
### CDN
```html
```
## API Reference
### BloodSpatter.addBloodCells(container, count)
Creates realistic blood cells that flow downward with gravity.
```javascript
// Add 5 blood cells to container
BloodSpatter.addBloodCells(document.getElementById('chat-message'), 5);
```
**Parameters:**
- `container` (Element) - DOM element to add blood cells to
- `count` (Number) - Number of blood cells to create (default: 3)
### BloodSpatter.triggerBloodReveal(container, text)
Creates a typing animation with blood scanning effect.
```javascript
// Reveal text with blood effect
BloodSpatter.triggerBloodReveal(messageEl, 'Blood analysis complete...');
```
**Parameters:**
- `container` (Element) - DOM element containing text
- `text` (String) - Text to reveal (optional, uses existing text if not provided)
### BloodSpatter.addBloodDrips(container, count)
Adds blood drip effects to a container.
```javascript
// Add 8 blood drips
BloodSpatter.addBloodDrips(document.body, 8);
```
**Parameters:**
- `container` (Element) - DOM element to add drips to
- `count` (Number) - Number of drips to create (default: 5)
### BloodSpatter.addChatBloodBG(messageElement)
Adds flowing blood background to chat messages.
```javascript
// Add blood background to message
BloodSpatter.addChatBloodBG(document.querySelector('.chat-message'));
```
**Parameters:**
- `messageElement` (Element) - Message element to add blood background to
### BloodSpatter.clearBloodCells(container)
Removes all blood cells from a container.
```javascript
// Clear all blood cells
BloodSpatter.clearBloodCells(document.getElementById('container'));
```
**Parameters:**
- `container` (Element) - DOM element to clear blood cells from
### BloodSpatter.resetBloodReveal(container)
Resets blood reveal effect to original state.
```javascript
// Reset reveal effect
BloodSpatter.resetBloodReveal(document.getElementById('message'));
```
## CSS Classes
The library includes these CSS classes for styling:
### Blood Cells
- `.blood-cell` - Base blood cell style
- `.blood-cell-1` to `.blood-cell-4` - Different blood cell variations
- `.blood-cell-animated` - Animation class for downward movement
### Blood Effects
- `.blood-smear-hover` - Hover effect for blood smears
- `.blood-reveal` - Container for blood reveal effect
- `.blood-reveal-text` - Text element for reveal animation
- `.chat-blood-background` - Blood background for chat messages
- `.blood-spatter-moving` - Continuous moving blood spatter
## Server Integration
### Chat Application Example
```javascript
// When server responds with message
fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({message: userInput})
})
.then(response => response.json())
.then(data => {
// Add message to chat
const messageEl = addChatMessage(data.response);
// Trigger blood effects based on content
if (data.response.includes('blood') || data.response.includes('evidence')) {
BloodSpatter.triggerBloodReveal(messageEl, data.response);
BloodSpatter.addBloodCells(messageEl, 3);
}
if (data.response.includes('crime scene')) {
BloodSpatter.addChatBloodBG(messageEl);
}
});
```
### Page Load Effects
```javascript
// Add ambient blood effects on page load
window.addEventListener('load', () => {
BloodSpatter.addBloodDrips(document.body, 5);
// Add blood cells to existing messages
document.querySelectorAll('.message').forEach(msg => {
if (Math.random() < 0.3) { // 30% chance
BloodSpatter.addBloodCells(msg, 2);
}
});
});
```
## Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
## Bundle Size
- **Minified**: ~8kb
- **Gzipped**: ~3kb
## Development
```bash
# Install dependencies
npm install
# Build package
npm run build
# Watch for changes
npm run dev
```
## License
MIT License - see LICENSE file for details.
## Contributing
1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request
## Changelog
### v1.0.0
- Initial release
- Blood cells with 4 variations
- Blood reveal typing animation
- Blood smear hover effects
- Blood drip effects
- Chat blood backgrounds
- Moving blood spatter patterns